Search completed in 1.18 seconds.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[12
34][uif][v]() methods of the webgl api specify values of uniform variables.
...equivalent regex: uniform[12
34](u?i|f)v?
... syntax void gl.uniform1ui(location, v0); void gl.uniform2ui(location, v0, v1); void gl.uniform
3ui(location, v0, v1, v2); void gl.uniform4ui(location, v0, v1, v2, v
3); void gl.uniform1fv(location, data, optional srcoffset, optional srclength); void gl.uniform2fv(location, data, optional srcoffset, optional srclength); void gl.uniform
3fv(location, data, optional srcoffset, optional srclength); void gl.uniform4fv(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.uniform
3iv(location, data, optional srcoffset, optional srclength); void gl.uniform4iv(location, data, optional srcoffset, optional srclength); void gl.uniform1uiv(lo...
...And 4 more matches
Theme changes in Firefox 3.5 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox
3.5.
... global/checkbox.css, global/radio.css since bug
394892, radio buttons and checkboxes no longer have a minimum size on mac os x.
... browser.xul bug 46
3189 added a new attribute on the xul window element of browser.xul named browsingmode.
...And 3 more matches
NSS 3.17 release notes
introduction the nss team has released network security services (nss)
3.17, which is a minor release.
... distribution information the hg tag is nss_
3_17_rtm.
... nss
3.17 requires nspr 4.10.7 or newer.
...And 3 more matches
NSS 3.26 release notes
introduction the network security services (nss) team has released nss
3.26, which is a minor release.
... distribution information the hg tag is nss_
3_26_rtm.
... nss
3.26 requires netscape portable runtime (nspr) 4.12 or newer.
...And 3 more matches
NSS 3.40 release notes
introduction the nss team has released network security services (nss)
3.40, which is a minor release.
... distribution information the hg tag is nss_
3_40_rtm.
... nss
3.40 requires nspr 4.20 or newer.
...And 3 more matches
nss tech note3
all about certificate extensions nss technical note:
3 09 may 2002 nelson b.
... the oid for this extension is { 2 5 29 19 }, encoded in hex as 0x55, 0x1d, 0x1
3.
...the oid for this extension is { 2 16 840 1 11
37
30 1 1 } encoded in hex as 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42, 0x01, 0x01 in addition to netscape's own cert type extension, nss recognizes various x.509 extensions.
...And 3 more matches
JS_DoubleToInt32
obsolete since jsapi
38this feature is obsolete.
... this article covers features introduced in spidermonkey 17 convert a c floating-point number of type double to
32-bit integer per ecma spec.
... syntax int
32_t js_doubletoint
32(double d); uint
32_t js_doubletouint
32(double d); name type description d double the numeric value to convert.
...And 3 more matches
nsIGlobalHistory3
docshell/base/nsiglobalhistory
3.idlscriptable this interface provides information about global history to gecko.
... 1.0 66 introduced gecko 1.8 obsolete gecko 9.0 inherits from: nsiglobalhistory2 last changed in gecko 1.9 (firefox
3) this interface was originally created as part of nsiglobalhistory2, but was split off during the transition to places.
... method overview void adddocumentredirect(in nsichannel aoldchannel, in nsichannel anewchannel, in print
32 aflags, in boolean atoplevel); unsigned long geturigeckoflags(in nsiuri auri); void seturigeckoflags(in nsiuri auri, in unsigned long aflags); methods adddocumentredirect() notifies the history system that the page loading via aoldchannel redirected to anewchannel.
...And 3 more matches
nsIAbCard/Thunderbird3
note: this interface has been overhauled completely for thunderbird
3.
...same as home, but with `work' instead of `home' other contact: faxnumber, faxnumbertype pagernumber, pagernumbertype cellularnumber, cellularnumbertype jobtitle, department, company _aimscreenname dates: anniversaryyear, anniversarymonth, anniversaryday birthyear, birthmonth, birthday webpage1 (work), webpage2 (home) custom1, custom2, custom
3, custom4 notes integral properties: lastmodifieddate popularityindex prefermailformat (see nsiabprefermailformat) boolean properties: allowremotecontent inherits from: nsiabitem method overview nsivariant getproperty(in autf8string name, in nsivariant defaultvalue); [noscript] astring getpropertyasastring(in string name); [noscript]...
... autf8string getpropertyasautf8string(in string name); [noscript] pruint
32 getpropertyasuint
32(in string name); [noscript] boolean getpropertyasbool(in string name); void setproperty(in autf8string name, in nsivariant value); [noscript] void setpropertyasastring(in string name, in astring value); [noscript] void setpropertyasautf8string(in string name, in autf8string value); [noscript] void setpropertyasuint
32(in string name, in pruint
32 value); [noscript] void setpropertyasbool(in string name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatepho...
...And 3 more matches
WEBGL_compressed_texture_s3tc_srgb - Web APIs
the webgl_compressed_texture_s
3tc_srgb extension is part of the webgl api and exposes four s
3tc compressed texture formats for the srgb colorspace.
... ext.compressed_srgb_s
3tc_dxt1_ext a dxt1-compressed image in an srgb image format.
... ext.compressed_srgb_alpha_s
3tc_dxt1_ext a dxt1-compressed image in an srgb image format with a simple on/off alpha value.
...And 3 more matches
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage
3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
... syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage
3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage
3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
... possible values: gl.texture_
3d: a three-dimensional texture.
...And 3 more matches
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uniform[12
34][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[12
34][uif][v]().
... syntax void gl.uniform1f(location, v0); void gl.uniform1fv(location, 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.uniform
3f(location, v0, v1, v2); void gl.uniform
3fv(location, value); void gl.uniform
3i(location, v0, v1, v2); void gl.uniform
3iv(location, value); void gl.uniform4f(location, v0, v1, v2, v
3); void gl.uniform4fv(location, value); void gl.uniform4i(location, v0, v1, v2, v
3); void gl.uniform4iv(location, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
...And 3 more matches
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
the webglrenderingcontext.vertexattrib[12
34]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.vertexattrib
3f(index, v0, v1, v2); void gl.vertexattrib4f(index, v0, v1, v2, v
3); void gl.vertexattrib1fv(index, value); void gl.vertexattrib2fv(index, value); void gl.vertexattrib
3fv(index, value); void gl.vertexattrib4fv(index, value); parameters index a gluint specifying the position of the vertex attribute to be modified.
... v0, v1, v2, v
3 a floating point number for the vertex attribute value.
...And 3 more matches
Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example
3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors.
... to better understand the situation, here is the stacking context hierarchy: root stacking context level #1 level #2 (z-index: 1) level #
3 ...
... level #
3 level #2 (z-index: 1) ...
...And 3 more matches
translate3d() - CSS: Cascading Style Sheets
the translate
3d() css function repositions an element in
3d space.
... syntax translate
3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
...And 3 more matches
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - october 6, 2006 - october 1
3, 2006 announcements firefox vista compatible and versioning heads up robert strong describes the compatibility between windows vista and firefox, also about the versioning change.
... discussions everyone and his goldfish thinks bug
300198 should be fixed large response to the discussion about the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=
300198, regarding middle clicking on a tab.
... user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=
3472
30 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.
...And 2 more matches
2006-10-13 - Archive of obsolete content
announcements sunbird and lightning 0.
3rc2 sunbird and lightning 0.
3rc2 were released on october 7th.
... firefox 1.5.0.x and vista firefox 1.5.0.x was added to the vista compatibility list firefox 2 rc
3 code freeze the firefox 2 rc
3 code was frozen on oct.
... 10; the target release date for rc
3 is october 17 new tinderbox and bonsai servers the build team would like help testing out the new tinderbox and bonsai servers.
...And 2 more matches
3D collision detection - Game development
this article provides an introduction to the different bounding volume techniques used to implement collision detection in
3d environments.
... followup articles will cover implementations in specific
3d libraries.
...this consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the
3d coordinate space to see if they are overlapping.
...And 2 more matches
W3C - MDN Web Docs Glossary: Definitions of Web-related terms
the world wide web consortium (w
3c) is an international body that maintains web-related rules and frameworks.
... it consists of over
350 member-organizations that jointly develop web standards, run outreach programs, and maintain an open forum for talking about the web.
... the w
3c coordinates companies in the industry to make sure they implement the same w
3c standards.
...And 2 more matches
Build instructions for JSS 4.3.x
build instructions for jss 4.
3.x newsgroup: mozilla.dev.tech.crypto before building jss, you need to set up your system as follows: build nspr/nss by following the nspr/nss build instructions, to check that nss built correctly, run all.sh (in mozilla/security/nss/tests) and examine the results (in mozilla/test_results/security/computername.#/results.html.
... cvs co -r jss_4_
3_1_rtm mozilla/security/jss or cvs co -r jss_4_
3_rtm mozilla/security/jss setup environment variables needed for compiling java source.
... unix setenv java_home /usr/local/jdk1.5.0 (or wherever your jdk is installed) windows set java_home=c:\programs\jdk1.5.0 (or wherever your jdk is installed) windows (cygnus) java_home=/cygdrive/c/programs/jdk1.5.0 (or wherever your jdk is installed) export java_home windows build configurations winnt vs win95 as of nss
3.15.4, nspr/nss/jss build generates a "win95" configuration by default on windows.
...And 2 more matches
NSS 3.40.1 release notes
introduction the nss team has released network security services (nss)
3.40.1, which is a patch release for nss
3.40 distribution information the hg tag is nss_
3_40_1_rtm.
... nss
3.40.1 requires nspr 4.20 or newer.
... nss
3.40 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_40_1_rtm/src/ new in nss
3.40.1 new functionality no new functionality is introduced in this release.
...And 2 more matches
NS_InitXPCOM3
« xpcom api reference summary the ns_initxpcom
3 function initiates use of xpcom in the calling process with support for statically defined xpcom modules.
... #include "nsxpcom.h" nsresult ns_initxpcom
3( nsiservicemanager** aresult, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider, nsstaticmoduleinfo const* astaticmodules, pruint
32 astaticmodulecount ); parameters aresult [out] the resulting xpcom service manager.
... return values the ns_initxpcom
3 function returns ns_ok if successful.
...And 2 more matches
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage
3d() method of the webgl api copies pixels from the current webglframebuffer into an existing
3d texture sub-image.
... syntax void gl.copytexsubimage
3d(target, level, xoffset, yoffset, zoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
... possible values: gl.texture_
3d: a three-dimensional texture.
...And 2 more matches
Creating 3D objects using WebGL - Web APIs
e -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // right 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, // left 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, ]; since we've added a z-component to our vertices, we need to update the numcomponents of our vertexposition attribute to
3.
... // tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute { const numcomponents =
3; ...
... var colors = []; for (var j = 0; j < facecolors.length; ++j) { const c = facecolors[j]; // repeat each color four times for the four vertices of the face colors = colors.concat(c, c, c, c); } const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float
32array(colors), gl.static_draw); define the element array once the vertex arrays are generated, we need to build the element array.
...And 2 more matches
-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-
3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css
3d transforms are supported.
... syntax -webkit-transform-
3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css
3d transforms.
... values true the browser supports the
3d css transforms with the -webkit prefix.
...And 2 more matches
scale3d() - CSS: Cascading Style Sheets
the scale
3d() css function defines a transformation that resizes an element in
3d space.
... syntax the scale
3d() function is specified with three values, which represent the amount of scaling to be applied in each direction.
... scale
3d(sx, sy, sz) values sx is a <number> representing the abscissa of the scaling vector.
...And 2 more matches
Using device orientation with 3D transforms - Developer guides
this article provides tips on how to use device orientation information in tandem with css
3d transforms.
... using orientation to rotate an element the easiest way to convert orientation data to a
3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values.
...he initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a
3d rotation: rotatez, then rotatex and then rotatey.
...And 2 more matches
307 Temporary Redirect - HTTP
http
307 temporary redirect redirect status response code indicates that the resource requested has been temporarily moved to the url given by the location headers.
...in the cases where you want the method used to be changed to get, use
30
3 see other instead.
... the only difference between
307 and
302 is that
307 guarantees that the method and the body will not be changed when the redirected request is made.
...And 2 more matches
DataView.prototype.getFloat32() - JavaScript
the getfloat
32() method gets a signed
32-bit float (float) at the specified byte offset from the start of the dataview.
... syntax dataview.getfloat
32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the
32-bit float is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.getInt32() - JavaScript
the getint
32() method gets a signed
32-bit integer (long) at the specified byte offset from the start of the dataview.
... syntax dataview.getint
32(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view where to read the data.
... littleendian optional indicates whether the
32-bit int is stored in little- or big-endian format.
...And 2 more matches
DataView.prototype.getUint32() - JavaScript
the getuint
32() method gets an unsigned
32-bit integer (unsigned long) at the specified byte offset from the start of the dataview.
... syntax dataview.getuint
32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the
32-bit int is stored in little- or big-endian format.
...And 2 more matches
Float32Array() constructor - JavaScript
the float
32array() typed array constructor creates a new float
32array object, which is, an array of
32-bit floating point numbers (corresponding to the c float data type) in the platform byte order.
... syntax new float
32array(); // new in es2017 new float
32array(length); new float
32array(typedarray); new float
32array(object); new float
32array(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.
... typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
...And 2 more matches
Int32Array() constructor - JavaScript
the int
32array() typed array constructor creates an array of twos-complement
32-bit signed integers in the platform byte order.
... syntax new int
32array(); // new in es2017 new int
32array(length); new int
32array(typedarray); new int
32array(object); new int
32array(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.
... typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
...And 2 more matches
Uint32Array() constructor - JavaScript
the uint
32array() typed array constructor creates an array of
32-bit unsigned integers in the platform byte order.
... syntax new uint
32array(); // new in es2017 new uint
32array(length); new uint
32array(typedarray); new uint
32array(object); new uint
32array(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.
... typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
...And 2 more matches
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 28 - november
3, 2006 announcements new reflow branch off of trunk l.
... david baron announced that he merged the reflow branch to a new branch (reflow_200610
31_branch) off of the trunk.
... discussions html5 @ w
3c discussion of the official announcement from w
3c on the development of html5 and how mathml should be included in it.
... perf question (reflow branch) a look into bug #
352
367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a table.
Theme changes in Firefox 3 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox
3.
... note: we could use an article called updating themes for firefox
3 that would serve as a how-to guide for updating themes.
... filename css file details changes to the default theme the table below lists changes made in the default theme for firefox
3; you can use this information as a starting point for figuring out the changes you need to make.
... mac os x mac os x themes for firefox
3 should add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { padding:xpx; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.
POP3 - MDN Web Docs Glossary: Definitions of Web-related terms
pop
3 (post office protocol) is a very common protocol for getting emails from a mail server over a tcp connection.
... pop
3 does not support folders, unlike the more recent imap4, which is harder to implement because of its more complex structure.
... clients usually retrieve all messages and then delete them from the server, but pop
3 does allow retaining a copy on the server.
... nearly all email servers and clients currently support pop
3.
JS::Int32Value
this article covers features introduced in spidermonkey 24 convert a c signed
32-bit integer of type int
32_t to a js::value.
... syntax js::value js::int
32value(int
32_t i
32) name type description i
32 int
32_t c integer to convert.
... description js::int
32value converts a c signed
32-bit integer of type int
32_t to js::value, the type of javascript values.
... see also mxr id search for js::int
32value js::value js::float
32value js::doublevalue js::numbervalue js_numbervalue ...
JS_DoubleIsInt32
this article covers features introduced in spidermonkey 17 compare double value and int
32_t value.
... syntax bool js_doubleisint
32(double d, int
32_t *ip); name type description d double a double value to compare ip int
32_t * a pointer to int
32_t value to compare description js_doubleisint
32 returns true if d i sequal to *ip.
... (comment from mozilla::numberequalsint
32) casting a floating-point value that doesn't truncate to int
32_t, to int
32_t, induces undefined behavior.
... see also mxr id search for js_doubleisint
32 js_doubletoint
32 js_doubletouint
32 bug 6
311
32 bug 744965 ...
Using the W3C DOM Level 1 Core - Web APIs
the w
3c's dom level 1 core is an api for manipulating the dom trees of html and xml documents (among other tree-like types of documents).
... the w
3c dom level 1 core allows you to change a dom tree in any way you want.
...this document object implements the document interface from the w
3c's dom level 1 spec.
... see also the dom level 1 core specification from the w
3c.
msStereo3DPackingMode - Web APIs
msstereo
3dpackingmode is a read/write property which gets or sets the frame-packing mode for stereo
3-d video content.
... syntax htmlvideoelement.msstereo
3dpackingmode(topbottom, sidebyside, none); value the following values return, or set, the stereo
3-d content packing as "topbottom", "sidebyside", or "none" for regular 2-d video.
... topbottom (1): specifies stereo
3-d content packing and that the views are packed side-by-side in a single frame.
... sidebyside (2): specifies sidebyside stereo
3-d content packing and that the views are packed top-to-bottom in a single frame.
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the webglrenderingcontext.uniformmatrix[2
34]fv() methods of the webgl api specify matrix values for uniform variables.
... the three versions of this method (uniformmatrix2fv(), uniformmatrix
3fv(), and uniformmatrix4fv()) take as the input value 2-component,
3-component, and 4-component square matrices, respectively.
... syntax webglrenderingcontext.uniformmatrix2fv(location, transpose, value); webglrenderingcontext.uniformmatrix
3fv(location, transpose, value); webglrenderingcontext.uniformmatrix4fv(location, transpose, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
... value a float
32array or sequence of glfloat values.
302 Found - HTTP
the hypertext transfer protocol (http)
302 found redirect status response code indicates that the resource requested has been temporarily moved to the url given by the location header.
...it is therefore recommended to set the
302 code only as a response for get or head methods and to use
307 temporary redirect instead, as the method change is explicitly prohibited in that case.
... in the cases where you want the method used to be changed to get, use
30
3 see other instead.
... status
302 found specifications specification title rfc 72
31, section 6.4.
3:
302 found hypertext transfer protocol (http/1.1): semantics and content ...
308 Permanent Redirect - HTTP
the hypertext transfer protocol (http)
308 permanent redirect redirect status response code indicates that the resource requested has been definitively moved to the url given by the location headers.
... the request method and the body will not be altered, whereas
301 may incorrectly sometimes be changed to a get method.
... note: some web applications may use the
308 permanent redirect in a non-standard way and for other purposes.
... for example, google drive uses a
308 resume incomplete response to indicate to the client when an incomplete upload stalled.[1] status
308 permanent redirect specifications specification title rfc 75
38, section
3:
308 permanent redirect the hypertext transfer protocol status code
308 (permanent redirect) ...
DataView.prototype.setFloat32() - JavaScript
the setfloat
32() method stores a signed
32-bit float (float) value at the specified byte offset from the start of the dataview.
... syntax dataview.setfloat
32(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
32-bit float is stored in little- or big-endian format.
... examples using the setfloat
32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setfloat
32(1,
3); dataview.getfloat
32(1); //
3 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.setfloat
32' in that specification.
DataView.prototype.setInt32() - JavaScript
the setint
32() method stores a signed
32-bit integer (long) value at the specified byte offset from the start of the dataview.
... syntax dataview.setint
32(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
32-bit int is stored in little- or big-endian format.
... examples using the setint
32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setint
32(1,
3); dataview.getint
32(1); //
3 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.setint
32' in that specification.
DataView.prototype.setUint32() - JavaScript
the setuint
32() method stores an unsigned
32-bit integer (unsigned long) value at the specified byte offset from the start of the dataview.
... syntax dataview.setuint
32(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
32-bit int is stored in little- or big-endian format.
... examples using the setuint
32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setuint
32(1,
3); dataview.getuint
32(1); //
3 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.setuint
32' in that specification.
k3 - SVG: Scalable Vector Graphics
the k
3 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 + k
3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k
3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k
3="10" k4="0" /> </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/12...
...668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k
3' in that specification.
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k
3' in that specification.
Example 3 - Learn web development
ption">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0
3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding ...
...: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e
3e
3e
3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e
3e
3e
3, #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-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; te...
...: 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.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) retu...
NSS Sample Code Sample_3_Basic Encryption and MACing
nss sample code
3: basic encryption and macing this example program demonstrates how to encrypt and mac a file.
... sample code
3 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize
32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----...
...---" #define iv_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>"); fprint...
EncDecMAC using token object - sample 3
encdecmac using token object example: <h2 id="nss_sample_code_
3_hashing.">nss sample code
3: enc/dec/mac using token object id.</h2> <p class="summary">computes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #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 cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----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 specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20...
JS::Float32Value
syntax js::value js::float
32value(float f) name type description f float c float to convert.
... description js::float
32value converts a c floating-point number of type float to js::value, the type of javascript values.
... see also mxr id search for js::float
32value js::value js::int
32value js::doublevalue js::numbervalue js_numbervalue ...
103 Early Hints - HTTP
the http 10
3 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
... syntax 10
3 early hints specifications specification status comments rfc 8297: 10
3 early hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data.
...please contribute data for "http.status.10
3" (depth: 1) to the mdn compatibility data repository.
203 Non-Authoritative Information - HTTP
the http 20
3 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response .
... the 20
3 response is similar to the value 214, meaning transformation applied, of the warning header code, which has the additional advantage of being applicable to responses with any status code.
... status 20
3 non-authoritative information specifications specification title rfc 72
31, section 6.
3.4: 20
3 non-authoritative information hypertext transfer protocol (http/1.1): semantics and content ...
301 Moved Permanently - HTTP
the hypertext transfer protocol (http)
301 moved permanently redirect status response code indicates that the resource requested has been definitively moved to the url given by the location headers.
...it is therefore recommended to use the
301 code only as a response for get or head methods and to use the
308 permanent redirect for post methods instead, as the method change is explicitly prohibited with this status.
... status
301 moved permanently example client request get /index.php http/1.1 host: www.example.org server response http/1.1
301 moved permanently location: http://www.example.org/index.asp specifications specification title rfc 72
31, section 6.4.2:
301 moved permanently hypertext transfer protocol (http/1.1): semantics and content ...
304 Not Modified - HTTP
the http
304 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
304 responses, so that access to the local cache is visible to developers.
... status
304 not modified specifications specification title rfc 72
32, section 4.1:
304 not modified hypertext transfer protocol (http/1.1): conditional requests ...
431 Request Header Fields Too Large - HTTP
the http 4
31 request header fields too large response status code indicates that the server refuses to process the request because the request’s http headers are too long.
... 4
31 can be used when the total size of request headers is too large, or when a single header field is too large.
... servers will often produce this status if: the referer url is too long there are too many cookies sent in the request status 4
31 request header fields too large specifications specification title rfc 6585, section 5: 4
31 request header fields too large additional http status codes ...
503 Service Unavailable - HTTP
the hypertext transfer protocol (http) 50
3 service unavailable server error response code indicates that the server is not ready to handle the request.
... caching-related headers that are sent along with this response should be taken care of, as a 50
3 status is often a temporary condition and responses shouldn't usually be cached.
... status 50
3 service unavailable specifications specification title rfc 72
31, section 6.6.4: 50
3 service unavailable hypertext transfer protocol (http/1.1): semantics and content ...
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 28 - november 0
3, 2006 announcements none for this week.
... meetings calendar project weekly status meeting - 2006/11/01 17:00 utc (meeting notes) calendar project weekly qa chat - 2006/11/02 16:
30 utc (meeting notes) ...
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.l10n - october 1
3, 2006 announcements seamonkey 1.0.5 he-il seamonkey 1.0.5 in hebrew was released a while ago firefox 2 rc2 is out firefox 2 rc2 is out, to download click here sunbird_0_
3_release tag being created sunbird_0_
3_release tag being created seamonkey 1.1 localization freeze and beta upcoming there are no open blockers left.
... discussions mozillatranslator 5.1
3 rfes mozillatranslator 5.1
3 is ready to be released in a few weeks.
Index - Archive of obsolete content
3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment.
... 1
3 align reference, référence(2), xul no summary!
... 2
3 autocompletesearch xul attributes, xul reference no summary!
...And 306 more matches
Index
3 creating javascript jstest reftests ecmascript, guide, javascript, test in the js/src/tests directory, there are a few important subdirectories.
... 1
3 jit optimization outcomes beginner, firefox, intro, needscontent, spidermonkey spidermonkey's optimizing jit, ionmonkey, uses different optimization strategies to speed up various operations.
... 2
3 js::autoidarray jsapi reference, reference, référence(2), spidermonkey js::autoidarray takes the ownership of jsidarray, and frees it in destructor by calling js_destroyidarray.
...And 215 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
3 502 502, bad gateway, glossary, http errors, infrastructure, navigation an http error code meaning "bad gateway".
... 6 aria accessibility, glossary aria (accessible rich internet applications) is a w
3c specification for adding semantics and other metadata to html to cater to users of assistive technology.
... 9 atag atag, accessibility, authoring tool accessibility guidelines, glossary atag (authoring tool accessibility guidelines) is a w
3c recommendation for building accessible-authoring tools that produce accessible contents.
...And 199 more matches
Key Values - Web APIs
vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa5) kvk_option (0x
3a) kvk_rightoption (0x
3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x0100002
3) keycode_alt_left (57) keycode_alt_right (58) "altgraph" [5] the altgr or altgraph (alternate graphics) key.
... enables the iso level
3 shift modifier (where shift is the level 2 modifier).
... gdk_key_mode_switch (0xff7e) gdk_key_iso_level
3_shift (0xfe0
3) gdk_key_iso_level
3_latch (0xfe04) gdk_key_iso_level
3_lock (0xfe05) gdk_key_iso_level5_shift (0xfe11) gdk_key_iso_level5_latch (0xfe12) gdk_key_iso_level5_lock (0xfe1
3) qt::key_altgr (0x0100110
3 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key.
...And 162 more matches
SVG documentation index - SVG: Scalable Vector Graphics
found
38
3 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...
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.
... 11 svg 1.1 support in firefox firefox, svg you can find some basic examples of svg syntax and usage in the w
3c svg test suite.
...And 140 more matches
Index - Learn web development
found
348 pages: # page tags and summary 1 learn web development beginner, css, html, index, intro, landing, learn, web welcome to the mdn learning area.
...
3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
... 1
3 aprender y obtener ayuda beginner, learn, learning, web development, getting help it is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
...And 104 more matches
Bytecode Descriptions
int
32 operands: (int
32_t val) stack: ⇒ val push the int
32_t immediate operand as an int
32value.
... jsop::zero, jsop::one, jsop::int8, jsop::uint16, and jsop::uint24 are all compact encodings for jsop::int
32.
... int8 operands: (int8_t val) stack: ⇒ val push the int8_t immediate operand as an int
32value.
...And 94 more matches
NSS functions
this page lists all exported functions in nss
3.11.7 it was ported from here.
... function name/documentation source code nss versions nss_getclientauthdata mxr
3.2 and later nss_setdomesticpolicy mxr
3.2 and later nss_setexportpolicy mxr
3.2 and later nss_setfrancepolicy mxr
3.2 and later nssssl_versioncheck mxr
3.2.1 and later ssl_authcertificate mxr
3.2 and later ssl_authcertificatehook mxr
3.2 and later ssl_badcerthook mxr
3.2 and later ssl...
..._certdbhandleset mxr
3.2 and later ssl_canbypass mxr
3.11.7 and later ssl_cipherpolicyget mxr
3.2 and later ssl_cipherpolicyset mxr
3.2 and later ssl_cipherprefget mxr
3.2 and later ssl_cipherprefgetdefault mxr
3.2 and later ssl_cipherprefset mxr
3.2 and later ssl_cipherprefsetdefault mxr
3.2 and later ssl_clearsessioncache mxr
3.2 and later 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...
...And 76 more matches
sslfnc.html
syntax #include "ssl.h" secstatus ssl_optionsetdefault(print
32 option, prbool on); parameters this function has the following parameters: option one of the following values (except as noted, the factory setting is "off"): ssl_security enables use of security protocol.
... ssl_enable_ssl
3 enables the application to communicate with ssl v
3.
...if you turn this option off, an attempt to establish a connection with a peer that only understands ssl v
3 will fail.
...And 73 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
situation int-evry manages about
3000 users (mostly students) who share computers in labs and "self service" computer rooms.
...computers are dual-boot (windows 7 and linux fedora 19 by 201
3).
...for mozilla 1.x.x, firefox, thunderbird or netscape 7 it is still a javascript file, the byte-shift is 1
3 by default, but can be removed using the pref("general.config.obscure_value", 0); preference in any appropriate .js file dedicated to autoconfig (here autoconf.js).
...And 66 more matches
HTTP Index - HTTP
2 a typical http session http in client-server protocols, like http, sessions consist of three phases:
3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser.
... 7 evolution of http guide, http, needsupdate, needsupdate(http/
3) http (hypertext transfer protocol) is the underlying protocol of the world wide web.
... http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and
3d.
...And 65 more matches
MathML Accessibility in Mozilla
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.
... accessfu: mathml support in android and firefox os is currently being implemented in our accessfu module and a patch is available on bug 116
3374.
... a base root index root a
3 __________ the third root of a __________ cube root of a, end of root cube root of a.
...And 62 more matches
StringView - Archive of obsolete content
however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-format data, but, for example,
32-bit integers or floats).
...9254740992 && 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 public license, version
3 or later.
... |*| http://www.gnu.org/licenses/lgpl-
3.0.html |*| \*/ function stringview (vinput, sencoding /* optional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, fputoutptcode, fgetoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ?
...And 59 more matches
WebGL constants - Web APIs
line_strip 0x000
3 passed to drawelements or drawarrays to draw a connected group of line segments from the first vertex to the last.
... src_color 0x0
300 passed to blendfunc or blendfuncseparate to multiply a component by the source elements color.
... one_minus_src_color 0x0
301 passed to blendfunc or blendfuncseparate to multiply a component by one minus the source elements color.
...And 58 more matches
NSS environment variables
3.12.
3 nsrandfile string (file name) uses this file to seed the pseudo random number generator.
... before
3.0 nss_allow_weak_signature_alg boolean (any non-empty value to enable) enables the use of md2 and md4 inside signatures.
... this was allowed by default before nss
3.12.
3.
...And 54 more matches
JSAPI reference
runtimes and contexts js_init added in spidermonkey
31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime js_getruntimeprivate js_setruntimeprivate js_setnativestackquota added in spidermonkey 17 js_contextiteratorobsolete since jsapi 52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcallback enum jscontextop ...
...js_getruntime js_getparentruntime added in spidermonkey
31 js_getobjectruntime added in spidermonkey 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 14 js_setbranchcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi
30 js_getoperationcallback obsolete since jsapi
30 js_triggeroperationcallback obsolete since jsapi
30 js_clearoperationcallback obsolete since javascript 1.9.1 js_getoperationlimit obsole...
...te since javascript 1.9.1 js_setoperationlimit obsolete since javascript 1.9.1 js_max_operation_limit obsolete since javascript 1.9.1 js_operation_weight_base obsolete since javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 1
3 js_setscriptstackquota obsolete since javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 enum jsversion jsversion_ecma_
3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_getimplementationversion js_getversion js_setversionforcompartment added in spidermonkey
31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js::currentglob...
...And 53 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 2
37 pages: # page tags and summary 1 html: hypertext markup language html, html5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web.
...
3 applying color to html elements using css beginner, css, css colors, guide, html, html colors, html styles, styling html, color with css, there are lots of ways to add color to your html elements to create just the look you want.
... 1
3 data-* global attributes, html, reference the data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the html and its dom representation by scripts.
...And 50 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 following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter: url(file.svg#filter-element-id) interp...
...except where noted, the functions that take a value expressed with a percent sign (as in
34%) also accept the value expressed as decimal (as in 0.
34).
... <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/
3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/
3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img
3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height...
...And 47 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
introduction when netscape started the mozilla browser, it made the conscious decision to support w
3c standards.
...browsers, like internet explorer 4, that were built before the conception of w
3c standards inherited many quirks.
... i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w
3c equivalent existed at the time.
...And 46 more matches
Web audio codec guide - Web media technologies
codec name (short) full codec name container support aac advanced audio coding mp4, adts,
3gp alac apple lossless audio codec mp4, quicktime (mov) amr adaptive multi-rate
3gp flac free lossless audio codec mp4, ogg, flac g.711 pulse code modulation (pcm) of voice frequencies rtp / webrtc g.722 7 khz audio coding within 64 kbps (for telephony/voip) rtp / webrtc mp
3 mpeg-1 audio layer iii mp4, adts, ...
...mpeg1,
3gp opus opus webm, mp4, ogg vorbis vorbis webm, ogg [1] when mpeg-1 audio layer iii codec data is stored in an mpeg file, and there is no video track on the file, the file is typically referred to as an mp
3 file, even though it's still an mpeg format file.
...for example, mp
3 supports one lfe channel, while aac supports up to 16.
...And 42 more matches
sslerr.html
-1228
3 (unused) ssl_error_bad_client -12282 "the server has encountered bad data from the client." this error code should occur only on sockets that are acting as servers.
... ssl_error_bad_mac_read -1227
3 "ssl received a record with an incorrect message authentication code." this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity.
...possible causes include: (a) both ssl2 and ssl
3 are disabled, (b) all the individual ssl cipher suites are disabled, or (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected.
...And 41 more matches
imgIContainer
obsolete since gecko 2.0 void appendframe(in print
32 ax, in print
32 ay, in print
32 awidth, in print
32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only!
... obsolete since gecko 2.0 void appendpalettedframe(in print
32 ax, in print
32 ay, in print
32 awidth, in print
32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array, size_is(palettelength)] out pruint
32 palettedata, out unsigned long palettelength); native code only!
... obsolete since gecko 2.0 gfximagesurface copyframe(in pruint
32 awhichframe, in pruint
32 aflags); native code only!
...And 40 more matches
Event reference
drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every
350ms).
... dragover an element or text selection is being dragged over a valid drop target (fired continuously every
350ms).
... abort uievent dom l
3 the loading of a resource has been aborted.
...And 40 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
preference description value nglayout.debug.disable_xul_cache (not present in firefox
3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays.
... true browser.dom.window.dump.enabled (not present in firefox
3.5+) enables use of the dump method for debugging.
... true javascript.options.showinconsole (present in firefox
3.5+) outputs javascript errors to the error console.
...And 39 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>
39.95</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> </catalog_ite...
... 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).
... /*\ |*| |*| jxon snippet #1 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version
3 or later.
...And 39 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.
... this page describes behavior of the old html parser in firefox
3.6 and older.
...see bug 1
312 and bug 55264 for some of the history of the mode determination.
...And 39 more matches
MathML Torture Test
<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/d5a0dbbca
3.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.realityripple.c...
...om/samples/b8/da4a50ea
34.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/1d0e6e07
3c.png" width="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> ...
.../mo> <msup> <mi>y</mi> <mfrac> <mn>2</mn> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </msup> </mrow> </math> </td></tr> <tr> <td>5</td> <td><img src="https://udn.realityripple.com/samples/d2/921226dd85.png" width="
30" height="42" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mi>a</mi> <mrow> <mi>b</mi> <mo>/</mo> <mn>2</mn> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>6</td> <td><img src="https://udn.realityripple.com/samples/76/5ce...
...And 39 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 7
36d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module.
... each parameter has a type explicitly declared; wasm currently has four available number types (plus reference types; see the reference types) section below): i
32:
32-bit integer i64: 64-bit integer f
32:
32-bit float f64: 64-bit float a single parameter is written (param i
32) and the return type is written (result i
32), hence a binary function that takes two
32-bit integers and returns a 64-bit float would be written like this: (func (param i
32) (param i
32) (result f64) ...
... ) after the signature, locals are listed with their type, for example (local i
32).
...And 38 more matches
requiredFeatures - SVG: Scalable Vector Graphics
tglyph>, <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.w
3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="2
30" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="2
30" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default valu...
... http://www.w
3.org/tr/svg11/feature#svg at least one of the following feature is supported: http://www.w
3.org/tr/svg11/feature#svg-static http://www.w
3.org/tr/svg11/feature#svg-animation http://www.w
3.org/tr/svg11/feature#svg-dynamic http://www.w
3.org/tr/svg11/feature#svgdom http://www.w
3.org/tr/svg11/feature#svgdom at least one of the following feature is supported: http://www.w
3.org...
.../tr/svg11/feature#svgdom-static http://www.w
3.org/tr/svg11/feature#svgdom-animation http://www.w
3.org/tr/svg11/feature#svgdom-dynamic http://www.w
3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w
3.org/tr/svg11/feature#coreattribute http://www.w
3.org/tr/svg11/feature#structure http://www.w
3.org/tr/svg11/feature#containerattribute http://www.w
3.org/tr/svg11/feature#conditionalprocessing http://www.w
3.org/tr/svg11/feature#image http://www.w
3.org/tr/svg11/feature#style http://www.w
3.org/tr/svg11/feature#viewportattribute http://www.w
3.org/tr/svg11/feature#shape http://www.w
3.org/tr/svg11/feature#text http://www.w
3.org/tr/svg11/feature#paintattribute http://www.w
3.org/tr/svg11/feature#opacityattribute http://www...
...And 37 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 44
3 * smtp 25 * ftp 21 * imap 14
3 * imaps 99
3 (imap over ssl) * nntp 119 * nntps 56
3 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
... example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:44
3 > sx.txt output connected to interzone.mcom.com:44
3 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x0
3, 0x00} cipher-specs-length =
39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40...
.../md5 (0x0
30080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/
3des192ede-cbc/md5 (0x000004) ssl
3/rsa/rc4-128/md5 (0x00ffe0) ssl
3/rsa-fips/
3des192ede-cbc/sha (0x00000a) ssl
3/rsa/
3des192ede-cbc/sha (0x00ffe1) ssl
3/rsa-fips/des64cbc/sha (0x000009) ssl
3/rsa/des64cbc/sha (0x00000
3) ssl
3/rsa/rc4-40/md5 (0x000006) ssl
3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x
37c9 0xb5c9 0x7b70 0x8fe9 0xd1d
3 0x2592 } } ] <-- [ sslrecord { 0: 16 0
3 00 0
3 e5 ...
...And 36 more matches
Web video codec guide - Web media technologies
at a typical
30 frames per second, each second of hd video would occupy 248,8
32,000 bytes (~249 mb).
... a minute of hd video would need 14.9
3 gb of storage.
... a fairly typical
30 minute video conference would need about 447.9 gb of storage, and a 2-hour movie would take almost 1.79 tb (that is, 1790 gb).
...And 36 more matches
Mozilla’s UAAG evaluation report
when filing mozilla bugs based on uaag requirements, please use bug 2441
3 as the uaag meta bug.
... checkpoint information (same scaled used on w
3c's uaag implementation reports pages) rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable document under construction guideline 1.
...(p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.
3 provide text messages.
...And 35 more matches
nsIDOMWindowUtils
to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint
32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko
38.0 void disablenontestmouseevent...
... boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 1
3.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint
32 aflags, in nscolor abackgroundcolor, in gfxcontext athebescontext); native code only!
... void removesheet(in nsiuri sheeturi, in unsigned long type); void resumetimeouts(); void sendcompositionevent(in astring atype); obsolete since gecko 9 void sendcompositionevent(in astring atype, in astring adata, in astring alocale); obsolete since gecko
38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko
38.0...
...And 35 more matches
NSS tools : ssltab
the following are well-known port numbers: * http 80 * https 44
3 * smtp 25 * ftp 21 * imap 14
3 * imaps 99
3 (imap over ssl) * nntp 119 * nntps 56
3 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:44
3 > sx.txt output connected to interzone.mcom.com:44
3 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x0
3, 0x00} cipher-specs-length =
39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x0
30080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0)...
... ssl2/rsa/
3des192ede-cbc/md5 (0x000004) ssl
3/rsa/rc4-128/md5 (0x00ffe0) ssl
3/rsa-fips/
3des192ede-cbc/sha (0x00000a) ssl
3/rsa/
3des192ede-cbc/sha (0x00ffe1) ssl
3/rsa-fips/des64cbc/sha (0x000009) ssl
3/rsa/des64cbc/sha (0x00000
3) ssl
3/rsa/rc4-40/md5 (0x000006) ssl
3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x
37c9 0xb5c9 0x7b70 0x8fe9 0xd1d
3 0x2592 } } ] <-- [ sslrecord { 0: 16 0
3 00 0
3 e5 |.....
...And 33 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 44
3 * smtp 25 * ftp 21 * imap 14
3 * imaps 99
3 (imap over ssl) * nntp 119 * nntps 56
3 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:44
3 > sx.txt output connected to interzone.mcom.com:44
3 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x0
3, 0x00} cipher-specs-length =
39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x0
30080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0)...
... ssl2/rsa/
3des192ede-cbc/md5 (0x000004) ssl
3/rsa/rc4-128/md5 (0x00ffe0) ssl
3/rsa-fips/
3des192ede-cbc/sha (0x00000a) ssl
3/rsa/
3des192ede-cbc/sha (0x00ffe1) ssl
3/rsa-fips/des64cbc/sha (0x000009) ssl
3/rsa/des64cbc/sha (0x00000
3) ssl
3/rsa/rc4-40/md5 (0x000006) ssl
3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x
37c9 0xb5c9 0x7b70 0x8fe9 0xd1d
3 0x2592 } } ] <-- [ sslrecord { 0: 16 0
3 00 0
3 e5 |.....
...And 33 more matches
Mozilla Quirks Mode Behavior
add padding if the very first node in an li is another ul or ol (bug 986
36).
... obsolete since gecko 50 list bullets do not inherit the font size of the list (bug 97
351).
... removed in firefox 50 (bug 648
331).
...And 32 more matches
Index - Game development
3 examples demos, example, games, web this page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with.
... 1
3 3d collision detection
3d, games, javascript, bounding boxes, collision detection this article provides an introduction to the different bounding volume techniques used to implement collision detection in
3d environments.
... followup articles will cover implementations in specific
3d libraries.
...And 31 more matches
NSS Tools ssltap
the following are well-known port numbers: http 80 https 44
3 smtp 25 ftp 21 imap 14
3 imaps 99
3 (imap over ssl) nntp 119 nntps 56
3 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
... command ssltap.exe -sx -p 444 interzone.mcom.com:44
3 > sx.txt output output connected to interzone.mcom.com:44
3--> [alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x0
3, 0x00} cipher-specs-length =
39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 ...
... (0x0
30080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/
3des192ede-cbc/md5 (0x000004) ssl
3/rsa/rc4-128/md5 (0x00ffe0) ssl
3/rsa-fips/
3des192ede-cbc/sha (0x00000a) ssl
3/rsa/
3des192ede-cbc/sha (0x00ffe1) ssl
3/rsa-fips/des64cbc/sha (0x000009) ssl
3/rsa/des64cbc/sha (0x00000
3) ssl
3/rsa/rc4-40/md5 (0x000006) ssl
3/rsa/rc2cbc40/md5 } session-id = { } challenge = { 0xec5d 0x8edb 0x
37c9 0xb5c9 0x7b70 0x8fe9 0xd1d
30x2592 }}]<-- [sslrecord { 0: 16 0
3 00 0
3 e5 |.....
...And 31 more matches
KeyboardEvent: code values - Web APIs
keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x000
3 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x0005 "digit
3" "digit
3" 0x0006 "digit4" "digit4" 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" 0x001
3 "keyr" "keyr" 0x0014 "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" 0x002
3 "keyh" "keyh" 0x0024 "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" 0x00
30 "keyb" "keyb" 0x00
31 "keyn" "keyn" 0x00
32 "keym" "keym" 0x00
33 "comma" "comma" 0x00
34 "period" "period" 0x00
35 "slash" "slash" 0x00
36 "shiftright" "s...
...And 31 more matches
Error codes returned by Mozilla APIs
ns_error_not_initialized (0xc1f
30001) an attempt was made to use a component or object which has not yet been initialized.
... ns_error_already_initialized (0xc1f
30002) an attempt is made to initialize a component or object again which has already been initialized.
... ns_error_null_pointer (0x8000400
3) an error occurred because a value was set to null when this was not expected.
...And 30 more matches
Hacking Tips
js> function f () { return 1; } js> dis(f); flags: loc op ----- -- main: 00000: one 00001: return 00002: stop source notes: ofs line pc delta desc args ---- ---- ----- ------ -------- ------ 0: 1 0 [ 0] newline 1: 2 0 [ 0] colspan 2
3: 2 2 [ 2] colspan 9 getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script.
... $ 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 (0x7fffef12
31c0 @ 0) #1 (nil) typein:2 (0x7fffef12
31c0 @ 24) #2 (nil) typein:
3 (0x7fffef12
31c0 @ 47) #
3 (nil) typein:2 (0x7fffef12
31c0 @ 24) #4 ...
... (nil) typein:
3 (0x7fffef12
31c0 @ 47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef12
31c0 @ 24) #25158 0x7fffefbbc1c8 typein:
3 (0x7fffef12
31c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef12
31c0 @ 24) #25160 0x7fffefbbc0b8 typein:
3 (0x7fffef12
31c0 @ 47) #25161 0x7fffefbbc0
30 typein:5 (0x7fffef12
3280 @ 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.
...And 30 more matches
Index - Firefox Developer Tools
2
3d view html, tools, web development, web development:tools when you click on the
3d view button, the page goes into
3d view mode; in this mode, you can see your page presented in a
3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
...
3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
... 1
3 inspecting web app manifests application, devtools, firefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel.
...And 30 more matches
Media container formats (file types) - Web media technologies
however, you may also encounter mp
3, ogg, webm, avi, and other formats.
...a good example of this is the mp
3 audio file, which is in fact an mpeg-1 container with a single audio track encoded using mpeg-1 audio layer iii encoding.
... these files use the audio/mp
3 mime type and the .mp
3 extension, even though their containers are just mpeg.
...And 30 more matches
nsINavBookmarksService
erver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long aitemid, in nsiuri anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since gecko 1
3.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 print64array aresult); native code only!
...ywordforuri(in nsiuri auri); obsolete since gecko 40.0 nsitransaction getremovefoldertransaction(in long long aitemid); nsiuri geturiforkeyword(in astring keyword); obsolete since gecko 40.0 void importbookmarkshtml(in nsiuri url); obsolete since gecko 1.9 void importbookmarkshtmltofolder(in nsiuri url, in print64 folder); obsolete since gecko 1.9 print
32 indexoffolder(in print64 parent, in print64 folder); obsolete since gecko 1.9 print
32 indexofitem(in print64 folder, in nsiuri uri); obsolete since gecko 1.9 long long insertbookmark(in long long aparentid, in nsiuri auri, in long aindex, in autf8string atitle); void insertitem(in print64 folder, in nsiuri item, in print
32 index); obsolete since gecko 1.9 lon...
...g long insertseparator(in long long aparentid, in long aindex); boolean isbookmarked(in nsiuri auri); void movefolder(in print64 folder, in print64 newparent, in print
32 index); obsolete since gecko 1.9 void moveitem(in long long aitemid, in long long anewparentid, in long aindex); void removechildat(in long long afolder, in long aindex); obsolete since gecko 2.0 void removefolder(in long long afolder); obsolete since gecko 2.0 void removefolderchildren(in long long aitemid); void removeitem(in long long aitemid); void removeobserver(in nsinavbookmarkobserver observer); void replaceitem(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void runinbatchmode(in nsinavhistory...
...And 29 more matches
Introduction to SSL - Archive of obsolete content
the ssl 2.0 and ssl
3.0 protocols support overlapping sets of cipher suites.
... note: firefox 2 ships with ssl 2.0 support disabled by default, in favor of ssl
3.0.
...to ensure that red hat console can control an ssl-enabled server, the server must enable at least one of the following cipher suites for ssl
3.0: rc4 with 128-bit encryption and md5 message authentication rc4 with 40-bit encryption and md5 message authentication rc2 with 40-bit encryption and md5 message authentication no encryption, md5 message authentication only cipher suites with rsa key exchange table 1 lists the cipher suites supported by ssl that use the rsa key-exchange algorithm.
...And 28 more matches
The "codecs" parameter in common media types - Web media technologies
general syntax a basic mime media type is expressed by stating the type of media (audio, video, etc), then a slash character (/), then the container format used to contain the media: audio/mpeg an audio file using the mpeg file type, such as an mp
3.
... as is the case with any mime type parameter, codecs must be changed to codecs* (note the asterisk character, *) if any of the properties of the codec use special characters which must be percent-encoded per rfc 22
31, section 4: mime parameter value and encoded word extensions.
...the list may also contain codecs not present in the file.= codec options by container the containers below support extended codec options in their codecs parameters:
3gp av1 iso bmff mpeg-4 quicktime webm several of the links above go to the same section; that's because those media types are all based on iso base media file format (iso bmff), so they share the same syntax.
...And 28 more matches
Implementation Status - Archive of obsolete content
3.
... document structure 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 el...
...ement does not trigger exception
337
302;
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.
...And 27 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_hide 0x800
3 0x0002 an object has been destroyed.
... event_reorder 0x8004 0x005c 0x000
3 an object's children have changed.
...And 27 more matches
Border-image generator - CSS: Cascading Style Sheets
this tool can be used to generate css
3 border-image values.
... border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd6
3e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc
357205.png" data-stateid="border
3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd
37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityr...
...ipple.com/samples/fb/c0b285d
3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="
300" data-sensivity...
...And 27 more matches
Experimental features in Firefox
nightly 5
3 yes developer edition 5
3 no beta 5
3 no release 5
3 no preference name dom.dialog_element.enabled global attribute: inputmode our implementation of the inputmode global attribute has been updated as per the whatwg spec (bug 1509527), but we still need to make other changes too, like making it available on contenteditable content.
... see also bug 12051
33 for details.
...for more details on the status of this feature, see bug 16
39607.
...And 26 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
animating
3d graphics is an area of software development that brings together multiple disciplines in computer science, mathematics, art, graphic design, kinematics, anatomy, physiology, physics, and cinematography.
... there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic
3d theory matrix math for the web webgl model view projection geometry and reference spaces in webxr ed.
...thus, instead of referring to an actual camera object, the term camera is used in webgl and webxr programming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in
3d space or not.
...And 26 more matches
Understandable - Accessibility
note: to read the w
3c definitions for understandable and its guidelines and success criteria, see principle
3: understandable — information and the operation of user interface must be understandable.
... guideline
3.1 — readable: make text content readable and understandable this guideline focuses on making text content as understandable as possible.
... success criteria how to conform to the criteria practical resource
3.1.1 language of page (a) the default human language of each web page should be detectable via code.
...And 26 more matches
Box-shadow generator - CSS: Cascading Style Sheets
lass="ui-slider-input" data-topic="top" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> left </div> <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> <div class="ui-slider" data-topic="left" data-min="-
300" data-max="700" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> <div class="ui-slider-input" data-topic="left" data-unit="px"></div> </div> <div id="transform_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> ...
... <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-
360" data-max="
360" data-step="1" data-value="0"> </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> width </div> <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> <div class="ui-slider" data-topic="width" ...
...] 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: 8
3%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width:
32.24%; } .span_
3 { width: 2
3.78%; } .span_2 { width: 15.
32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px;...
...And 26 more matches
Expressions and operators - JavaScript
a binary operator requires two operands, one before the operator and one after the operator: operand1 operator operand2 for example,
3+4 or x*y.
...the following table describes the comparison operators in terms of this sample code: var var1 =
3; var var2 = 4; comparison operators operator description examples returning true equal (==) returns true if the operands are equal.
...
3 == var1 "
3" == var1
3 == '
3' not equal (!=) returns true if the operands are not equal.
...And 26 more matches
Drawing graphics - Learn web development
the web still had no way to effectively create animations, games,
3d scenes, and other requirements commonly handled by lower level languages such as c++ or java.
... the below example shows a simple 2d canvas-based bouncing balls animation that we originally met in our introducing javascript objects module: around 2006–2007, mozilla started work on an experimental
3d canvas implementation.
...webgl allows you to create real
3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex.
...And 25 more matches
nsDependentCString
nsdependentcstring(const char*, pruint
32) - source parameters char* data a pointer to the string.
...pruint
32 length the length of the string.
...nsdependentcstring(const nscstring_internal&, pruint
32) constructs an nsdependentstring from an existing flat string.
...And 25 more matches
Index
3 account examples extensions, thunderbird this article provides examples on accessing and manipulating thunderbird accounts.
... 5 activity manager thunderbird
3, thunderbird the activity manager is a simple component that understands how to display a combination of user activity and history.
... 1
3 autoconfig: how to create a configuration file autoconfiguration, thunderbird authoritative definition 14 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.
...And 25 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
this article was written in 200
3 and is not on par with current standards.
... introduction in an ideal world, we could author html, xml, css and javascript and only worry about the w
3c and ecma standards.
... gecko was designed from the ground up to be compliant with the w
3c html, w
3c css, w
3c xml, w
3c dom, and ecmascript (javascript) standards.
...And 24 more matches
NSS tools : certutil
this is used to migrate legacy nss databases (cert8.db and key
3.db) into the newer sqlite databases (cert9.db and key4.db).
...this formatting follows rfc 111
3.
... certutil supports two types of databases: the legacy security databases (cert8.db, key
3.db, and secmod.db) and new sqlite databases (cert9.db, key4.db, and pkcs11.txt).
...And 24 more matches
nsDependentString
methods constructors void nsdependentstring(const prunichar*, const prunichar*) - source constructors parameters prunichar* start prunichar* end void nsdependentstring(const prunichar*, pruint
32) - source parameters prunichar* data pruint
32 length void nsdependentstring(const prunichar*) - source parameters prunichar* data void nsdependentstring(const nsastring_internal&) - source parameters nsastring_internal& str void nsdependentstring() - source assertvalid void assertvalid() - source verify restrictions rebind void rebind(const prunichar*) - source ...
...parameters prunichar* data void rebind(const prunichar*, pruint
32) - source parameters prunichar* data pruint
32 length void rebind(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source...
... returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...And 24 more matches
WebIDL bindings
otherinstance); [throws] myinterface dosomethingelse(optional long maybenumber); [throws] void dosomethingelse(myinterface otherinstance); void dotheother(any something); void doyetanotherthing(optional boolean actuallydoit = false); static void staticoperation(any arg); }; will require these method declarations: class myclass { void dosomething(int
32_t anumber); double dosomething(myclass* aotherinstance); already_addrefed<myinterface> dosomethingelse(optional<int
32_t> amaybenumber, errorresult& rv); void dosomethingelse(myclass& aotherinstance, errorresult& rv); void dotheother(jscontext* cx, js::value asomething); void doyetanotherthing(bool aactuallydoit); static void statico...
...] interface myinterface { }; will require the following declarations in myclass: class myclass { // various nsisupports stuff or whatnot static already_addrefed<myclass> constructor(const globalobject& aglobal, errorresult& rv); static already_addrefed<myclass> constructor(const globalobject& aglobal, uint
32_t asomenumber, errorresult& rv); }; c++ reflections of webidl types the exact c++ representation for webidl types can depend on the precise way that they're being used (e.g., return values, arguments, and sequence or dictionary members might all have different representations).
...param) nsstring utf8string const nsacstring& nsacstring& (outparam) nscstring double double double double float float float float interface: non-nullable foo& already_addrefed<foo> foo* owningnonnull<foo> interface: nullable foo* already_addrefed<foo> foo* refptr<foo> long int
32_t int
32_t int
32_t long long int64_t int64_t int64_t object js::handle<jsobject*> js::mutablehandle<jsobject*> jsobject* octet uint8_t uint8_t uint8_t sequence const sequence<t>& nstarray<t>& (outparam) short int16_t int16_t int16_t unrestricted double double double double u...
...And 24 more matches
NS_ConvertASCIItoUTF16
methods constructors void ns_convertasciitoutf16(const char*) - source parameters char* acstring void ns_convertasciitoutf16(const char*, pruint
32) - source parameters char* acstring pruint
32 alength void ns_convertasciitoutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - sour...
...c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 23 more matches
NS_ConvertUTF8toUTF16
methods constructors void ns_convertutf8toutf16(const char*) - source parameters char* acstring void ns_convertutf8toutf16(const char*, pruint
32) - source parameters char* acstring pruint
32 alength void ns_convertutf8toutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - sourc...
...c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 23 more matches
nsAutoString
methods constructors void nsautostring() - source constructors void nsautostring(prunichar) - source parameters prunichar c void nsautostring(const prunichar*, pruint
32) - source parameters prunichar* data pruint
32 length void nsautostring(const nsautostring&) - source parameters nsautostring& str void nsautostring(const nsastring_internal&) - source parameters nsastring_internal& str void nsautostring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsautostring& operator=(const nsautostring&) - source ...
...c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 23 more matches
nsCAutoString
methods constructors void nscautostring() - source constructors void nscautostring(char) - source parameters char c void nscautostring(const char*, pruint
32) - source parameters char* data pruint
32 length void nscautostring(const nscautostring&) - source parameters nscautostring& str void nscautostring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nscautostring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator= nscautostring& ope...
...ernal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tell...
...And 23 more matches
nsFixedString
methods constructors void nsfixedstring(prunichar*, pruint
32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already contained in the buffer parameters prunichar* data pruint
32 storagesize void nsfixedstring(prunichar*, pruint
32, pruint
32) - source parameters prunichar* data...
... pruint
32 storagesize pruint
32 length operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 23 more matches
nsString
methods constructors void nsstring() - source constructors void nsstring(prunichar) - source parameters prunichar c void nsstring(const prunichar*, pruint
32) - source parameters prunichar* data pruint
32 length void nsstring(const nsstring&) - source parameters nsstring& str void nsstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple void nsstring(const nsastring_internal&) - source parameters nsastring_internal& readable operator= nsstring& operator=(const nsstring&) - source parameters nsstring&...
...c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 23 more matches
nsXPIDLString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (
3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
... methods constructors void nsxpidlstring() - source void nsxpidlstring(const nsxpidlstring&) - source parameters nsxpidlstring& str operator const prunichar* prunichar* operator const prunichar*() const - source operator[] prunichar operator[](print
32) const - source parameters print
32 i prunichar operator[](pruint
32) const - source parameters pruint
32 i operator= nsxpidlstring& operator=(const nsxpidlstring&) - source parameters nsxpidlstring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal&...
... operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...And 23 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
cker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("images/hue_mask.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, ...
... #00f 66.66%, #f0f 8
3.
33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width:
30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width:
30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: ...
...right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 9
3px; } .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24p...
...And 23 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,147,48
3,647×2,147,48
3,647 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.
... compression lossless licensing free and open under the creative commons attribution-sharealike license (cc-by-sa) version
3.0 or later.
...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 23 more matches
Choosing the right approach - Learn web development
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsettimeoutchrome full support
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 callback...
... browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetintervalchrome full support
30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on windoworworkerglobalscope mixin.ie full support 4opera ...
...And 22 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, 1
3, 14, 15, 16, 17, 18, 19, 20, 21, 22, 2
3, 24, 25, 26, 27, 28, 29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39, 40, 41, 42, 4
3, 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), semiti...
...c (hebrew), romanic (italian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2,
3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1
3, 14, 15, 16, 17, 18, 19, 20, 21, 22, 2
3, 24, 25, 26, 27, 28, 29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39, 40, 41, 42, 4
3, 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, 1
3, 14, 15, 16, 17, 18, 19, 20, 21, 22, 2
3, 24, 25, 26, 27, 28, 29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39, 40, 41, 42, 4
3, 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, 1
31, 141, 151, 161, 171, 181, 191, 201, 2...
...21, 2
31, 241, 251, 261, 271, 281, 291, … everything else: 2,
3, 4, 5, 6, 7, 8, 9, 11, 12, 1
3, 14, 15, 16, 17, 18, 19, 22, 2
3, 24, 25, 26, 27, 28, 29,
32,
33,
34,
35,
36,
37,
38,
39, 42, 4
3, 44, 45, 46, 47, 48, 49, 52, 5
3, … 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 1
3-19:
3, 4, 5, 6, 7, 8, 9, 10, 1
3, 14, 15, 16, 17, 18, 19 everything else: 0, 20, 21, 22, 2
3, 24, 25, 26, 27, 28, 29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39, 40, 41, 42, 4
3, 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, 1
3, 14, 15, 16, 17, 18, 19, 101, 102, 10
3, 104, 105, 106, 107, 108, 109, 110, 111, 112, 11
3, 114, 115, 116,...
...And 22 more matches
NSS Tools certutil
using the certificate database tool the certificate database tool is a command-line utility that can create and modify the netscape communicator cert8.db and key
3.db database files.
... it can also list, generate, modify, or delete certificates within the cert8.db file and create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key
3.db file.
... starting from nss
3.
35, the database format was upgraded to support sqlite as described in this document.
...And 22 more matches
nsAdoptingString
methods constructors void nsadoptingstring() - source void nsadoptingstring(prunichar*, pruint
32) - source parameters prunichar* str pruint
32 length void nsadoptingstring(const nsadoptingstring&) - source parameters nsadoptingstring& str operator= nsadoptingstring& operator=(const nsadoptingstring&) - source parameters nsadoptingstring& str nsxpidlstring& operator=(const nsxpidlstring&) - source parameters nsxpidlstring& str nsstring& operator=(const nsstring&) -...
...const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator const prunichar* prunichar* operator const prunichar*() const - source operator[] prunichar operator[](print
32) const - source parameters print
32 i prunichar operator[](pruint
32) const - source parameters pruint
32 i get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...And 22 more matches
nsPromiseFlatString
c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const nsaflatstring&, print
32, print
32) const - source parameters nsaflatstring& astring print
32 aoffset print
32 acount print
32 find(const prunichar*, print
32, print
32) const - source parameters prunichar* astring print
32 aoffset print
32 ac...
...ount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
...And 22 more matches
nsXPIDLCString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (
3) getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
... methods constructors void nsxpidlcstring() - source void nsxpidlcstring(const nsxpidlcstring&) - source parameters nsxpidlcstring& str operator const char* char* operator const char*() const - source operator[] char operator[](print
32) const - source parameters print
32 i char operator[](pruint
32) const - source parameters pruint
32 i operator= nsxpidlcstring& operator=(const nsxpidlcstring&) - source parameters nsxpidlcstring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operat...
...or=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...And 22 more matches
Accessibility documentation index - Accessibility
it supplements html so that interactions and widgets commonly used in applications can be passed to assistive technologies
3 aria screen reader implementors guide aria, accessibility this is just a guide.
... 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.
3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
...here's where to file bugs: 1
3 using aria: roles, states, and properties aria, accessibility, overview, reference aria defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role.
...And 22 more matches
<color> - CSS: Cascading Style Sheets
although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until svg 1.0 and css colors level
3 that they were formally defined.
...f0000 purple #800080 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa500 css color module level
3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 ...
... chocolate #d2691e coral #ff7f50 cornflowerblue #6495ed cornsilk #fff8dc crimson #dc14
3c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006400 darkgrey #a9a9a9 darkkhaki #bdb76b darkmagenta #8b008b darkolivegreen #556b2f darkorange #ff8c00 darkorchid #99
32cc darkred #8b0000 darksalmon #e9967a darkseagreen #8fbc8f darkslateblue #48
3d8b darkslategray #2f4f4f darkslategr...
...And 22 more matches
Indexed collections - JavaScript
let arr = array(9.
3) // rangeerror: invalid array length if your code needs to create arrays with single elements of an arbitrary data type, it is safer to use array literals.
... let wisenarray = array.of(9.
3) // wisenarray contains only one element 9.
3 referring to array elements because elements are also properties, you can access the using property accessors.
... let arr = ['one', 'two', 'three'] arr[2] // three arr['length'] //
3 populating an array you can populate an array by assigning values to its elements.
...And 22 more matches
Tamarin build documentation - Archive of obsolete content
windows
32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux
32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
... cross-platform build (general instructions - non-android) prerequisites: you need python 2.5 or later and gnu make
3.81 or later.
... (gnu make
3.80 does not work.
...And 21 more matches
NS_ConvertUTF16toUTF8
methods constructors void ns_convertutf16toutf8(const prunichar*) - source a helper class that converts a utf-16 string to utf-8 parameters prunichar* astring void ns_convertutf16toutf8(const prunichar*, pruint
32) - source parameters prunichar* astring pruint
32 alength void ns_convertutf16toutf8(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - so...
...s char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...And 21 more matches
NS_LossyConvertUTF16toASCII
methods constructors void ns_lossyconvertutf16toascii(const prunichar*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters prunichar* astring void ns_lossyconvertutf16toascii(const prunichar*, pruint
32) - source parameters prunichar* astring pruint
32 alength void ns_lossyconvertutf16toascii(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char...
...s char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...And 21 more matches
nsACString (External)
ozilla.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,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="7
31,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,112
3,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)...
..." shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,
342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="2
32,294,475,
342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,
342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="80
3,294,925,
342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat operator[] f...
...methods beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 21 more matches
nsAdoptingCString
methods constructors void nsadoptingcstring() - source void nsadoptingcstring(char*, pruint
32) - source parameters char* str pruint
32 length void nsadoptingcstring(const nsadoptingcstring&) - source parameters nsadoptingcstring& str operator= nsadoptingcstring& operator=(const nsadoptingcstring&) - source parameters nsadoptingcstring& str nsxpidlcstring& operator=(const nsxpidlcstring&) - source parameters nsxpidlcstring& str nscstring& operator=(const nscstri...
...ing_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator const char* char* operator const char*() const - source operator[] char operator[](print
32) const - source parameters print
32 i char operator[](pruint
32) const - source parameters pruint
32 i get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...And 21 more matches
nsCString
methods constructors void nscstring() - source constructors void nscstring(char) - source parameters char c void nscstring(const char*, pruint
32) - source parameters char* data pruint
32 length void nscstring(const nscstring&) - source parameters nscstring& str void nscstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple void nscstring(const nsacstring_internal&) - source parameters nsacstring_internal& readable operator= nscstring& operator=(const nscstring&) - source parameters nsc...
...s char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...And 21 more matches
nsCStringContainer (External)
endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const char*, print
32 (*) compare(const nsacstring&, print
32 (*) equals(const char*, print
32 (*) equals(const nsacstring&, print
32 (*) operator< operator<= operator== operator>= operator> operator!= equalsliteral find(const nsacstring&, print
32 (*) find(const nsacstring&, pruint
32, print
32 (*) find(con...
...st char*, print
32 (*) find(const char*, pruint
32, print
32 (*) rfind(const nsacstring&, print
32 (*) rfind(const nsacstring&, print
32, print
32 (*) rfind(const char*, print
32 (*) rfind(const char*, print
32, print
32 (*) findchar rfindchar appendint tointeger base classes nsacstring data members no public members.
... methods beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 21 more matches
nsDependentSubstring external
iting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const prunichar*, print
32 (*) compare(const nsastring&, print
32 (*) equals(const prunichar*, print
32 (*) equals(const nsastring&, print
32 (*) operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find(const nsastring&, print
32 (*) find(const nsastring&, pruint...
...
32, print
32 (*) find rfind(const nsastring&, print
32 (*) rfind(const nsastring&, print
32, print
32 (*) rfind findchar rfindchar appendint tointeger base classes nsstringcontainer data members no public members.
... methods constructors void nsdependentsubstring_external() - source void nsdependentsubstring_external(const prunichar*, pruint
32) - source parameters prunichar astart pruint
32 alength void nsdependentsubstring_external(const nsastring&, pruint
32) - source parameters nsastring astr pruint
32 astartpos void nsdependentsubstring_external(const nsastring&, pruint
32, pruint
32) - source parameters nsastring astr pruint
32 astartpos pruint
32 alength rebind void rebind(const prunichar*, pruint
32) - source parameters prunichar astart pruint
32 alength beginreading pruint
32 beginread...
...And 21 more matches
nsFixedCString
methods constructors void nsfixedcstring(char*, pruint
32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already contained in the buffer parameters char* data pruint
32 storagesize void nsfixedcstring(char*, pruint
32, pruint
32) - source parameters char* data pruint
32 stor...
...agesize pruint
32 length operator= nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...And 21 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.
... when speaking of color contrast, w
3c formulas are actually incorporating luminance, not just the colors ("hues") themselves.
... for example, the color "crimson red" may be described in hex values as #990000 by some and #dc14
3c by others.
...And 21 more matches
Color picker tool - CSS: Cascading Style Sheets
height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, #00f 66.66%, #f0f 8
3.
33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0
33.
33%, #0ff 50%, ...
... #00f 66.66%, #f0f 8
3.
33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width:
30px; text-align: center; font-size: 14px; line-height: 18px; float: lef...
...t; } .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; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 9
3px; } .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-c...
...And 21 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:2
3, 4 december 2006 terminology we need a terminology appendix.
...--maian 01:4
3,
30 september 2005 (pdt) we should define the terms we are using.
...--maian 2
3:4
3, 21 september 2005 (pdt) i think we need a new section in the reference that specifies the differences between versions, collecting this information into a single location rather than leaving it scattered haphazardly throughout the reference as it currently is.
...And 20 more matches
certutil
this is used to merge legacy nss databases (cert8.db and key
3.db) into the newer sqlite databases (cert9.db and key4.db).
...this is used to migrate legacy nss databases (cert8.db and key
3.db) into the newer sqlite databases (cert9.db and key4.db).
...this formatting follows rfc 111
3.
...And 20 more matches
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="96
3,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="9
39,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,91
3,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="9
3...
...7,198,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,
342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,
342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,7
33,
342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,
342" href...
...methods beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
...And 20 more matches
nsDependentCSubstring external
methods constructors void nsdependentcsubstring_external() - source void nsdependentcsubstring_external(const char*, pruint
32) - source parameters char* astart pruint
32 alength void nsdependentcsubstring_external(const nsacstring&, pruint
32) - source parameters nsacstring& astr pruint
32 astartpos void nsdependentcsubstring_external(const nsacstring&, pruint
32, pruint
32) - source parameters nsacstring& astr pruint
32 as...
...tartpos pruint
32 alength rebind void rebind(const char*, pruint
32) - source parameters char* astart pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 20 more matches
nsPromiseFlatCString
s char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple get char* get() const - source returns the null-terminated string find print
32 find(const nscstring&, prbool, print
32, print
32) const - source search for the given substring within this string.
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 find(const char*, prbool, print
32, print
32) const - source parameters char* astring prbool aignorecase print
32 aoffset print
32 acount rfind print
32 rfind(const nscstring&, prbool, print
32, print
32) const - source this methods scans the string backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do case...
...@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print
32 aoffset print
32 acount print
32 rfind(const char*, prbool, print
32, print
32) const - source parameters char* acstring prbool aignorecase print
32 aoffset print
32 acount rfindchar print
32 rfindchar(prunichar, print
32, print
32) const - source parameters prunichar achar print
32 aoffset print
32 acount findcharinset print
32 findcharinset(const char*, print
32) const - source this method searches this string for the first character found in the given string.
...And 20 more matches
IDBObjectStore - Web APIs
", "day", { 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: 24, month: 'december', year: 201
3, 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 = functio...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
... full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitaddchrome full support 24 full support 24 no support 2
3 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 20 more matches
WebGL model view projection - Web APIs
it explains the three core matrices that are typically used when composing a
3d scene: the model, view and projection matrices.
...these matrices can be composed together and grouped in special ways to make them useful for rendering complicated
3d scenes.
... the first matrix discussed below is the model matrix, which defines how you take your original model data and move it around in
3d world space.
...And 20 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
a basic example as a very simple example we can take a grid with
3 column tracks and
3 row tracks.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); grid-template-rows: repeat(
3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box
3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(
3, 1fr); grid-template-rows: repeat(
3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box
3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-co...
...And 20 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] 00
33-08-04t0
3:40
3:40 am on august 4,
33 [details] 1977-04-01t14:00:
30
30 seconds after 2:00 pm on april 1, 1977 [details] 1901-01-01t00:00z midnight utc on january 1, 1901 [details] 1901-01-01t00:00:01-04:00 1 second past midnight eastern standard time (est) on january 1, 1901 [details] basics before looking at the various formats of date an...
... a year is normally
365 days long, except during leap years.
...although the calendar year is normally
365 days long, it actually takes the planet earth approximately
365.2422 days to complete a single orbit around the sun.
...And 20 more matches
Index - HTTP
3 accept-charset content negotiation, http, http header, reference, request header the accept-charset request http header advertises which character set the client is able to understand.
... 1
3 access-control-request-headers cors, http, reference, header the access-control-request-headers request header is used when issuing a preflight request to let the server know which http headers will be used when the actual request is made.
... 2
3 content-encoding http, headers, reference the content-encoding entity header is used to compress the media-type.
...And 20 more matches
Proxy Auto-Configuration (PAC) file - HTTP
in chrome (versions 52 to 7
3), you can disable this by setting pachttpsurlstrippingenabled to false in policy or by launching with the --unsafe-pac-url command-line flag (in chrome 74, only the flag works, and from 75 onward, there is no way to disable path-stripping; as of chrome 81, path-stripping does not apply to http urls, but there is interest in changing this behavior to match https); in firefox, the preference is net...
... the browser will automatically retry a previously unresponsive proxy after
30 minutes.
... additional attempts will continue beginning at one hour, always adding
30 minutes to the elapsed time between attempts.
...And 20 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
several months later, microsoft released jscript with internet explorer
3.
...the standard received a significant update as ecmascript edition
3 in 1999, and it has stayed pretty much stable ever since.
...see this example: console.log(
3 / 2); // 1.5, not 1 console.log(math.floor(
3 / 2)); // 1 so an apparent integer is in fact implicitly a float.
...And 20 more matches
Transport Layer Security - Web security
it was updated to ssl
3.0 not long after, and as its usage expanded, it became clear that a common, standard encryption technology needed to be specified to ensure interoperability among all web browsers and servers.
...the current version of tls is 1.
3 (rfc 8446).
...tls-encrypted web traffic is by convention exchanged on port 44
3 by default, while unencrypted http uses port 80 by default.
...And 20 more matches
Creating localizable web applications
snippet
3.
...good: <a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download"> <span><?= _("get personas for firefox - free");?></span><span class="arrow"></span> </a> snippet
3.
...bad: <p class="added"><strong><?= _("added:") ?></strong><?= $persona['date']; ?></p> snippet
3.
...And 19 more matches
Mozilla MathML Status
an overview of the mathml
3 elements/attributes - excluding deprecated ones - and the current status of the native support.
... references to mathml
3 are given.
...see bug 5
34962.
...And 19 more matches
Cryptography functions
function name/documentation source code nss versions pk11_algtagtomechanism mxr
3.2 and later pk11_authenticate mxr
3.2 and later pk11_blockdata mxr
3.2 and later pk11_changepw mxr
3.2 and later pk11_checkuserpassword mxr
3.2 and later pk11_cipherop mxr
3.2 and later pk11_clonecontext mxr
3.2 and later ...
... pk11_configurepkcs11 mxr
3.2 and later pk11_convertsessionprivkeytotokenprivkey mxr
3.6 and later pk11_convertsessionsymkeytotokensymkey mxr
3.6 and later pk11_copytokenprivkeytosessionprivkey mxr
3.11 and later pk11_createcontextbysymkey mxr
3.2 and later pk11_createdigestcontext mxr
3.2 and later pk11_creategenericobject mxr
3.12 and later 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.2 and later pk11_destroygenericobject mxr
3.9.2 and later pk11_destroygenericobjects mxr
3.9.2 and later pk11_destroymergelog mxr
3.12 and later pk11_destroyobject mxr
3.2 and later pk11_destroytokenobject mxr
3.2 and later pk11_diges...
...And 19 more matches
NS ConvertASCIItoUTF16 external
methods constructors void ns_convertasciitoutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertasciitoutf16_external(const char*, pruint
32) - source parameters char* adata pruint
32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastr...
...ing& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
NS ConvertUTF16toUTF8 external
methods constructors void ns_convertutf16toutf8_external(const nsastring&) - source parameters nsastring& astr void ns_convertutf16toutf8_external(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters n...
...sacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
NS ConvertUTF8toUTF16 external
methods constructors void ns_convertutf8toutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertutf8toutf16_external(const char*, pruint
32) - source parameters char* adata pruint
32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastr...
...ing& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
NS LossyConvertUTF16toASCII external
methods constructors void ns_lossyconvertutf16toascii_external(const nsastring&) - source parameters nsastring& astr void ns_lossyconvertutf16toascii_external(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters n...
...sacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsCString external
methods constructors void nscstring_external() - source void nscstring_external(const nscstring_external&) - source parameters nscstring_external& astring void nscstring_external(const nsacstring&) - source parameters nsacstring& areadable void nscstring_external(const char*, pruint
32) - source parameters char* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacst...
...ring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsDependentCString external
methods constructors void nsdependentcstring_external() - source void nsdependentcstring_external(const char*, pruint
32) - source parameters char* adata pruint
32 alength rebind void rebind(const char*, pruint
32) - source parameters char* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source paramete...
...tring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsDependentString external
methods constructors void nsdependentstring_external() - source void nsdependentstring_external(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength rebind void rebind(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - sourc...
...ing nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsLiteralCString (External)
methods rebind void rebind(const char*, pruint
32) - source parameters char* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacst...
...ring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsLiteralString (External)
methods rebind void rebind(const char*, pruint
32) - source parameters char* adata pruint
32 alength get char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacst...
...ring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 19 more matches
nsStringContainer (External)
methods beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...pass pr_uint
32_max to leave the length unchanged.
...And 19 more matches
nsString external
methods constructors void nsstring_external() - source void nsstring_external(const nsstring_external&) - source parameters nsstring_external& astring void nsstring_external(const nsastring&) - source parameters nsastring& areadable void nsstring_external(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters n...
...sastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...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_scrollbar
3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.
... role_tooltip 1
3 represents a tooltip that provides helpful hints.
...And 19 more matches
JavaScript Daemons Management - Archive of obsolete content
|*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version
3 or later.
... |*| http://www.gnu.org/licenses/gpl-
3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (arguments.length < 2) { throw new typeerror("daemon - not enough arguments"); } if (oowner) { this.owner = oowner }; this.task = ftask; if (isfinite(nrate) && nrate > 0) { this.rate = math.floor(nrate); } if (nlen > 0) { this.length = math.floor(nlen); } if (fonstart) { this.onstart = fonstart; } if (finit) { this.onstop = finit; finit.call(oowner, this.index, this.length, this.backw); } } /* create the daemon.b...
...2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version
3 or later.
...And 18 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
mydomain new in thunderbird
3 requires seamonkey 2.0 the user's email domain is suggested.
... gloda new in thunderbird
3 addrbook new in thunderbird
3 requires seamonkey 2.0 the user's address book is searched.
... autofill new in thunderbird
3 requires seamonkey 2.0 type: boolean if set to true, the best match will be filled into the textbox as the user types.
...And 18 more matches
Bounding volume collision detection with THREE.js - Game development
it is assumed that before reading this you have read our
3d collision detection introductory article first, and have basic knowledge about three.js.
... using box
3 and sphere three.js has objects that represent mathematical volumes and shapes — for
3d aabb and bounding spheres we can use the box
3 and sphere objects.
... instantiating boxes to create a box
3 instance, we need to provide the lower and upper boundaries of the box.
...And 18 more matches
64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both
32-bit and 64-bit jit backends.
...the following types or typedefs are always 64-bit on 64-bit platforms, and
32-bit on
32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed
30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are
32-bit on
32-bit platforms.
... for all intents and purposes they are also
32-bit on 64-bit platforms: intn, uintn jsintn, jsuintn, jsbool general problems with pointers when performing bitwise operations on pointer values, make sure that both operands are 64-bit.
...And 18 more matches
PromiseFlatCString (External)
tring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...pass pr_uint
32_max to leave the length unchanged.
...And 18 more matches
PromiseFlatString (External)
ing nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...pass pr_uint
32_max to leave the length unchanged.
...And 18 more matches
nsAutoString (External)
ing nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint
32) - source parameters prunichar* adata pruint
32 alength beginreading pruint
32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
... parameters prunichar** begin prunichar** end prunichar* beginreading() const - source endreading prunichar* endreading() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 apos operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 apos first prunichar first() const - source beginwriting pruint
32 beginwriting(prunichar**, prunichar**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...pass pr_uint
32_max to leave the length unchanged.
...And 18 more matches
nsCAutoString (External)
tring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint
32) - source parameters char* adata pruint
32 alength beginreading pruint
32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters char** begin char** end char* beginreading() const - source endreading char* endreading() const - source charat char charat(pruint
32) const - source parameters pruint
32 apos operator[] char operator[](pruint
32) const - source parameters pruint
32 apos first char first() const - source beginwriting pruint
32 beginwriting(char**, char**, pruint
32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...pass pr_uint
32_max to leave the length unchanged.
...And 18 more matches
Rich-Text Editing in Mozilla - Developer guides
mozilla 1.
3 introduces an implementation of microsoft® internet explorer's designmode feature.
... the rich-text editing support in mozilla 1.
3 supports the designmode feature which turns html documents into rich-text editors.
... starting in firefox
3, mozilla also supports internet explorer's contenteditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment).
...And 18 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01t08:
30"> one thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted yyyy-mm-ddthh:mm.
... when the above value submitted to the server, for example, it will look like partydate=2017-06-01t08:
30.
...partydate=2017-06-01t08%
3a
30.
...And 18 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).
...you can find an updated specification in rfc 72
31.
... 10
3 early hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a response.
...And 18 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/sec010
30
3 http://dbaron.org/css/test/sec0
302 http://dbaron.org/css/test/sec0
302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitle...
...ss http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040
310 http://dbaron.org/css/test/parsing
3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/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/pseudos
3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec05110
3 http://dbaron.org/css/test/sec05110
3b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec06040
3b http://dbaron.org/css/test/specific htt...
...ttp://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/shortborder2 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/sec09020
3 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090
301 http://dbaron.org/css/test/sec090
302a http://dbaron.org/css/test/sec090
302b http://dbaron.org/css/test/sec090
302c http://dbaron.org/css/test/sec090
302d http://dbaron.org/css/test/sec0905 http://dbaron.org/css/test/sec414 http://dbaron.org/css/test/floatpos http://dbaron.org/css/test/floa...
...And 17 more matches
Gecko Compatibility Handbook - Archive of obsolete content
gecko is an embeddable browser, developed as part of the mozilla open source project and based on w
3 standards rather than the proprietary approaches of the past.
...these browsers were developed before the relevant w
3c recommendations for html, css, and the dom existed.
... internet explorer 4 and netscape navigator 4 share support for a large part of the html
3.2 standard and basic javascript.
...And 17 more matches
Video and audio content - Learn web development
a really simple example looks like this: <video src="rabbit
320.webm" controls> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit
320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed.
...formats like mp
3, mp4 and webm are called container formats.
...And 17 more matches
Basic math in JavaScript — numbers and operators - Learn web development
floating point numbers (floats) have decimal points and decimal places, for example 12.5, and 56.778654
3.
...type the following lines into your browser's console: let lotsofdecimal = 1.766584958675746
364; 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.
... for example, try typing these lines into your console: let mynumber = '74'; mynumber +
3; you end up with the result 74
3, not 77, because mynumber is actually defined as a string.
...And 17 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".
... in nsivariant avalue, in long aflags, in unsigned short aexpiration); void setpageannotationstring(in nsiuri auri, in autf8string aname, in astring avalue, in long aflags, in unsigned short aexpiration); boolean setitemannotationstring(in long long aitemid, in autf8string aname, in astring avalue, in long aflags, in unsigned short aexpiration); void setpageannotationint
32(in nsiuri auri, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void setitemannotationint
32(in long long aitemid, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); void setpageannotationint64(in nsiuri auri, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); ...
...aflags, in unsigned short aexpiration); nsivariant getpageannotation(in nsiuri auri, in autf8string aname); nsivariant getitemannotation(in long long aitemid, in autf8string aname); astring getpageannotationstring(in nsiuri auri, in autf8string aname); astring getitemannotationstring(in long long aitemid, in autf8string aname); long getpageannotationint
32(in nsiuri auri, in autf8string aname); long getitemannotationint
32(in long long aitemid, in autf8string aname); long long getpageannotationint64(in nsiuri auri, in autf8string aname); long long getitemannotationint64(in long long aitemid, in autf8string aname); double getpageannotationdouble(in nsiuri auri, in autf8string aname); double getitemannotat...
...And 17 more matches
Standard OS Libraries
it's also known as winapi
32 or just winapi.
...i then searched it on msdn and saw that it needed the user
32.dll.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user
32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "x": ctypes.long }, { "y": ctypes.long } ]); /* declare the signature of the function we are going to call */ var getcursorpos = lib.declare('getcursorpos', ctypes.winapi_abi, ctypes.bool, point.ptr ); /* ...
...And 17 more matches
IDBDatabase - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill...
...="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabasechrome full support 24 full support 24 no support 2
3 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 17 more matches
Matrix math for the web - Web APIs
this article explores how to create matrices and how to use them with css transforms and the matrix
3d transform type.
... transformation matrices there are many types of matrices, but the ones we are interested in are the
3d transformation matrices.
...since a
3d point only needs three values (x, y, and z), and the transformation matrix is a 4x4 value matrix, we need to add a fourth dimension to the point.
...And 17 more matches
Index - Developer guides
found 4
3 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.
... 2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together
3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 5 wai aria live regions/api support ajax, accessibility firefox
3 contains important improvements to the way the mozilla engine exposes live changes in a document.
...And 17 more matches
Legacy layout methods - Learn web development
we will create a 12 column grid — a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4,
3, and 2.
... <div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">
3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col span1">1
3</div> <div class="col span6">14</div> <div class="col span
3">15</div> <div class="col span2">16</div> </div> </div> the a...
... add the following at the bottom of your css: /* two column widths (120px) plus one gutter width (20px) */ .col.span2 { width: 140px; } /* three column widths (180px) plus two gutter widths (40px) */ .col.span
3 { width: 220px; } /* and so on...
...And 16 more matches
Localizing with Koala
due to a bug in koala (bug 219
30), it is recommended that you don't choose a path that contains spaces (like c:\documents and settings\user\...).
...version:
3.6.
... note that you don't have to edit the location field, it automatically fills in when you check the "mercurial" checkbox: "c:\mozilla\l10n\application\firefox\
3.6".
...And 16 more matches
Python binding for NSS
mozilla source code management (scm) information on march 21, 201
3 the nss project switched from using cvs as it's source code manager (scm) to mercurial, also known as hg.
... release information release 1.0.1 release date 2017-02-28 scm tag pynss_release_1_0_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_1/src/ change log add tls 1.
3 cipher suites ssl_cipher_info.py now attempts to enable tls 1.
3 fix build issue in setup.py.
...`pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha256 ssl.tls_aes_256_gcm_sha
384 ssl.tls_chacha20_poly1
305_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.
...And 16 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: a4574
3659
38222adca0a6bd
33329cb
32).
...spidermonkey 1.8.7 includes type inference, which boosts the speed of the jägermonkey jit by about
30% over version 1.8.5.
... note that there are a very small number of incompatibilities between es5 and and es
3, the version of ecmascript supported by spidermonkey versions 1.5 through 1.8.
...And 16 more matches
IDBTransaction - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" f...
...ill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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", since trans2 should run after trans1.
...this is used a lot below db = dbopenrequest.result; // add the data to the database adddata(); }; function adddata() { // create a new object to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes:
30, day: 24, month: "december", year: 201
3, notified: "no" } ]; // open a read/write db transaction, ready to add 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.onerro...
...And 16 more matches
Release notes - Archive of obsolete content
firefox
35 highlights added access keys for context menu.
... details github commits made between firefox
34 and firefox
35.
... bugs fixed between firefox
34 and firefox
35.
...And 15 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.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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>{daf44bf7-a45e-4450-979c-91cf074
34c
3d}</em:id> name the name of the add-on; intended for display in the ui.
... note: extensions compatible with firefox
3.5 should specify a maxversion of
3.5.*, so that they are automatically compatible with security and stability updates.
...And 15 more matches
Utility functions
function name/documentation source code nss versions atob_asciitodata mxr deprecated
3.2 use nssbase64_decodebuffer atob_convertasciitoitem mxr deprecated
3.2 use nssbase64_decodebuffer btoa_convertitemtoascii mxr deprecated
3.2 use nssbase64_encodeitem btoa_datatoascii mxr deprecated
3.2 use nssbase64_encodeitem der_asciitotime mxr
3.5 and later der_decod...
...etimechoice 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_utctimetoascii mxr
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 a...
...And 15 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: a4574
3659
38222adca0a6bd
33329cb
32).
... note that there are a very small number of incompatibilities between es5 and and es
3, the version of ecmascript supported by spidermonkey versions 1.5 through 1.8.
...type changes jsval the base data type, jsval, which represents all possible values in javascript, has changed from
32- to 64-bits wide, and the underlying representation has changed from a c integer type to a c struct.
...And 15 more matches
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,55
3,5
3" href="http://developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="
379,101,451,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="475,101,6
35,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,257,245" ...
...href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,
396,245" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,245" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="58
3,197,727,245" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,29
3,25
3,
341" href="http://developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="5,
389,192,4
37" href="http://developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,
389,400,4
37" href=...
..."http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,29
3,405,
341" 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 appendascii...
...And 15 more matches
IDBIndex - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbindexchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
... full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcountchrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
...opera android full support 14safari ios full support 8samsung internet android full support 1.5getchrome full support 24 full support 24 no support 2
3 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 15 more matches
Using XMLHttpRequest - Web APIs
note: starting with gecko
30.0 (firefox
30.0 / thunderbird
30.0 / seamonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
... } else { // unable to compute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("the transfer has been canceled by the user."); } lines
3-6 add event listeners for the various events that are sent while performing a data transfer using xmlhttprequest.
... method: post; encoding type: multipart/form-data: content-type: multipart/form-data; boundary=---------------------------
31491178881
38
39 -----------------------------
31491178881
38
39 content-disposition: form-data; name="foo" bar -----------------------------
31491178881
38
39 content-disposition: form-data; name="baz" the first line.
...And 15 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
practical tips for developers and how mozilla does it contents this document is for developers working to support msaa in an application in order to make it accessible with
3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically.
...[important] get_accstate: a
32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc.
...it is impossible to know if and when the
3rd party assistive technology will use one of these signals to release the objects of yours that is is refcounting.
...And 15 more matches
@font-feature-values - CSS: Cascading Style Sheets
a character-variant feature value definition allows either one or two values: ident1:
3 maps to cv0
3=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@font-feature-valueschrome no support noedge no support nofirefox full support
34 full support
34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... no support noopera no support nosafari full support 9.1webview android no support nochrome android no support nofirefox android full support
34 full support
34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
...And 15 more matches
Using CSS transforms - CSS: Cascading Style Sheets
these transformations include rotation, skewing, scaling, and translation both in the plane and in the
3d space.
... <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/66
33f
3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/66
33f
3efc0.png">
3d specific css properties performing css transformations in
3d space is a bit more complex.
...And 15 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
34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
...ls to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "
32": "./icon-
32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updating panel content you can u...
... 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-64.png: icons for the button in three different sizes "main.js" is saved in your add-on's lib directory, and the other files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-
32.png icon-64.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sdk/self").data; ...
...And 14 more matches
ui/button/toggle - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "
32": "./firefox-
32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox
36.
...you can also add, or change, the listener afterwards: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "
32": "./firefox-
32.png" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } function firstchange(state) { console.log("...
...attaching panels to buttons 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", "64": "./icon-64.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 bu...
...And 14 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
mydomain new in thunderbird
3 requires seamonkey 2.0 the user's email domain is suggested.
... gloda new in thunderbird
3 addrbook new in thunderbird
3 requires seamonkey 2.0 the user's address book is searched.
... completedefaultindex new in thunderbird
3 requires seamonkey 2.0 type: boolean if true, the best match value will be filled into the textbox as the user types.
...And 14 more matches
Examples - Archive of obsolete content
--> <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - < in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i = 0; while (++i > 10) { // ...
... </p> </body> </html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; ...
... </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.w
3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf9
35.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.
...And 14 more matches
Gecko info for Windows accessibility vendors
if you seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.
3.
... (i recommend sdk 1.
3 because the msaa sdk 2.0 doesn't come with the source code to the testing tools.
... dom: document object model this is the w
3c's specification for how web content is exposed to javascript and other languages.
...And 14 more matches
NSS Tools modutil
this tool can also create key
3.db, cert8.db, and secmod.db security database files.
... the tasks associated with security module database management are part of a process that typically also involves managing key databases (key
3.db files) and certificate databases (cert8.db files).
...the options and arguments for the modutil command are defined as follows: options -create create new secmod.db, key
3.db, and cert8.db files.
...And 14 more matches
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,5
3" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,197,289,24...
...5" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="
315,197,4
37,245" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="6
35,197,787,245" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="17
3,29
3,285,
341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,
389,227,4
37" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt="" coords=...
..."251,
389,4
35,4
37" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="
309,29
3,445,
341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii ...
...And 14 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/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/144
3/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0,
300,
300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 15
3, 255, 0...
... new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -
3.5, -
3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0,
300,
300); window.requestanimationframe(draw); } init(); <canvas id="canvas" width="
300" height="
300"></canvas> screenshotlive sample an animated clock this example draws an animated clock, showing your current time...
... for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginpath(); ctx.moveto(117, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.rotate(math.pi /
30); } ctx.restore(); var sec = now.getseconds(); var min = now.getminutes(); var hr = now.gethours(); hr = hr >= 12 ?
...And 14 more matches
WebGL best practices - Web APIs
after too many errors (
32 in firefox), webgl stops generating descriptive messages, which really hinders debugging.
...(window.innerwidth * devicepixelratio) * (window.innerheight * window.devicepixelratio)
3) the per-pixel vram budget is (1) divided by (2), and is a constant.
...the essl
3 spec says this under "error handling": the implementation should report errors as early a possible but in any case must satisfy the following: all lexical, grammatical and semantic errors must have been detected following a call to gllinkprogram errors due to mismatch between the vertex and fragment shader (link errors) must have been detected following a call to gllinkprogram errors due t...
...And 14 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 exampl...
...e 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 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/854
3/br.png'), url('https://mdn.mozillademos.org/files/8545/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/854
3/br.png'), url('https://mdn.mozillademos.org/files/8545/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/854
3/br.png'), url('https://mdn.mozillademos.org/files/8545/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
Audio and Video Delivery - Developer guides
currently, to support all browsers we need to specify two formats, although with the adoption of mp
3 and mp4 formats in firefox and opera, this is changing fast.
... html audio <audio controls preload="auto"> <source src="audiofile.mp
3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp
3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp
3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
... <audio controls> <source src="audiofile.mp
3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <a href="audiofile.mp
3">download audio</a> <object width="
320" height="
30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&isvideo=false&file=au...
...And 14 more matches
Redirections in HTTP - HTTP
redirect responses have status codes that start with
3, and a location header holding the url to redirect to.
... code text method handling typical use case
301 moved permanently get methods unchanged.
...
308 permanent redirect method and body not changed.
...And 14 more matches
Elements - Archive of obsolete content
helloworld.html: <!doctype html public "-//w
3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding: url(hello.xml#default); } #p0
3 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p0
3">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html...
...="http://www.w
3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
...see bug 8
38
30 for more information and for workarounds.
...And 13 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="0
3/14/05" flex="1"/> <label value="0
3/15/05" flex="1"/> <label value="0
3/15/05" flex="1"/> <label value="0
3/16/05" flex="1"/> <label value="0
3/16/05" flex="1"...
.../> <label value="0
3/16/05" flex="1"/> <label value="0
3/16/05" flex="1"/> </column> <column flex="1"> <description value="expense"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet.
... <code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding:
3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...And 13 more matches
LiveConnect Overview - Archive of obsolete content
alert(java.lang.integer.max_value); //alerts 214748
3647 the packages object if a java class is not part of the java, sun, or netscape packages, you access it with the packages object.
...there are cases where liveconnect will fail to load a class, and you will need to manually load it like this: var widgetry = java.lang.thread.currentthread().getcontextclassloader().loadclass("org.mywidgets.widgetry"); in javascript 1.
3 and earlier, javaclass objects are not automatically converted to instances of java.lang.class when you pass them as parameters to java methods—you must create a wrapper around an instance of java.lang.class.
...// 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.
...And 13 more matches
Building up a basic demo with Babylon.js - Game development
babylon.js is one of the most popular
3d game engines used by developers.
... as with any other
3d library it provides built-in functions to help you implement common
3d functionality more quickly.
...if you have already worked through our building up a basic demo series with three.js, playcanvas or a-frame (or you are familiar with other
3d libraries) you'll notice that babylon.js works on similar concepts: camera, light and objects.
...And 13 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,2
32,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box
3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,2
32,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box
3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,2
32,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="box
3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div> ...
...And 13 more matches
JSClass
syntax struct jsclass { const char *name; uint
32_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 1
3...
... */ jscheckaccessop checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since spidermonkey 1
3 */ jstraceop trace; /* added in spidermonkey 17 */ jsclassinternal reserved1; /* obsolete since spidermonkey 1
3 */ void *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const char * class name flags uint
32_t class flags.
... use null or js_propertystub (spidermonkey
31 or older) for default behavior.
...And 13 more matches
nsDependentSubstring
methods constructors void nsdependentsubstring(const nsastring_internal&, pruint
32, pruint
32) - source parameters nsastring_internal& str pruint
32 startpos pruint
32 length void nsdependentsubstring(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end void nsdependentsubstring(const nsreadingiterator<short unsigned int>&, const nsreadingiterator<short unsigned int>&) - source parameters nsreadingiterator<short unsigned int>& sta...
...rt nsreadingiterator<short unsigned int>& end void nsdependentsubstring() - source rebind void rebind(const nsastring_internal&, pruint
32, pruint
32) - source parameters nsastring_internal& <anonymous> pruint
32 startpos pruint
32 length void rebind(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterator<short unsigned int>&) const - source deprecated reading iterators parameters nsreadingiterator<short unsigned int>& iter prunichar*& beginreading(const prunichar*&) const - source parameters prunichar*& iter endreading prunichar* endreading() const - source nsreadingiterator...
...ce parameters prunichar*& iter endwriting prunichar* endwriting() - source nswritingiterator<short unsigned int>& endwriting(nswritingiterator<short unsigned int>&) - source parameters nswritingiterator<short unsigned int>& iter prunichar*& endwriting(prunichar*&) - source parameters prunichar*& iter data prunichar* data() const - source accessors length pruint
32 length() const - source isempty prbool isempty() const - source isvoid prbool isvoid() const - source isterminated prbool isterminated() const - source charat prunichar charat(pruint
32) const - source parameters pruint
32 i operator[] prunichar operator[](pruint
32) const - source parameters pruint
32 i first prunichar first() const - source last...
...And 13 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!
... nsistackframe createstackframelocation(in pruint
32 alanguage, in string afilename, in string afunctionname, in print
32 alinenumber, in nsistackframe acaller); void debugdump(in short depth); void debugdumpevalinjsstackframe(in pruint
32 aframenumber, in string asourcetext); void debugdumpjsstack(in prbool showargs, in prbool showlocals, in prbool showthisprops); void debugdumpobject(in nsisupports acomobj, in short depth); [noscript,notxpcom] prbool definedomquickstubs(in jscontextptr cx, in jsobjectptr proto, in pruint
32 flags, in pruint
32 interfacecount, [array, siz...
...p equality); nsixpconnectjsobjectholder holdobject(in jscontextptr ajscontext, in jsobjectptr aobject); void initclasses(in jscontextptr ajscontext, in jsobjectptr aglobaljsobj); nsixpconnectjsobjectholder initclasseswithnewwrappedglobal(in jscontextptr ajscontext, in nsisupports acomobj, in nsiidref aiid, in nsiprincipal aprincipal, in nsisupports aextraptr, in pruint
32 aflags); nsivariant jstovariant(in jscontextptr ctx, in jsval value); nsivariant jsvaltovariant(in jscontextptr cx, in jsvalptr ajsval); void movewrappers(in jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); [noscript,notxpcom] void notejscontext(in jscontextptr ajscontext, in nscctraversalcallbackref acb); void release...
...And 13 more matches
Web Console remoting - Firefox Developer Tools
in firefox 25 we added the getpreferences request packet: { "to": "conn0.console
34", "type": "getpreferences", "preferences": [ "networkmonitor.saverequestandresponsebodies" ] } reply packet: { "preferences": { "networkmonitor.saverequestandresponsebodies": false }, "from": "conn0.console
34" } you can also use the webconsoleclient.getpreferences(prefs, onresponse).
... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "201
3-08-26t19:50:0
3.699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method.
... the pageerror packet is: { "from": "conn0.console9", "type": "pageerror", "pageerror": { "errormessage": "referenceerror: foo is not defined", "sourcename": "http://localhost/~mihai/mozilla/test.js", "linetext": "", "linenumber": 6, "columnnumber": 0, "category": "content javascript", "timestamp": 1
347294508210, "error": false, "warning": false, "exception": true, "strict": false, "private": false, } } the packet is similar to nsiscripterror - for simplicity.
...And 13 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
example
3 - common webvtt example with a header and cues webvtt - this file has cues.
... 16 00:01:21.058 --> 00:01:2
3.868 - [ bats screeching ] - they won't get in your hair.
...
3 00:02:25.000 --> 00:02:
30.000 - ta en kopp styling webvtt cues you can style webvtt cues by looking for elements which match the ::cue pseudo-element.
...And 13 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
this will help to solidify your understanding of how the geometry of
3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work together.
... while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a
3d headset is a single screen, divided in half.
... dependencies while we will not rely upon any
3d graphics frameworks such as three.js or the like for this example, we do use the glmatrix library for matrix math, which we've used in other examples in the past.
...And 13 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
me: </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: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align:...
... let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode
3 = null; let constantnode = null; let gainnode1 = null; let gainnode2 = null; let gainnode
3 = null; let playing = false; these variables are: context the audiocontext in which all the audio nodes live.
... oscnode1, oscnode2, and oscnode
3 the three oscillatornodes used to generate the chord.
...And 13 more matches
Web accessibility for seizures and physical reactions - Accessibility
according to the w
3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than
3 times per second, is large enough, and bright enough.
... section 508 prohibits flickering effects with a frequency greater than
3 hz (flickers per second) and lower than 55 hz.
... button { animation: vibrate 0.
3s linear infinite both; } @media (prefers-reduced-motion: reduce) { button { animation: none; } } prefers-color-scheme this can be useful if the ambient light api is not available.
...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
Numbers and dates - JavaScript
numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee 754 (i.e., a number between ±2−1022 and ±2+102
3, or about ±10−
308 to ±10+
308, with a numeric precision of 5
3 bits).
... integer values up to ±25
3 − 1 can be represented exactly.
... decimal numbers 12
34567890 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.
...And 13 more matches
Index - XPath
3 ancestor axe, xpath no summary!
... 1
3 preceding axe, xpath the preceding axis indicates all the nodes that precede the context node in the document except any ancestor, attribute and namespace nodes.
... 2
3 count xslt, xslt_reference the count function counts the number of nodes in a node-set and returns an integer.
...And 13 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
3 index index, reference, xslt found 54 pages: 4 pi parameters xslt no summary!
... 1
3 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a key design feature of xml.
... 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-programme.../dp/076454
3814 16 resources extensions, needscontent, needsexample, needslivesample, xml, xsl no summary!
...And 13 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1
3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version format was used: major.minor.release.build[+] where only digits were allowed.
... firefox
3 note in applications based on gecko 1.9 you can also use a targetapplication entry with an id toolkit@mozilla.org and minversion and maxversion that match the toolkit version of the running application.
... <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
...And 12 more matches
LIR - Archive of obsolete content
3 parami integer
32 bit load an int parameter (register or stack location).
...ack space (result is an address) 6 reti void return an int 7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void source filename for debug symbols 1
3 line void source line number for debug symbols 14 comment void a comment shown, on its own line, in lir dumps 15 not in use load 16 not in use 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 zer...
...o-extend to an unsigned int 20 ldus2ui integer load unsigned short and zero-extend to an unsigned int 21 ldi integer load int 22 ldq quad 64 bit load quad 2
3 ldd double load double 24 ldf2d double load float and extend to a double store 25 sti2c void store int truncated to char 26 sti2s void store int truncated to short 27 sti void store int 28 stq void 64 bit store quad 29 std void store double
30 std2f void store double as a float (losing precision)
31 not in use call
32 not in use
33 callv void call subroutine that returns void
34 calli integer call subroutine that returns ...
...And 12 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
the object element: w
3c 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-44455
3540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="
366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "...
...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="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href= "http://www.macromedia.com/downloads/">here.</a></p> </object> in the above example, application/x-shockwave-flash is the flash mime type, and will invo...
...And 12 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 equat...
..., ain , x1 are on the same baseline, other alignments are possible): i-th row [ a11 a12 a1
3 ...
... : ai1 ai2 ai
3 ...
...And 12 more matches
DMD
(linux only) you can send signal
34 to the firefox process, e.g.
... $ killall -
34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
...note that on mac this step can take
30+ seconds.
...And 12 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_ce...
...rtchainfromcert mxr
3.2 and later cert_certlistfromcert mxr
3.2 and later cert_certtimesvalid mxr
3.2 and later cert_changecerttrust mxr
3.2 and later cert_checkcertvalidtimes mxr
3.2 and later cert_checknamespace mxr
3.12 and later cert_checkcertusage mxr
3.
3 and later cert_comparename mxr
3.2 and later cert_comparevaliditytimes mxr
3.11 and later cert_completecrldecodeentries mxr
3.6 and later cert_convertanddecodecertificate mxr
3.9.
3 and later cert_copyname mxr
3.4 and later cert_copyrdn mxr
3.5 and later cert_createava mxr
3.2.1 and later cert_createcertificate mxr
3.5 and ...
...later cert_createcertificaterequest mxr
3.2 and later cert_createname mxr
3.2.1 and later cert_createocspcertid mxr
3.6 and later cert_createocsprequest mxr
3.6 and later cert_createrdn mxr
3.2.1 and later cert_createsubjectcertlist mxr
3.4 and later cert_createvalidity mxr
3.5 and later cert_crlcacherefreshissuer mxr
3.7 and later cert_decodealtnameextension mxr
3.10 and later cert_decodeauthinfoaccessextension mxr
3.10 and later cert_decodeauthkeyid mxr
3.10 and later cert_decodeavavalue mxr
3.4 and later cert_decodebasicconstraintvalue mxr
3.2 and later cert_decodecertfrompackage mxr ...
...And 12 more matches
A Web PKI x509 certificate primer
in this document we will be referring to the current standard in use for web pki: x509 v
3, which is described in detail in rfc 5280.
...generate csr using this command: openssl req -new -key key.pem -days 1096 -extensions v
3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for
3 years.
...
3.
...And 12 more matches
nsDependentCSubstring
methods constructors void nsdependentcsubstring(const nsacstring_internal&, pruint
32, pruint
32) - source parameters nsacstring_internal& str pruint
32 startpos pruint
32 length void nsdependentcsubstring(const char*, const char*) - source parameters char* start char* end void nsdependentcsubstring(const nsreadingiterator<char>&, const nsreadingiterator<char>&) - source parameters nsreadingiterator<char>& start nsreadingiterator<char>& end void nsdependentcsubstri...
...ng() - source rebind void rebind(const nsacstring_internal&, pruint
32, pruint
32) - source parameters nsacstring_internal& <anonymous> pruint
32 startpos pruint
32 length void rebind(const char*, const char*) - source parameters char* start char* end beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - source deprecated reading iterators parameters nsreadingiterator<char>& iter char*& beginreading(const char*&) const - source parameters char*& iter endreading char* endreading() const - source nsreadingiterator<char>& endreading(nsreadingiterator<char>&) const - source parameters nsreadingiterator<char>& iter char*& endreading(const char*&) const - source p...
...ers nswritingiterator<char>& iter char*& beginwriting(char*&) - source parameters char*& iter endwriting char* endwriting() - source nswritingiterator<char>& endwriting(nswritingiterator<char>&) - source parameters nswritingiterator<char>& iter char*& endwriting(char*&) - source parameters char*& iter data char* data() const - source accessors length pruint
32 length() const - source isempty prbool isempty() const - source isvoid prbool isvoid() const - source isterminated prbool isterminated() const - source charat char charat(pruint
32) const - source parameters pruint
32 i operator[] char operator[](pruint
32) const - source parameters pruint
32 i first char first() const - source last char last() ...
...And 12 more matches
Working with data
example: creating an array let arraytype = ctypes.arraytype(ctypes.int
32_t); let myarray = new arraytype(5); at this point, myarray.length is 5; there are 5 entries in the array.
... // lets create an array of long's var my = ctypes.long.array()([1, 2,
3, 4]); my.tostring(); // this outputs to browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("
3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this outputs `int64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctyp...
...es.int.array(my.length).ptr).contents; mycasted.tostring(); // this outputs to browser console: `"ctypes.int.array(4)([1, 2,
3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of casting, and explanation on why this is the right way to cast an array (explained by matching constructor's) see here: githubgist :: _ff-addon-tutorial-jsctypes_castingarrays data and pointers a cdata object represents a c value in memory.
...And 12 more matches
UInt64
this may be specified as an integer (if the value can be represented as a
32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
...you can therefore use a string to represent a 64-bit value that is too large to represent as a
32-bit javascript number.
... hi() returns the high
32 bits of the specified value.
...And 12 more matches
DOMMatrixReadOnly - Web APIs
the dommatrixreadonly interface represents a read-only 4×4 matrix, suitable for 2d and
3d operations.
...a 4×4 matrix is suitable to describe any rotation and translation in
3d.
...if false, the matrix is
3d.
...And 12 more matches
Fundamentals of WebXR - Web APIs
this includes both managing the process of rendering the views needed to simulate the
3d experience and the ability to sense the movement of the headset or other motion sensing apparatus to provide the needed data to let you update the imagery shown to the user based on that movement.
... webxr is not a rendering technology, and provides no features for actually managing
3d data or rendering it to the display.
... a human eye is typically able to take in a fov of around 1
35°.
...And 12 more matches
Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a
3d game.
... basics of spatialization in web audio, complex
3d spatializations are created using the pannernode, which in layman's terms is basically a whole lotta cool maths to make audio appear in
3d space.
...in
3d spaces, it's the only way to achieve realistic audio.
...And 12 more matches
Perceivable - Accessibility
note: to read the w
3c definitions for perceivable and its guidelines and success criteria, see principle 1: perceivable - information and user interface components must be presentable to users in ways they can perceive.
... 1.2.
3 provide text transcript or audio description for web-based video (a) you should provide text transcripts or audio descriptions for video presented on the web (e.g., html5 video.
... guideline 1.
3 — create content that can be presented in different ways this guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.
...And 12 more matches
<transform-function> - CSS: Cascading Style Sheets
transformation functions can rotate, resize, distort, or move an element in 2d or
3d space.
...each function applies a geometric operation in either 2d or
3d.
... matrix
3d() describes a
3d transformation as a 4×4 homogeneous matrix.
...And 12 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp
3" 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.mp
3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp
3.
...(currently, browsers that support mp
3 also support mp4 audio).
...the two formats that will give maximum coverage are mp
3 and ogg vorbis.
...And 12 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
ipt> 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 1240
357) 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 interface...
...point implementation status unknown members of svgstylable and svglangspace available in svgelement implementation status unknown svggraphicselement instead of svglocatable and svgtransformable implementation status unknown svggeometryelement with svggeometryelement.ispointinfill() and svggeometryelement.ispointinstroke() methods partially implemented (bug 12
39100).
... the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 1
325
319).
...And 12 more matches
ui/button/action - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "
32": "./firefox-
32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox
36.
...you can also add, or change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "
32": "./firefox-
32.png" }, onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the listener is passed a state object that contains all the button's pro...
... here's an add-on with a button that disables itself when you click it, but only for the currently active window: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "
32": "./firefox-
32.png" }, onclick: disableforthiswindow }); function disableforthiswindow(state) { button.state("window", { disabled: true }); } to fetch the state for a specific window or tab, call state(), passing in the window or tab you are interested in, and it will return the state: var labelforactivetab = button.state("tab").label; to learn more about this, see the api...
...And 11 more matches
MMgc - Archive of obsolete content
class myobject : public mmgc::rcobject { public: myobject() { x = 1; y = 2; z =
3; } ~myobject() { x = y = z = 0; } private: int x; int y; int z; }; gcroot if you have a pointer to a gcobject from an object in unmanaged memory, the unmanaged object must be a subclass of gcroot.
...sample stack trace: xmlclass.cpp:
391 toplevel.cpp:164 toplevel.cpp:507 interpreter.cpp:1098 interpreter.cpp:20 methodenv.cpp:47 allocation traces, deletion traces etc.
...the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% -
3015 kb 514 items, avg 6007b 98.9% - 298
3 kb - 512 items - poolobject.cpp:29 abcparser.cpp:948 … 0.8% - 24 kb - 1 items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 1
3.2% - 1602 kb 15675 items, avg 104b 65.6% - 1051 kb - 14
397 items - stringobject.cpp:46 avmcore.cpp:2
300 … 20.4% -
326 kb - 104
39 items - avmcore.cpp:2
300 abcparser.cpp:1077 … 6.5% ...
...And 11 more matches
XML in Mozilla - Archive of obsolete content
several world wide web consortium (w
3c) recommendations and drafts from the xml family of specifications are supported, as well as other related technologies.
... supported core xml w
3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml documents with scripts via dom, associating stylesheets with xml documents, and namespaces in xml.
...other notes a lot of the document object model (dom, w
3c recommendations and drafts) applies to xml.
...And 11 more matches
Mozilla release FAQ - Archive of obsolete content
the source to mozilla was first released on
31 march 1998.
...be = back end -- the part of mozilla that does all the behind-the-scenes stuff nspr = netscape portable runtime -- an abstraction layer over the local os gtk = a free gui toolkit native to unix qt = another gui toolkit xp = cross platform xpfe = cross-platform frontend based on nglayout m[number] = milestone release [number] (no longer used) i'm wondering how to do xxx with navigator
3.x...
...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 w
3's html 4.0 definition building mozilla i get x error when trying to build mozilla - what's wrong?
...And 11 more matches
Positioning - Learn web development
to try this out, add the following declarations to the .positioned rule in your css: top:
30px; left:
30px; note: the values of these properties can take any units you'd logically expect — pixels, mm, rems, %, etc.
...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/6ff6af6fd4.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?
...so for example, if you specify top:
30px;, a force pushes the top of the box, causing it to move downwards by
30px.
...And 11 more matches
nsINavBookmarkObserver
o 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 print64 folder, in print64 parent, in print
32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print
32 oldindex, in print64 newparent, in print
32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print64 parent, in print
32 index); obsolete since gecko 1...
... acstring aparentguid); void onitemreplaced(in print64 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 print64 parent, in print
32 index); obsolete since gecko 1.9 void onseparatorremoved(in print64 parent, in print
32 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 826409.
... onfolderadded() obsolete since gecko 1.9 (firefox
3) notify this observer that a bookmark folder has been added.
...And 11 more matches
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f
30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() i...
... 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, 204, 0)'; ctx.fillrect(0,
37.5, 150,
37.5); ctx.fillstyle = 'rgb(0, 15
3, 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 * 14, 5 + j *
37.5, 14, 27.5); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample line styles there are several properties which allow us to style lines.
...And 11 more matches
FileSystemEntry - Web APIs
specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w
3c or whatwg specification.
...9prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤
37alternate name full support ≤
37alternate name alternate name uses the non-standard name: entrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: entryfirefox android full suppor...
...t 50opera android no support nosafari ios full support 11.
3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcopyto experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera no support nosafari no support ...
...And 11 more matches
Using IndexedDB - Web APIs
such and such feature will not be available."); } opening a database we start the whole process like this: // let us open our database var request = window.indexeddb.open("mytestdatabase",
3); see that?
... blink/webkit supports the current version of the spec, as shipped in chrome 2
3+ and opera 17+; ie10+ does too.
...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 the sake of convenience and move...
...And 11 more matches
Permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissionschrome full support 4
3edge full support 79firefox full support 46ie no support noopera full support yessafari no support nowebview android full support ...
...4
3chrome android full support 4
3firefox 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 9.0geolocation permissionchrome full support 4
3edge full support 79firefox ?
...And 11 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const saltbytes = [89,11
3,1
35,2
34,168,204,21,
36,55,9
3,1,1
32,242,242,192,156]; /* the wrapped key itself.
... */ const wrappedkeybytes = [171,22
3,14,
36,201,2
33,2
33,120,164,68,217,192,226,80, 224,
39,199,2
35,2
39,60,212,169,100,2
3,61,54,244,197,160,80,109,2
30,207, 225,57,197,175,71,80,209]; /* convert an array of byte values to an arraybuffer.
... const saltbuffer = bytestoarraybuffer(saltbytes); //
3 derive the key from key material and salt return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an aes secret key from an arraybuffer containing the raw bytes.
...And 11 more matches
Writing WebSocket servers - Web APIs
warning: the server may listen on any port it chooses, but if it chooses any port other than 80 or 44
3, it may have problems with firewalls and/or proxies.
...the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 1
3 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
...you can use this header for security (checking for same origin, automatically allowing or denying, etc.) and send a 40
3 forbidden if you don't like what you see.
...And 11 more matches
Functions and classes available to Web Workers - Web APIs
38 (
38) no support no support no support cache cache api provides the ability to programmatically control cache storage associated with current origin.
... (yes) no support 4
3 ?
...
38 (
38) (yes) (yes) (yes) crypto the crypto interface represents basic cryptography features available in the current context.
...And 11 more matches
Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate css
3 border-radius effects.
...ection"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="
350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="u...
...ox" 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: 8
3%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width:
32.24%; } .span_
3 { width: 2
3.78%; } .span_2 { width: 15.
32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0p...
...And 11 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
for example the grid definition: .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } can also be written as: .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); } repeat notation can be used for a part of the track listing.
... <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-auto-rows: 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } track sizing and minmax when setting up an explicit grid or defining the sizing for automatically cr...
...for example, i may want my rows to never collapse smaller than 100 pixels, but if my content stretches to
300 pixels in height, then i would like the row to stretch to that height.
...And 11 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level
3 which is the same standard flexbox uses for aligning items in its flex container.
...order-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item
3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item
3">item
3</div> <div class="item4">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>.
...border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item
3 { grid-area: c; align-self: end; } .item4 { grid-area: d; align-self: center; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item
3">item
3</div> <div class="item4">item 4</div> </div> items with an intrinsic aspect ratio the specification details that the default behavior in align-self is to stretch, except for items whi...
...And 11 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); } a simple question to ask yourself when deciding between grid or flexbox is: do i only need to control the layout by row or column – use a flexbox do i need to control the layout by row and column – use a grid content out or layout in?
... the alignment properties from the flexbox specification have been added to a new specification called box alignment level
3.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box
3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1 { align-self: stretch; } .box2 { align-self: flex-start; } alignment in css grids this second example uses a grid to create the same layout.
...And 11 more matches
min-width - CSS: Cascading Style Sheets
syntax /* <length> value */ min-width:
3.5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value.
... editor's draft css box sizing module level
3the definition of 'min-width' in that specification.
... 21notes full support 21notes notes chrome uses auto as the initial value for min-width.edge full support 12notes full support 12notes notes edge uses auto as the initial value for min-width.firefox full support
34 full support
34 no support 16 — 22notes notes firefox 18 and later (until the value was removed), used auto as the initial value for min-width.ie no support noopera full support 12.1notes full support ...
...And 11 more matches
outline-color - CSS: Cascading Style Sheets
syntax /* <color> values */ outline-color: #f92525; outline-color: rgb(
30,222,121); outline-color: blue; /* keyword value */ outline-color: invert; /* global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below.
...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.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c 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.
...And 11 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 eas...
... 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 11 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
structure of a sample application the js1
3kpwa web site's structure is quite simple.
...the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js1
3kgames.png index.html js1
3kpwa.webmanifest style.css sw.js the html the html in the file index.html creates the structure of the app.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js1
3kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js1
3kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end
3r"> <meta name="theme-color" content="#b12a
34"> <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="js1
3kpwa.webmanifest"> <script src="data/games.js" defer>...
...And 11 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d911
3241a90b9cd564
3b926795852a2026710d4"};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...
...rn(a)?((a!="array"&&a!="arguments")?[b]:b):[];}var $time=date.now||function(){return +new date;};function $try(){for(var b=0,a=arguments.length;b<a; b++){try{return arguments[b]();}catch(c){}}return null;}function $type(a){if(a==undefined){return false;}if(a.$family){return(a.$family.name=="number"&&!isfinite(a))?false:a.$family.name; }if(a.nodename){switch(a.nodetype){case 1:return"element";case
3:return(/\s/).test(a.nodevalue)?"textnode":"whitespace";}}else{if(typeof a.length=="number"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:...
...);}return this; },erase:function(b){for(var a=this.length;a--;a){if(this[a]===b){this.splice(a,1);}}return this;},empty:function(){this.length=0;return this;},flatten:function(){var d=[]; for(var b=0,a=this.length;b<a;b++){var c=$type(this[b]);if(!c){continue;}d=d.concat((c=="array"||c=="collection"||c=="arguments")?array.flatten(this[b]):this[b]); }return d;},hextorgb:function(b){if(this.length!=
3){return null;}var a=this.map(function(c){if(c.length==1){c+=c;}return c.toint(16);});return(b)?a:"rgb("+a+")"; },rgbtohex:function(d){if(this.length<
3){return null;}if(this.length==4&&this[
3]==0&&!d){return"transparent";}var b=[];for(var a=0;a<
3;a++){var c=(this[a]-0).tostring(16); b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});function.implement({extend:function(a){for(var b in a)...
...And 10 more matches
Mozilla Crypto FAQ - Archive of obsolete content
shortly thereafter the nss developers began work on an open source implementation of the rsa algorithm; that code, together with code previously developed for other cryptographic algorithms, will be included in a new version
3.1 of the nss open source cryptographic and pki library.
...export of source code for open source software is addressed in part 740 (pdf), section 740.1
3(e), "unrestricted encryption source code"; export of binaries is addressed in 740.17.
... version
3.1 of the network security services library will include a complete open source implementation of the cryptographic algorithms needed for mozilla ssl support, including the rsa public key algorithm (now in the public domain).
...And 10 more matches
What is RSS - Archive of obsolete content
in april 2001 userland released a draft for rss 0.9
3.
...like rss 0.9
3, this version of rss was never made "final" and was also only a draft, and never became a replacement for userland's rss 0.92.
...(although some were using rss 0.9
3 and rss 0.94 even though they weren't supposed to.) in september 2002 userland released rss 2.0.
...And 10 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,2
32,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use the ...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,2
32,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,2
32,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout methods.
...And 10 more matches
Client-Server Overview - Learn web development
"200 ok" for success, "404 not found" if the resource cannot be found, "40
3 forbidden" if the user isn't authorised to see the resource, etc).
... the format of http messages is defined in a "web standard" (rfc72
30).
... an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/5
37.
36 (khtml, like gecko) chrome/52.0.274
3.116 safari/5
37.
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=6ynxs2
3n521lu21b1t1
36rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqz...
...And 10 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/b7b8
31ea
3a
354d
3789cefbc
31e2ca495?version=
3.2
3.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.
... <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of
3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' ...
...s="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">create your first component</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">create your first component</span> </button> </div> </div> </li> <!-- todo-
3 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-
3" /> <label for="todo-
3" class="todo-label"> complete the rest of the tutorial </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">...
...And 10 more matches
Mozilla DOM Hacking Guide
the w
3c dom is mainly implemented in idl.
... this is the schema used most of the time when using w
3c dom objects and methods.
...helper classes are detailed in section 1.
3.
...And 10 more matches
Introduction to Network Security Services
for a complete list of public functions exported by these shared libraries in nss
3.2, see nss functions.
... for information on which static libraries in nss
3.1.1 are replaced by each of the above shared libraries in nss
3.2 , see migration from nss
3.1.1.
...so the nss library has the following forms: libnss
3.so - unix shared library libnss
3.sl - hp-ux shared library libnss.a - unix static library nss
3.dll - windows shared library nss
3.lib - windows import library binding to nss
3.dll nss.lib - windows static library nss, ssl, and s/mime have all of the above forms.
...And 10 more matches
JS::PersistentRooted
this article covers features introduced in spidermonkey
31 a copyable, assignable global gc root type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction.
... syntax js::persistentrooted<t> var; // added in spidermonkey
38 js::persistentrooted<t> var(cx); js::persistentrooted<t> var(cx, initial); js::persistentrooted<t> var(rt); js::persistentrooted<t> var(rt, initial); name type description cx jscontext * the context to get the runtime in which to add the root rt jsruntime * the runtime in which to add the root.
...added in spidermonkey
38 void init(jscontext* cx, t initial) void init(jsruntime* rt) void init(jsruntime* rt, t initial) void reset() reset the value to initial value of the type.
...And 10 more matches
nsIPermissionManager
last changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.1
3) inherits from: nsisupports method overview void add(in nsiuri uri, in string type, in pruint
32 permission, [optional] in pruint
32 expiretype, [optional] in print64 expiretime); void addfromprincipal(in nsiprincipal principal, in string type, in pruint
32 permission, [optional] in pruint
32 expiretype, [optional] in print64 expiretime); void remove(in autf8string host, in string type); void removefromprincipal(in nsiprinc...
...ipal principal, in string type); void removepermission(in nsipermission perm); void removeallsince(in int64_t since); void removeall(); pruint
32 testexactpermission(in nsiuri uri, in string type); pruint
32 testexactpermissionfromprincipal(in nsiprincipal principal, in string type); pruint
32 testpermission(in nsiuri uri, in string type); pruint
32 testpermissionfromprincipal(in nsiprincipal principal, in string type); attributes attribute type description enumerator nsisimpleenumerator enumerates all stored permissions.
... prompt_action
3 prompt user if the permission is allowed.
...And 10 more matches
Int64
this may be specified as an integer (if the value can be represented as a
32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
...you can therefore use a string to represent a 64-bit value that is too large to represent as a
32-bit javascript number.
... hi() returns the high
32 bits of the specified value.
...And 10 more matches
ctypes
int
32_t signed
32-bit integer.
... uint
32_t unsigned
32-bit integer.
... float
32_t
32-bit floating-point value.
...And 10 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
must be 1, 2,
3, or 4.
...possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-
32768,
32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 655
35] gl.float:
32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float.
... description let's assume we want to render some
3d geometry, and for that we will need to supply our vertices to the vertex shader.
...And 10 more matches
Using CSS animations - CSS: Cascading Style Sheets
p { animation-duration:
3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width:
300%; } to { margin-left: 0%; width: 100%; } } in this example the style for the <p> element specifies that the animation should take
3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for...
...here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be
300% (or three times the width of the containing element).
...that’s as simple as adding this keyframe: 75% { font-size:
300%; margin-left: 25%; width: 150%; } the full code now looks like this: p { animation-duration:
3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width:
300%; } 75% { font-size:
300%; margin-left: 25%; width: 150%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at each other for some ...
...And 10 more matches
background-color - CSS: Cascading Style Sheets
11ffee00; /* fully transparent */ background-color: #1fe0; /* fully transparent shorthand */ background-color: #11ffeeff; /* fully opaque */ background-color: #1fef; /* fully opaque shorthand */ /* rgb value */ background-color: rgb(255, 255, 128); /* fully opaque */ background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */ /* hsl value */ background-color: hsl(50,
33%, 25%); /* fully opaque */ background-color: hsla(50,
33%, 25%, 0.75); /* 75% transparent */ /* special keyword values */ background-color: currentcolor; background-color: transparent; /* global values */ background-color: inherit; background-color: initial; background-color: unset; the background-color property is specified as a single <color> value.
...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.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements.
...And 10 more matches
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level
3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value stri...
... accessibility support for css generated content – tink explanation of wcag, guideline 1.
3 – mdn understanding success criterion 1.
3.1 | w
3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal.
...[ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
...And 10 more matches
position - CSS: Cascading Style Sheets
this effectively inhibits any "sticky" behavior (see the github issue on w
3c csswg).
...if a positioned ancestor doesn't exist, it is positioned relative to the icb (initial containing block — see also the w
3c definition), which is the containing block of the document's root element.
...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/6ff6af6fd4.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 the element's containing block is the initial containing block established by the viewport, unless...
...And 10 more matches
Making content editable - Developer guides
note: in firefox 6
3 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-browser compatibility.
....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="h
3">title
3 <h
3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h6">subtitle <h6></option> <option value="p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading...
..." selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="
3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">g...
...And 10 more matches
Grammar and types - JavaScript
for example, let y = 1
3.
...for example: var n = null; console.log(n *
32); // will log 0 to the console variable scope when you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document.
... /** * example 1 */ console.log(x === undefined); // true var x =
3; /** * example 2 */ // will return a value of undefined var myvar = 'my value'; (function() { console.log(myvar); // undefined var myvar = 'local value'; })(); the above examples will be interpreted the same as: /** * example 1 */ var x; console.log(x === undefined); // true x =
3; /** * example 2 */ var myvar = 'my value'; (function() { var myvar; console.log(myvar); // unde...
...And 10 more matches
MathML documentation index - MathML
3 examples beginner, example, guide, mathml, needsbeginnerupdate below you'll find some examples you can look at to help you to understand how to use mathml to display increasingly complex mathematical concepts in web content.
... 1
3 <merror> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <merror> element is used to display contents as error messages.
...use the following syntax: <mover> base overscript </mover> 2
3 <mpadded> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mpadded> element is used to add extra padding and to set the general adjustment of position and size of enclosed contents.
...And 10 more matches
Progressive web app structure - Progressive web apps (PWAs)
we will start with analyzing the js1
3kpwa application, why it is built that way, and what benefits it brings.
... structure of our example application the js1
3kpwa website structure is quite simple: it consists of a single html file (index.html) with basic css styling (style.css), and a few images, scripts, and fonts.
... the folder structure looks like this: the html from the html point of view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js1
3kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js1
3kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end
3r"> <meta name="theme-color" content="#b12a
34"> <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="js1
3kpwa.webmanifest"> <script src="data/games.js"...
...And 10 more matches
Paths - SVG: Scalable Vector Graphics
for example: <svg width="200" height="200" xmlns="http://www.w
3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines.
... <svg width="100" height="100" xmlns="http://www.w
3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a little bit by using the "close path" command, called with z.
... <svg width="190" height="160" xmlns="http://www.w
3.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 1
30 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="...
...And 10 more matches
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-
300 -
300 600 600" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="
33%"/> <stop id="fade-stop-2" offset="95%"/> </radia...
...class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(
36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segmen...
...ass="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(216)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(2
34)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(252)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g cl...
...And 10 more matches
Introduction to using XPath in JavaScript - XPath
mozilla implements a fair amount of the dom
3 xpath, which means that xpath expressions can be run against both html and xml documents.
...there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w
3.org/1999/xhtml').
... to match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w
3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic xpath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
...And 10 more matches
WebAssembly
and what's even better is that it is being developed as a web standard via the w
3c webassembly working group and community group with active participation from all major browser vendors.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox 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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support 69edge no support nofirefox full support ...
...And 10 more matches
Archived Mozilla and build documentation - Archive of obsolete content
autodial for windows nt this document is intended to explain how the autodial helper feature implemented for bug 9
3002 works and why it works that way.
... download manager improvements in firefox
3 firefox
3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more.
... migrate apps from internet explorer to mozilla when netscape started the mozilla browser, it made the conscious decision to support w
3c standards.
...And 9 more matches
Building up a basic demo with A-Frame - Game development
mozilla's a-frame framework provides a markup language allowing us to build
3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of javascript or glsl.
... high level overview the current version of a-frame is 0.
3.2, which means it's highly experimental, but it already works and you can test it right away in the browser.
...the end result is
3d web experiences, which are vr-enabled by default.
...And 9 more matches
Chrome registration
firefox
3, thunderbird
3, and seamonkey 2 support mixed case.
... bug resolved in mozilla 1.9; see bug 1
3218
3.
...see bug
32
3455.
...And 9 more matches
Debugging Table Reflow
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 e...
...n max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b9
31
38 1=00b9
31f0 2=024dd728
3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=
3 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** ***end table dump*** the en stands for entrance (ex for leaving a routine).
... 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=00b9
31
38 1=00b9
31f0 2=024dd728
3=024dd780 this is followed by the information which width has been set for each column.
...And 9 more matches
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+
3 pixman stdc++ gcc clang python
3 released eol fedora 16
3.1 2.14 2.
30 2.24
3.2 0.22 4.6 4.6 2.9 n/a nov 2011 feb 201
3 fedora 17
3.
3 2.15 2.
32 2.24
3.4 0.24 4.7 4.7
3.0 n/a may 2012 jul 201
3 fedora 18
3.6 2.16 2.
34 2.24
3.6 0.26 4.7 4.7
3.1 n/a jan 201
3 jan 2014 fedora 19
3.9 2.17 2.
36 2.24
3.8 0.
30 4.8.1 4.8
3.
3 n/a jul 201
3 jan 2015 fedora 20
3.11 2.18 2.
38 2.24 ...
...
3.10 0.
30 4.8.2 4.8
3.
3 n/a dec 201
3 jun 2015 fedora 21
3.17 2.20 2.42 2.24
3.14 0.
32 4.9 4.9
3.4 n/a dec 2014 dec 2015 fedora 22 4.0 2.21 2.44 2.24
3.16 0.
32 5.1 4.9, 5.1
3.5 n/a may 2015 jul 2016 fedora 2
3 4.2 2.22 2.46 2.24
3.18 0.
33 5.1 5.1
3.7 n/a nov 2015 dec 2016 fedora 24 4.5 2.2
3 2.48 2.24
3.20 0.
34 6.1 6.1
3.8 n/a jun 2016 aug 2017 fedora 25 4.8 2.24 2.50 2.24
3.22.2 0.
34 6.2 6.2
3.8 n/a nov 2016 dec 2017 fedora 26 4.11 2.25 2.52 2.24
3.22.16 0.
34 7.1 7.1 4.0 n/a jul 2017 jun 2018 fed...
...ora 27 4.1
3 2.26 2.54 2.24
3.22.24 0.
34 7.2 7.2 4.0 n/a nov 2017 dec 2018 fedora 28 4.16 2.27 2.56 2.24
3.22.
30 0.
34 8.0.1 8.0.1 6.0 n/a may 2018 may 2019 fedora 29 4.18 2.28 2.58 2.24
3.24.1 0.
34 8.2.1 8.2.1 7.0
3.7 oct 2018 nov 2019 fedora
30 5.0 2.29 2.60 2.24
3.24.8 0.
34 9.0.1 9.0.1 8.0
3.7 apr 2019 ?
...And 9 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
introduction netscape 7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 200
3.
...in march of 200
3, three important rfc's were approved by ietf.
...rfc's
3490,
3491,
3492.) 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.
...And 9 more matches
Index
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.
... 1
3 initial setup localization as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal computer).
...the localizable data fields of an extension are: 2
3 localizing with koala this tutorial will guide you through making a couple of changes to firefox's user interface using koala, an add-on for komodo edit created to help localizing mozilla.
...And 9 more matches
nss tech note6
nss .chk files for the fips 140 mode nss technical note: 6 in nss
3.8, we added checksum files required for the nss softoken to operate in fips 140 mode.
... the new checksum file is called libsoftokn
3.chk on unix/linux and softokn
3.chk on windows.
...the libsoftokn
3.chk/softokn
3.chk file contains a checksum for the softoken.
...And 9 more matches
NSS tools : modutil
please contribute to the initial review in mozilla nss bug 8
36477[1] description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module information both within secmod.db files and within hardware tokens.
... modutil supports two types of databases: the legacy security databases (cert8.db, key
3.db, and secmod.db) and new sqlite databases (cert9.db, key4.db, and pkcs11.txt).
... modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this installation jar file was signed by: ---------------------------------------------- **subject name** c=us, st=california, l=mountain view, cn=cryptorific inc., ou=digital id class
3 - netscape object signing, ou="www.verisign.com/repository/cps incorp.
...And 9 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, 0x4a2b, 0x4
301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb
3, 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(nsisupports *as...
...the xpidl for iweblock appears below: iweblock #include "nsisupports.idl" interface nsisimpleenumerator; [scriptable, uuid(ea54eee4-9548-4b6
3-b94d-c519ffc91d09)] interface iweblock : nsisupports { void lock(); void unlock(); // assume strings are utf-8 void addsite(in string url); void removesite(in string url); attribute nsisimpleenumerator sites; }; the first line includes the file nsisupports.idl, which defines the nsisupports interface from which all xpcom interfaces must derive, and makes it possible for the iwebloc...
... [scriptable, uuid(ea54eee4-9548-4b6
3-b94d-c519ffc91d09)] the rest of the line provides a uuid for this interface.
...And 9 more matches
nsIPromptService
void alertcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); print
32 confirmex(in nsidomwindow aparent,in wstring adialogtitle,in wstring atext, in unsigned long abuttonflags,in wstring abutton0title, in wstring abutton1title,in wstring abutton2title,in wstring acheckmsg, inout boolean acheckstate); boolean prompt(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring avalue, in wstring acheckmsg, inout boolean acheckstate); ...
...itle, in wstring atext, inout wstring ausername, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean promptpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean select(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint
32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to form the abuttonflags parameter passed to confirmex.
... button_pos_2 655
36 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt.
...And 9 more matches
nsISelectionPrivate
inherits from: nsisupports last changed in gecko
35 (firefox
35 / thunderbird
35 / seamonkey 2.
32) warning: the content of this article may be out of date.
... method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print
32 inoffset, in nspointref apoint); native code only!
... void getrangesforinterval(in nsidomnode beginnode, in print
32 beginoffset, in nsidomnode endnode, in print
32 endoffset, in prbool allowadjacent, out pruint
32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void getrangesforintervalarray(in nsinode beginnode, in print
32 beginoffset, in nsinode endnode, in print
32 endoffset, in boolean allowadjacent, in rangearray results); native code only!
...And 9 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!
... nsresult getasarray(out pruint16 type, out nsiid iid, out pruint
32 count, out voidptr ptr); violates the xpcom interface guidelines astring getasastring(); native code only!
... print
32 getasint
32(); native code only!
...And 9 more matches
nsIWebBrowserPersist
inherits from: nsicancelable last changed in gecko
36.0 (firefox
36.0 / thunderbird
36.0 / seamonkey 2.
33) implemented by: @mozilla.org/embedding/browser/nswebbrowser;1 and @mozilla.org/embedding/browser/nswebbrowserpersist;1.
... persist_flags_replace_existing_files
32 replace existing files on the disk (use with due diligence!) persist_flags_no_base_tag_modifications 64 don't modify or add base tags.
... persist_flags_autodetect_apply_conversion 16
384 let the webbrowserpersist decide whether the incoming data is encoded and whether it needs to go through a content converter, for example to decompress it.
...And 9 more matches
Type conversion
target type source type ctypes.int16_t ctypes.int8_t ctypes.uint8_t ctypes.short ctypes.uint16_t ctypes.uint8_t ctypes.unsigned_short ctypes.short ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.unsigned_short ctypes.uint8_t ctypes.uint16_t ctypes.int
32_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int ctypes.uint
32_t ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.unsigned_int ctypes.int ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint...
...16_t ctypes.short ctypes.unsigned_short ctypes.int
32_t ctypes.unsigned_int ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint
32_t ctypes.int64_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int
32_t ctypes.uint
32_t ctypes.int ctypes.unsigned_int ctypes.long_long ctypes.uint64_t ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint
32_t ctypes.unsigned_int ctypes.unsigned_long_long ctypes.long_long ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint1...
...6_t ctypes.short ctypes.unsigned_short ctypes.int
32_t ctypes.uint
32_t ctypes.int ctypes.unsigned_int ctypes.int64_t ctypes.unsigned_long_long ctypes.uint8_t ctypes.uint16_t ctypes.unsigned_short ctypes.uint
32_t ctypes.unsigned_int ctypes.uint64_t ctypes.float
32_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.float64_t ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.uint16_t ctypes.short ctypes.unsigned_short ctypes.int
32_t ctypes.uint
32_t ctypes.int ctypes.unsigned_in...
...And 9 more matches
Migrating from Firebug - Firefox Developer Tools
this may be changed in bug 12697
30.
...the devtools do not have a side panel like the command editor (which is requested in bug 11
33849), 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 + f4.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247
392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a preview tab.
...And 9 more matches
Using the CSS Painting API - Web APIs
the
3rd example has width: 50%; set on the block level element, making the element narrower and therefore the background image narrower.
...code to do this looks like so: registerpaint('headerhighlight', class { static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context size is the paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height /
3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size.
... css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header-highlight.js'); .fancy { background-image: paint(headerhighlight); } .half { width: 50%; } <h1 class="fancy">largest header</h1> <h6 class="fancy">smallest header</h6> <h
3 class="fancy half">50% width header</h
3> while you can't play with the worklet's script, you can alter the element's font-size and width to change the size of the background image.
...And 9 more matches
IDBKeyRange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
...era android full support 14safari ios full support 8samsung internet android full support yesboundchrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
... opera full support
39safari full support 10.1webview android full support 52chrome android full support 52firefox android full support yesopera android full support 41safari ios f...
...And 9 more matches
URLUtilsReadOnly - Web APIs
ebviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonlychrome no support noedge no support nofirefox full support 57 full support 57 no support
3.5 — 57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1
38668
3).ie no support noopera no support nosafari no support nowebview android no support no...
...chrome 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 1
38668
3).opera android no support nosafari ios no support nosamsung internet android no support nohash experimentalchrome no support noedge no support nofirefox full support ...
...
38 full support
38 no support
3.5 —
38notes notes before firefox
38, firefox returned the hash percent encoded.
...And 9 more matches
Writing a WebSocket server in C# - Web APIs
note that this will block until the first
3 bytes of a message are available.
... using system.text; using system.text.regularexpressions; while(client.available <
3) { // wait for enough bytes to be available } byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); //translate bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a little bit difficult to understand.
... if we send "mdn", we get these bytes: 129 1
31 61 84
35 6 112 16 109 let's take a look at what these bytes mean.
...And 9 more matches
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering
3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
... the webxr device api implements the core of the webxr feature set, managing the selection of output devices, render the
3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.
... webxr-compatible devices include fully-immersive
3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
...And 9 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: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...6707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); grid-gap: 10px; grid-auto-rows: 100px; } you can use minmax() in your value for grid-auto-rows enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
... </div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } you can also pass in a track listing, this will repeat.
...And 9 more matches
background-size - CSS: Cascading Style Sheets
syntax /* keyword values */ background-size: cover; background-size: contain; /* one-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size:
3.2em; background-size: 12px; background-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size:
3em 25%; background-size: auto 6px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, aut...
...in firefox 4
3, as opposed to chrome 52, an explicit background-size causes preserveaspectratio to be ignored.
...rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the css
3 background-size specification and with the css
3 image values gradient specification.
...And 9 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(
34, 12, 64, 0.6); color: rgba(
34, 12, 64, 0.6); color: rgb(
34 12 64 / 0.6); color: rgba(
34 12 64 / 0.
3); color: rgb(
34.0 12 64 / 60%); color: rgba(
34.6 12 64 /
30%); /* <hsl()> values */ color: hsl(
30, 100%, 50%, 0.6); color: hsla(
30, 100%, 50%, 0.6); color: hsl(
30 100% 50% / 0.6); color: hsla(
30 100% 50% / 0.6); color: hsl(
30.0 100% 50% / 60%); color: hsla(
30.2 100% 50% / 60%); /* global values ...
...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.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements.
...And 9 more matches
cross-fade() - CSS: Cascading Style Sheets
if no percentages are declared and three images are included, each image will be
33.
33% opaque.
... the two following are lines (almost) identical: cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be
33.
3333% opaque */ cross-fade( url(red.png)
33.
33%, url(yellow.png)
33.
33%, url(blue.png)
33.
33%); older, implemented syntax cross-fade( <image, <image>, <percentage> ) the specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 formal syntax cross-fade( <cf-mixing-image> , <cf-final-image>?
...And 9 more matches
image() - CSS: Cascading Style Sheets
)where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 9 more matches
max-height - CSS: Cascading Style Sheets
syntax /* <length> value */ max-height:
3.5em; /* <percentage> value */ max-height: 75%; /* keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w
3c 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.
... editor's draft css box sizing module level
3the definition of 'max-height' in that specification.
...And 9 more matches
max-width - CSS: Cascading Style Sheets
syntax /* <length> value */ max-width:
3.5em; /* <percentage> value */ max-width: 75%; /* keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w
3c 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 auto | <length> | <percentage> | min-content | max-conte...
... </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.
...And 9 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by
3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from
3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg
30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than
360 degrees respectively, the conic-gradient will not repeat.
... to create a conic gradient that doe not repeat, make the gradient a full
360 degree rotation, or use the conic-gradient() function instead.
...And 9 more matches
text-shadow - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valuea color plus three absolute lengthsanimation typea shadow list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,
3} && <color>?
... ]where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 9 more matches
<input type="tel"> - HTML: Hypertext Markup Language
when submitted to the server, the above input's data would be represented as, for example, telno=+1212555
3151.
... here, we have an tel input with the placeholder 12
3-4567-8901.
... <input id="telno" name="telno" type="tel" placeholder="12
3-4567-8901"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
...And 9 more matches
Lexical grammar - JavaScript
lways reserved: enum the following are only reserved when they are found in strict mode code: implements interface let package private protected public static the following are only reserved when they are found in module code: await future reserved keywords in older standards the following are reserved as future keywords by older ecmascript specifications (ecmascript 1 till
3).
... decimal 12
34567890 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.
... this won't throw in javascript, see bug 95751
3.
...And 9 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.
... note: media queries are a css
3 feature that allow you to selectively apply css depending on the results of media feature tests — for more on the basics, read media queries.
...this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { 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 9 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w
3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-
3 a
3,
3 0 0 1 2,
3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-
3 a
3,
3 0 0 1 2,
3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effec...
...t of the "bevel" value --> <path d="m1
3,5 a2,2 0,0,0 2,-
3 a
3,
3 0 0 1 2,
3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value with fallback to "miter" if not supported.
... --> <path d="m
3,11 a2,2 0,0,0 2,-
3 a
3,
3 0 0 1 2,
3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported.
...And 9 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
background it has been a long standing goal of the w
3c to make it possible for different types of xml based content to be mixed together in the same xml file.
... <svg xmlns="http://www.w
3.org/2000/svg"> <!-- more tags here --> </svg> the namespace declaration is provided by the xmlns parameter.
... this parameter says that the <svg> element and its child elements belong to whichever xml dialect has the namespace name 'http://www.w
3.org/2000/svg' which is, of course, svg.
...And 9 more matches
Index of archived content - Archive of obsolete content
offering a context menu for form controls overlay 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 a...
...generator dtrace dehydra dehydra frequently asked questions dehydra function reference dehydra object reference installing dehydra using dehydra developing new mozilla features devmo 1.0 launch roadmap download manager improvements in firefox
3 download manager preferences drag and drop drag and drop example drag and drop javascript wrapper drag and drop events editor embedding guide embedding faq embedding mozilla in a java application using javaxpcom error console exception logging in...
... tamarin acceptance test template actionscript performance tests cmdline tests running tamarin acceptance tests running tamarin performance tests tamarin build system documentation tamarin releases tamarin-central rev 70
3:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transformin...
...And 8 more matches
URIs and URLs - Archive of obsolete content
resources are identified by uri "uniform resource identifier" (taken from rfc 2
396): uniform uniformity provides several benefits: it allows different types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uniform semantic interpretation of common syntactic conventions across different types of resource identifiers; it allows introduction of new types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different cont...
...it also might be necessary to implement a new urlparser for a new protocol but that might not be necessary because necko already provides uri implementations that can deal with a number of schemes, by implementing the generic urlparser defined in rfc 2
396.
...another quote from rfc 2
396: a uri is always in an "escaped" form, since escaping or unescaping a completed uri might change its semantics.
...And 8 more matches
Windows Media in Netscape - Archive of obsolete content
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:22d6f
312-b0f6-11d0-94ab-0080c74c7e95 windows media players 7 and 9 have this classid: 6bf52a52-
394a-11d
3-b15
3-00c04f79faa6 windows media player 6.4 and windows media player 7 and up are not backwards compatible in terms of apis (and thus have different classids).
... here is a snippet of code that illustrates the use of classids with geckoactivexobject: function creategeckowmpobject(clid) { var player = null; try { player = new geckoactivexobject(clid); } catch(e) { ; } return player; } // instantiate players wmp7or9 = creategeckowmpobject("{6bf52a52-
394a-11d
3-b15
3-00c04f79faa6}"); if (!wmp7or9) { wmp64 = creategeckowmpobject("{22d6f
312-b0f6-11d0-94ab-0080c74c7e95}"); } .....
...for example if (window.activexobject) { // internet explorer only script } server-side detection using user-agent strings netscape 7.1's user agent string on windows has the general pattern: mozilla/5.0 (windows; u; <em>operating system version</em>; <em>language</em>; rv:1.4) gecko/200
30624 netscape/7.1 (ax<em>[;optional comments]</em>) the "vendor comment" (ax) following the "vendor version" netscape/7.1 is an indicator that the browser supports the windows media player activex control.
...And 8 more matches
Package management basics - Learn web development
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:12
34 ✨ built in 19
3ms.
...for a start, there is now a local web server running at http://localhost:12
34.
... in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '1996-09-1
3 10:00:00'; document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:12
34 and you'll see how long ago it is since the author turned 18.
...And 8 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 67
3955.
...firefox
3.6 and later only.
...does not work in firefox
31 on linux mint 17 nor on firefox 48 on windows 7.
...And 8 more matches
Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta 5 (bug
3596
38, 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 4
3295
3).
...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 4141
30).
...And 8 more matches
about:memory
for example: 585 (100.0%) -- preference-service └──585 (100.0%) -- referent ├──49
3 (84.27%) ── strong └───92 (15.7
3%) -- weak ├──92 (15.7
3%) ── 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 ├───6
3.15 mb (
32.91%) -- window-objects │ ├──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.
37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.
36%) ++ layout │ │ │ ...
...│ ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.4
3 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(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (0
3.
33%) ++ top(chrome://browser/content/browser.xul, id=
3) │ └───
3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (2
3.84%) ++ js-non-window ├───
33.7
3 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.7
3%) ++ heap-overhead ├...
...And 8 more matches
Optimizing Applications For NSPR
windows
3.1 applications always run on a stack provided by windows.
... windows
3.1 does not support 64 bit file offsets.
... the nspr 64 bit file offset apis map to windows
3.1
32 bit file offset apis.
...And 8 more matches
nss tech note5
the rijndael algorithm permits
3 blocksizes (16, 24,
32 bytes), but the aes standard requires the blocksize to be 16 bytes.
... the keysize can vary and these keysizes are permitted: 16, 24,
32 bytes.
...some of the digest algorithm identifiers are (without the sec_oid_ prefix) : md2, md5, sha1, sha256, sha
384, sha512.
...And 8 more matches
Property attributes
some property attributes are defined in the ecmascript standard, in ecma 262-
3 §8.6.1.
...in javascript 1.
3 and higher, as in ecmascript, attempts to set a value on a read-only property are ignored.
...in javascript 1.
3 and higher, as in ecmascript, such attempts are ignored.
...And 8 more matches
Setting up the Gecko SDK
then, from the new dialog, select "win
32 dynamic-link library".
...in the win
32 dynamic-link library dialog that displays (see below), you can choose the default selection "an empty dll project" as the type of dll.
... tools needed gecko 1.9.2 sdk: http://releases.mozilla.org/pub/mozi....win
32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/e...displaylang=en moztools: http://ftp.mozilla.org/pub/mozilla.o...8-moztools.zip the windows platform sdk has the c++ compiler/linker needed, moztools has several tools and libraries needed for this example.
...And 8 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text input events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko
38 inherits from: nsisupports last changed in gecko
38.0 (firefox
38.0 / thunderbird
38.0 / seamonkey 2.
35) the motivation of this interface is to provide better api than nsidomwindowutils to dispatch key events and create, modify, and commit composition in higher level.
...var enterkeyevent = new keyboardevent("", { key: "enter", code: "enter" }); tip.commitcomposition(enterkeyevent); note that specifying keyboard event may not be dispatched during composition due to conforming to the specification of dom level
3 events.
... attr_raw_selected_clause 0x0
3 a clause attribute but this is typically not used.
...And 8 more matches
nsIXPCScriptable
last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool a...
...ontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool setproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool enumerate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool newenumerate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint
32 enum_op, in jsvalptr statep, out jsid idp); prbool newresolve(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint
32 flags, out jsobjectptr objp); prbool convert(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint
32 type, in jsvalptr vp); void finalize(in nsixpconnectwrappednative wrapper, in jscontextptr c...
...x, in jsobjectptr obj); prbool checkaccess(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint
32 mode, in jsvalptr vp); prbool call(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint
32 argc, in jsvalptr argv, in jsvalptr vp); prbool construct(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint
32 argc, in jsvalptr argv, in jsvalptr vp); prbool hasinstance(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval val, out prbool bp); void trace(in nsixpconnectwrappednative wrapper, in jstracerptr trc, in jsobjectptr obj); prbool equality(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval val); j...
...And 8 more matches
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,104,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.
... if the output allocation (typically within wasm heap) is expected to be short-lived, it makes sense to simply allocate s.length *
3 bytes for the output, in which case the first conversion attempt is guaranteed to convert the whole string.
... note that the s.length *
3 is rare because the string would have to be packed with some of the few characters that expant into
3 bytes.
...And 8 more matches
pad - CSS: Cascading Style Sheets
syntax pad:
3 "0"; values <integer> && <symbol> the <integer> specifies a minimum length that all counter representations must reach.
...a common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 0
3 and so on, instead of just 1, 2,
3...
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
...And 8 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the code snippet below, the item is placed 20 pixels from the top, and
30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left:
30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
... .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; 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 grid layouts if we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of w...
...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: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(
3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item
3">item
3</div> <div class="item4">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 di...
...And 8 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
a responsive layout with 1 to
3 fluid columns using grid-template-areas many websites are a variation of this type of layout, with content, sidebars, a header and a footer.
...99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav
3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide.
... @media (min-width: 500px) { .wrapper { grid-template-columns: 1fr
3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking shape in the value of grid-template-areas.
...And 8 more matches
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(
30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied t...
...filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,
3} <color>?
...rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()> = opacity( [ <number-percentage> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <number-percentage> )where <number-percentage> = <number> | <percentage><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
...And 8 more matches
background-image - CSS: Cascading Style Sheets
to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/769
3/catfront.png'); values none is a keyword denoting the absence of images.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements.
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
...And 8 more matches
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(240,
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.
...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> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 8 more matches
border - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f
33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below.
...idth: a lengthborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 8 more matches
box-shadow - CSS: Cascading Style Sheets
one; /* offset-x | offset-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> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 8 more matches
conic-gradient() - CSS: Cascading Style Sheets
conic gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(
360, 100%, 50%), hsl(
315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(1
35, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... to create a conic gradient that repeats so as to fill a
360 degree rotation, use the repeating-conic-gradient() function instead.
...there are
360 degrees, 400 gradians, 2π radians, and 1 turn in a circle.
...And 8 more matches
shape-outside - CSS: Cascading Style Sheets
syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px,
30px
30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.
3 a0.25,0.25,1,1,1,0.5,0.
3 a0.25,0.25,1,1,1,1,0.
3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside prope...
...if the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^
3)).
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
...And 8 more matches
Setting up adaptive streaming media sources - Developer guides
<?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w
3.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="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mimetype="audio/mp4" co...
...ment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="
360"> <baseurl>elephantsdream_h264bpl
30_0100.264.dash</baseurl> </representation> <representation id="
3" bandwidth="175000" width="480" height="
360"> <baseurl>elephantsdream_h264bpl
30_0175.264.dash</baseurl> </representation> <representation id="4" bandwidth="250000" width="480" height="
360"> <baseurl>elephantsdream_h264bpl
30_0250.264.dash</baseurl> ...
... </representation> <representation id="5" bandwidth="500000" width="480" height="
360"> <baseurl>elephantsdream_h264bpl
30_0500.264.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag.
...And 8 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>427
311</td> <td><time datetime="2010-06-0
3">june
3, 2010</time></td> <td>0.00</td> </tr> <tr> <td>edvard galinski</td> <td>5
33175</td> <td><time datetime="2011-01-1
3">january 1
3, 2011</time></td> <td>
37.00</td> </tr> <tr> <td>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-2
3">july 2
3, 2012</time></td> <td>15.00</td> </tr> </table> css...
...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>427
311</td> <td><time datetime="2010-06-0
3">june
3, 2010</time></td> <td>n/a</td> <td>0.00</td> </tr> <tr> <th>edvard galinski</td> <td>5
33175</td> <td><time datetime="2011-0101
3">january 1
3, 2011</time></td> <td><time datetime="2017-04008">april 8, 2017</time></td> <td>
37.00</td> </tr> <tr> <th>hoshi nakamura</td> <td>601942</td> <td><time datetime=...
..."2012-07-2
3">july 2
3, 2012</time></td> <td>n/a</td> <td>15.00</td> </tr> </table> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above.
...And 8 more matches
Array.prototype.reduce() - JavaScript
].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 secon...
...d 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] 1
3 fourth call 1
3 ...
...And 8 more matches
Array.prototype.map() - JavaScript
//
3.
... let len be touint
32(lenvalue).
... 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 8 more matches
Number - JavaScript
number is a primitive wrapper object used to represent and manipulate numbers like
37 or -9.25.
...the largest value a number can hold is about 1.8×10
308.
... a number literal like
37 in javascript code is a floating-point value, not an integer.
...And 8 more matches
WebAssembly - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox 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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0globalchrome full support 69edge no support nofirefox full support ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerrorchrome full support 57edge full support 16firefox full sup...
...And 8 more matches
Operator precedence - JavaScript
console.log(
3 + 10 * 2); // logs 2
3 console.log(
3 + (10 * 2)); // logs 2
3 because parentheses here are superfluous console.log((
3 + 10) * 2); // logs 26 because the parentheses change the order left-associativity (left-to-right) means that it is processed as (a op1 b) op2 c, while right-associativity (right-to-left) means it is interpreted as a op1 (b op2 c).
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("right", 2)); evaluating the left side evaluating the right side
3 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("right",
3)); evaluating the left side evaluating the right side 8 the difference in associativity comes into play when there are multiple operators of the same precedence.
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("middle", 2) / echo("right",
3)); evaluating the left side evaluating the middle side evaluating the right side 1 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("middle",
3) ** echo("right", 2)); evaluating the left side evaluating the middle side eval...
...And 8 more matches
for...of - JavaScript
examples iterating over an array const iterable = [10, 20,
30]; for (const value of iterable) { console.log(value); } // 10 // 20 //
30 you can use let instead of const too, if you reassign the variable inside the block.
... const iterable = [10, 20,
30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 //
31 iterating over a string const iterable = 'boo'; for (const value of iterable) { console.log(value); } // "b" // "o" // "o" iterating over a typedarray const iterable = new uint8array([0x00, 0xff]); for (const value of iterable) { console.log(value); } // 0 // 255 iterating over a map const iterable = new map([['a', 1], ['b', 2], ['c',
3]]); for (const entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c',
3] for (const [key, value] of iterable) { console.log(value); } // 1 // 2 //
3 iterating over a set const iterable = new set([1, 1, 2, 2,
3,
3]); for (const value of iterable) { console.log(value); } // 1 // 2 //
3 iterati...
...ng over the arguments object you can iterate over the arguments object to examine all of the parameters passed into a javascript function: (function() { for (const argument of arguments) { console.log(argument); } })(1, 2,
3); // 1 // 2 //
3 iterating over a dom collection iterating over dom collections like nodelist: the following example adds a read class to paragraphs that are direct descendants of an article: // note: this will only work in platforms that have // implemented nodelist.prototype[symbol.iterator] const articleparagraphs = document.queryselectorall('article > p'); for (const paragraph of articleparagraphs) { paragraph.classlist.add('read'); } closing iterators in for...of loops, abrupt iteration termination can be caused by break, throw or return.
...And 8 more matches
Authoring MathML - MathML
of course, the list is by no means exhaustive and you are invited to check out the w
3c mathml software list where you can find various other tools.
...for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): function hasmathmlsupport() { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='2
3px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 2
3) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit).
... prior to gecko
31.0 (firefox
31.0 / thunderbird
31.0 / seamonkey 2.28), it was a bit tedious to setup math fonts, see the font instructions for mozilla 2.0.
...And 8 more matches
Finding window handles - Archive of obsolete content
.getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user
32 = ctypes.open('user
32.dll'); /* http://msdn.microsoft.com/en-us/library/ms6
335
39%28v=vs.85%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user
32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint64(hwndstring)); var rez_setforegroundwindow...
... = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_setforegroundwindow, rez_setforegroundwindow.tostring()); user
32.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 browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var nswindowstring = basewindow.
...the string is made into an actual gdkwindow* like this: var gdkwindow = ctypes.structtype('gdkwindow'); var gdkwindowptrstring = basewindow.nativehandle; var gdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); working with gdkwindow* gdkwindow* to xid var gdkwindow = ctypes.structtype('gdkwindow'); var gdkdrawable = ctypes.structtype('gdkdrawable'); var card
32 = /^(alpha|hppa|ia64|ppc64|s
390|x86_64)-/.test(services.appinfo.xpcomabi) ?
...And 7 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
mappings, so that you can access your files with custom paths such as: resource://myaddon/filename.ext chrome://myaddon/content/filename.ext step 2: no more resource:// uris for files internal to your bundle unfortunately, resource mappings in your chrome.manifest were not usable in restartless add-ons until mozilla finally fixed this bug in firefox
38, which looked bad, but only because mozilla is still using resource:// uris internally and in examples.
...it's a great way to modularize your code that's been available since firefox
3.
... step 2a: load your jsm from chrome:// now with that preface out of the way, this part is easy: drop support for firefox
3.x if you haven't already, move your jsm files to wherever you've got your chrome mapping to for your xul overlay and/or windows, import your files from that new chrome mapped path instead of the old resource one, and remove your "resource" line from your chrome.manifest file.
...And 7 more matches
List of Mozilla-Based Applications - Archive of obsolete content
name description additional information
389 directory server ldap server uses nss a
380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it.
... couac (fr) web-based email and jabber app couchdb document-oriented database uses spidermonkey courtanet benefit (fr) underwriting software for french insurance brokers crosscheck browserless testing framework uses mozilla rhino crowbar server tool cycloctopus screen scraping console cyclone
3 content management system danger mobile platform uses gecko on the server side -- no longer active?
...environment uses mozilla rhino geckofx embeddable gecko gjs javascript bindings for gnome globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used as a general purpose language uses mozilla spidermonkey and formerly called wxjavascript gnome operating system gnome
3 will use spidermonkey through gjs google adwords editor editor google 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...
...And 7 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) a regular expression is a special kind of string (i.e.
...here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=2800184
39106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=2800184
39106".
... here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=2800184
39106 it looks almost the same as the url.
...And 7 more matches
The First Install Problem - Archive of obsolete content
the solution is to encourage plugin vendors to write registry keys to the win
32 system registry, like the example application.
... this document proposes a meta-information model in the win
32 registry similar to the one used by microsoft's hkey_classes_root\clsid\ where a new activex control (ocx) on the system presents its uuid as a registry key (identifying the activex control) as well as information about where to find the ocx (e.g.
... under the inprocserver
32 subkey).
...And 7 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
<div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h
3>clown trigger</h
3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general.
... 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.
... these are enclosed in h
3 elements, so the field was pretty wide open in terms of what we could do.
...And 7 more matches
Accessible multimedia - Learn web development
for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp
3" type="audio/mp
3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio.
... here is a <a href="viper.mp
3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit
320.mp4" type="video/mp4"> <source src="rabbit
320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit
320.mp4">link to the video</a> instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc.
...And 7 more matches
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 246 have low vision." (see visual impairment and blindness).
...websites must conform with the w
3c’s web content accessibility guidelines, including cognitive accessibility guidelines.
... the w
3c’s cognitive and learning disabilities accessibility task force produces web accessibility guidelines for people with cognitive impairments.
...And 7 more matches
Floats - Learn web development
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,2
32,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,2
32,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,2
32,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case).
...And 7 more matches
JavaScript basics - Learn web development
with more experience, you'll be able to create games, animated 2d and
3d graphics, comprehensive database-driven apps, and much more!
...these include: browser application programming interfaces (apis) built into web browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream from a user's webcam, or generating
3d graphics and audio samples.
... -, *, / 9 -
3; 8 * 2; // multiply in js is an asterisk 9 /
3; assignment as you've seen already: this assigns a value to a variable.
...And 7 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
have a think about it: the number of seconds in an hour is
3600.
...they will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the rotatecount to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast): if (!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) /
3; below the previous line inside draw(), add the following block — this checks to see if the value of rotatecount is above
359 (e.g.
...
360, a full circle).
...And 7 more matches
powermetrics
the following is example output from such an invocation: *** sampled system activity (fri sep 4 17:15:14 2015 +1000) (5009.6
3ms 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 29
3 447.66 274.8
3 120.
35 221.74 firefox 84627 77.59 55.55 15.
37 2.59 91.42 42.12 204.47 ...
... plugin-container 84628
377.22
37.18 4
3.91 18.56 178.65 75.85 17.29 terminal 694 9.86 79.94 0.00 0.00 4.
39 2.20 0.00 powermetrics 84694 1.21
31.5
3 0.00 0.00 0.20 0.20 0.00 com.google.chrome 489 2
33.8
3 48.10 25.95 0.00 google chrome helper 84688 181.57 92.81 0.00 0.00 2
3.95 12.77 0.00 google chrome 84681 57.26 76.07 4.
39 0.00 2
3.75 12.97 0.00 google chrome helper 84685 0.1
3 48.08 0.00 0.00 0.40 0.20 ...
... 0.00 kernel_coalition 1 128.64 780.19
330.52 0.00 kernel_task 0 109.97 0.00 0.20 0.00 779.47
330.
35 0.00 launchd 1 18.88 2.44 0.00 0.00 0.40 0.20 0.00 com.apple.safari 488 90.60 108.58 56.48 26.65 com.apple.webkit.webcontent 84679 64.21 84.69 0.00 0.00 104.19 54.89 26.66 com.apple.webkit.networking 84678 26.89 58.89 0.40 0.00 1.60 0.00 0.00 safari 84676 1.56 55.74 0.00 0.00 ...
...And 7 more matches
JSS FAQ
jss
3.2 has jca support.
... jss
3.x works with jdk versions 1.2 or higher, except version 1.
3.0.
...if you are using jdk 1.
3.x, you will need to use at least version 1.
3.1--see bug 11
3808.
...And 7 more matches
NSS API Guidelines
the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 489
36 $ $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: 489
36 $ $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.
...we had been moving towards one, for some time, but for the nss
3.0 project we finally wrote it down.
...And 7 more matches
NSS release notes template
draft (remove line when document is finished) introduction the nss team has released network security services (nss)
3.xx, which is a minor release.
... or network security services (nss)
3.xx.y is a patch release for nss
3.xx.
... the bug fixes in nss
3.xx.y are described in the "bugs fixed" section below.
...And 7 more matches
S/MIME functions
function name/documentation source code nss versions nss_cmscontentinfo_getbulkkey mxr
3.2 and later nss_cmscontentinfo_getbulkkeysize mxr
3.2 and later nss_cmscontentinfo_getcontent mxr
3.2 and later nss_cmscontentinfo_getcontentencalgtag mxr
3.2 and later nss_cmscontentinfo_getcontenttypetag mxr
3.2 and later nss_cmscontentinfo_setbulkkey mxr
3...
....2 and later nss_cmscontentinfo_setcontent mxr
3.2 and later nss_cmscontentinfo_setcontent_data mxr
3.2 and later nss_cmscontentinfo_setcontentencalg mxr
3.2 and later nss_cmscontentinfo_setcontent_digesteddata mxr
3.2 and later nss_cmscontentinfo_setcontent_encrypteddata mxr
3.2 and later nss_cmscontentinfo_setcontent_envelopeddata mxr
3.2 and later nss_cmscontentinfo_setcontent_signeddata mxr
3.2 and later nss_cmsdecoder_cancel mxr
3.2 and later nss_cmsdecoder_finish mxr
3.2 and later nss_cmsdecoder_start mxr
3.2 ...
...and later nss_cmsdecoder_update mxr
3.2 and later nss_cmsdigestcontext_cancel mxr
3.2 and later nss_cmsdigestcontext_finishmultiple mxr
3.2 and later nss_cmsdigestcontext_finishsingle mxr
3.2 and later nss_cmsdigestcontext_startmultiple mxr
3.2 and later nss_cmsdigestcontext_startsingle mxr
3.2 and later nss_cmsdigestcontext_update mxr
3.2 and later nss_cmsdigesteddata_create mxr
3.2 and later nss_cmsdigesteddata_destroy mxr
3.2 and later nss_cmsdigesteddata_getcontentinfo mxr
3.2 and later nss_cmsde...
...And 7 more matches
NSS tools : modutil
modutil supports two types of databases: the legacy security databases (cert8.db, key
3.db, and secmod.db) and new sqlite databases (cert9.db, key4.db, and pkcs11.txt).
... modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this installation jar file was signed by: ---------------------------------------------- **subject name** c=us, st=california, l=mountain view, cn=cryptorific inc., ou=digital id class
3 - netscape object signing, ou="www.verisign.com/repository/cps incorp.
...liability ltd.(c)97 verisign, ou=verisign object signing ca - class
3 organization, ou="verisign, inc.", o=verisign trust network **issuer name**, ou=www.verisign.com/cps incorp.by ref.
...And 7 more matches
SpiderMonkey Build Documentation
no configure: error: installation or configuration problem: c compiler cannot create executables." you can try configuring like so: cc=clang cxx=clang++ ../configure it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:
30:15: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:
30:15: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include.
...start-shell-msvc201
3.bat or start-shell-msvc201
3-x64.bat) determines whether the compiler toolchain will target
32-bit or 64-bit builds.
... to create a 64-bit build, note that you must configure with --target=x86_64-pc-mingw
32 --host=x86_64-pc-mingw
32.
...And 7 more matches
JSAPI Cookbook
ngly named member testing function: // javascript var v = computesomevalue(); var isstring = typeof v === "string"; var isnumber = typeof v === "number"; var isnull = v === null; var isboolean = typeof v === "boolean"; var isobject = typeof v === "object" && v !== null; /* jsapi */ js::rootedvalue v(cx, computesomevalue()); bool isstring = v.isstring(); bool isnumber = v.isnumber(); bool isint
32 = v.isint
32(); // note: internal representation, not numeric value bool isnull = v.isnull(); bool isboolean = v.isboolean(); bool isobject = v.isobject(); // note: not broken like typeof === "object" is :-) to set a value use a correspondingly named member mutator function, or assign the result of the correspondingly named standalone function: // javascript var v; v = 0; v = 0.5; v = somestri...
...ng; v = null; v = undefined; v = false; /* jsapi */ js::rootedvalue v(cx); js::rootedstring somestring(cx, ...); v.setint
32(0); // or: v = js::int
32value(0); v.setdouble(0.5); // or: v = js::doublevalue(0.5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.setnull(); // or: v = js::nullvalue(); v.setundefined(); // or: v = js::undefinedvalue(); v.setboolean(false); // or: v = js::booleanvalue(false); finding the global object many of these recipes require finding the current global object first.
... object with new // javascript var person = new person("dave", 24); 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", 24) 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 that it is an object.
...And 7 more matches
Secure Development Guidelines
irectly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (
3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the i...
... html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite
3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite
3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite
3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite
3_bind_text(stmt, 1, name, strlen(name), sqlite_transient)...
...; sqlite
3_step(stmt); sqlite
3_finalize(p_stmt); writing secure code: arithmetic issues integer overflows/underflows overflows occur when an arithmetic operation attempts to create a numeric value that is larger than can be represented within the available storage space max + 1 will be 0 and 0 – 1 will be max!
...And 7 more matches
nsIWebBrowserChrome
constants constant value description status_script 1 flag for setstatus() status_script_default 2 flag for setstatus() status_link
3 flag for setstatus() chrome_default 1 value for the chromeflags attribute.
... chrome_toolbar
32 value for the chromeflags attribute.
... chrome_window_min 16
384 represent special cases.
...And 7 more matches
Using COM from js-ctypes
basis and reference for this article bugzilla :: bug 7
38501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c.
... $ cl ole
32.lib test.cpp vtable needs vtable description here.
... $ cl ole
32.lib test.c c code with pseudo struct needs pseudo struct description here.
...And 7 more matches
Working with ArrayBuffers
bug 7
329
36 includes a discussion of working with an arraybuffer.
... this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#
3080 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1
301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas.
...pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint64("0x
352e0000"))" 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.
...And 7 more matches
Plug-in Basics - Plugins
however, primary working path with binary file was /usr/lib/mozilla/plugins for
32-bit and 64-bit linux distributions and looks still working.
... about distributions: example debian 64bit probably use: /lib/x86_64-linux-gnu/ --> for 64 libs /lib/i
386-linux-gnu/ --> for
32 libs if exist /lib
32/ --> this is symlinked (or bind mounted) desired proper directory /lib64/ --> this is symlinked (or bind mounted) desired proper directory more in https://wiki.debian.org/multiarch/thecaseformultiarch if something wrong, please edit.
... example fedora 64bit use: /lib/ --> for
32 bit libs /lib64/ --> for 64 bit libs plug-ins within toolkit bundles.
...And 7 more matches
DOMMatrix - Web APIs
the dommatrix interface represents 4×4 matrices, suitable for 2d and
3d operations including rotation and translation.
...if false, the matrix is
3d.
... m11, m12, m1
3, m14, m21, m22, m2
3, m24, m
31, m
32, m
33, m
34, m41, m42, m4
3, m44 double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth.
...And 7 more matches
WebGLRenderingContext.getParameter() - Web APIs
constant returned type description gl.active_texture glenum gl.aliased_line_width_range float
32array (with 2 elements) gl.aliased_point_size_range float
32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding webglbuffer gl.blend glboolean gl.blend_color float
32array (with 4 values) gl.blend_dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation g...
...lenum 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 float
32array (with 4 values) gl.color_writemask sequence<glboolean> (with 4 values) gl.compressed_texture_formats uint
32array returns the compressed texture formats.
... when using the webgl_compressed_texture_s
3tc extension: ext.compressed_rgb_s
3tc_dxt1_ext ext.compressed_rgba_s
3tc_dxt1_ext ext.compressed_rgba_s
3tc_dxt
3_ext ext.compressed_rgba_s
3tc_dxt5_ext when using the webgl_compressed_texture_s
3tc_srgb extension: ext.compressed_srgb_s
3tc_dxt1_ext ext.compressed_srgb_alpha_s
3tc_dxt1_ext ext.compressed_srgb_alpha_s
3tc_dxt
3_ext ext.compressed_srgb_alpha_s
3tc_dxt5_ext when using the webgl_compressed_texture_etc extension: ext.compressed_r11_eac ext.compressed_signed_r11_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_alph...
...And 7 more matches
WebGLRenderingContext.texImage2D() - Web APIs
possible values in both webgl1 and webgl2 format type channels bytes per pixel rgba unsigned_byte 4 4 rgb unsigned_byte
3 3 rgba unsigned_short_4_4_4_4 4 2 rgba unsigned_short_5_5_5_1 4 2 rgb unsigned_short_5_6_5
3 2 luminance_alpha unsigned_byte 2 2 luminance unsigned_byte 1 1 alpha unsigned_byte 1 1 other possible values in webgl2 for the versions of texima...
... ui2 ● srgb8 rgb 8 8 8 ● srgb8_alpha8 rgba 8 8 8 8 ● ● r16f red f16 ● rg16f rg f16 f16 ● rgb16f rgb f16 f16 f16 ● rgba16f rgba f16 f16 f16 f16 ● r
32f red f
32 rg
32f rg f
32 f
32 rgb
32f rgb f
32 f
32 f
32 rgba
32f rgba f
32 f
32 f
32 f
32 r11f_g11f_b10f rgb f11 f11 f10 ● rgb9_e5 rgb 9 9 9 5 ● r8i red i8 ● ...
... r8ui red ui8 ● r16i red i16 ● r16ui red ui16 ● r
32i red i
32 ● r
32ui red ui
32 ● rg8i rg i8 i8 ● rg8ui rg ui8 ui8 ● rg16i rg i16 i16 ● rg16ui rg ui16 ui16 ● rg
32i rg i
32 i
32 ● rg
32ui rg ui
32 ui
32 ● rgb8i rgb i8 i8 i8 rgb8ui rgb ui8 ui8 ui8 rgb16i rgb i16 i16 i16 ...
...And 7 more matches
Rendering and the WebXR frame animation callback - Web APIs
in the diagram above, frame
3 is dropped because frame 2 did not complete rendering until after frame
3 was due to be painted.
...and if the device's refresh rate is 120 hz, you only have 0.0088
3333 seconds to render each frame if you want to avoid dropping frames.
... the optics of
3d we have two eyes for a reason: by having two eyes, each inherently sees the world from a slightly different angle.
...And 7 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) translate
3d(-50%, -50%, 0); }
30% { color: #4
312
36; } 100% { color: #000; transform: rotate(
360deg) translate
3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over
3 seconds at a constant (linear) rate and loops infinitely.
... in the @keyframes block we can see that
30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop.
...And 7 more matches
Example and tutorial: Simple synth keyboard - Web APIs
eight: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right:
3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: ...
...inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height:
30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } javascript the javascript code begins by initializing a number of variables.
... function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 27.500000000000000; notefreq[0]["a#"] = 29.1
352
35094880619; notefreq[0]["b"] =
30.867706
328507756; notefreq[1]["c"] =
32.70
3195662574829; notefreq[1]["c#"] =
34.647828872109012; notefreq[1]["d"] =
36.708095989675945; notefreq[1]["d#"] =
38.89087296526011
3; notefreq[1]["e"] = 41.20
3444614108741; notefreq[1]["f"] = 4
3.65
3528929125485; notefreq[1]["f#"] = 46.249
3028
38954299; notefreq[1]["g"] = 48.999429497718661; notefreq[1...
...And 7 more matches
Operable - Accessibility
note: to read the w
3c definitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable.
... 2.1.
3 keyboard — all functionality (aaa) this is a further step beyond criterion 2.1.1.
... 2.2.
3 no time limits (aaa) this builds on criteria 2.2.1, stating that content that wants to pass aaa conformance should have no time limits.
...And 7 more matches
:nth-child() - CSS: Cascading Style Sheets
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1,
3, 5, etc.
...'='<attr-modifier> = i | s examples example selectors tr:nth-child(odd) or tr:nth-child(2n+1) represents the odd rows of an html table: 1,
3, 5, etc.
... :nth-child(5n) represents elements 5 [=5×1], 10 [=5×2], 15 [=5×
3], etc.
...And 7 more matches
additive-symbols - CSS: Cascading Style Sheets
syntax additive-symbols:
3 "0"; additive-symbols:
3 "0", 2 "\2e\20"; additive-symbols:
3 "0", 2 url(symbol.png); when the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols.
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 7 more matches
background-position - CSS: Cascading Style Sheets
und-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right
3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or more <position> values, separated by commas.
...
3-value syntax: two values are keyword values, and the third is the offset for the preceding value: the first value is one of the keyword values top, left, bottom, right, or center.
... (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) using the x axis for an example, let's say we have an image that is
300px wide and we are using it in a container that is 100px wide, with background-size set to auto: 100px -
300px = -200px (container & image difference) so that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values: -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px ...
...And 7 more matches
background - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparentapplies toall elements.
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 7 more matches
border-left - CSS: Cascading Style Sheets
yle: discreteborder-left-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 7 more matches
border-right - CSS: Cascading Style Sheets
le: discreteborder-right-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 7 more matches
border-top - CSS: Cascading Style Sheets
tyle: discreteborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 7 more matches
scrollbar-color - CSS: Cascading Style Sheets
see techniques for wcag 2.0: g18
3: using a contrast ratio of
3:1.
... formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 7 more matches
text-decoration-color - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c understanding wcag 2.0 formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
...And 7 more matches
Live streaming web audio and video - Developer guides
key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp
3 or webm file.
...this is not yet supported natively in most browsers, but be aware that firefox os 1.
3 supports rtsp.
... for example: <video src="rtsp://myhost.com/mymedia.format"> <!-- fallback here --> </video> media source extensions (mse) media source extensions is a w
3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for playback.
...And 7 more matches
Functions - JavaScript
1 : n * fac(n - 1) } console.log(factorial(
3)) function expressions are convenient when passing a function as an argument to another function.
...for example, here is a function that computes factorials recursively: function factorial(n) { if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); } you could then compute the factorials of 1 through 5 as follows: var a, b, c, d, e; a = factorial(1); // a gets the value 1 b = factorial(2); // b gets the value 2 c = factorial(
3); // c gets the value 6 d = factorial(4); // d gets the value 24 e = factorial(5); // e gets the value 120 there are other ways to call functions.
... // the following variables are defined in the global scope var num1 = 20, num2 =
3, name = 'chamahk'; // this function is defined in the global scope function multiply() { return num1 * num2; } multiply(); // returns 60 // a nested function example function getscore() { var num1 = 2, num2 =
3; function add() { return name + ' scored ' + (num1 + num2); } return add(); } getscore(); // returns "chamahk scored 5" scope and the function stack recurs...
...And 7 more matches
DataView - JavaScript
function getuint64(dataview, byteoffset, littleendian) { // split 64-bit number into two
32-bit (4-byte) parts const left = dataview.getuint
32(byteoffset, littleendian); const right = dataview.getuint
32(byteoffset+4, littleendian); // combine the two
32-bit values const combined = littleendian?
... left + 2**
32*right : 2**
32*left + right; if (!number.issafeinteger(combined)) console.warn(combined, 'exceeds max_safe_integer.
...further, although native bigints are much faster than user-land library equivalents, bigints will always be much slower than
32-bit integers in javascript due to the nature of their variable size.
...And 7 more matches
Math.fround() - JavaScript
the math.fround() function returns the nearest
32-bit single precision float representation of a number.
... return value the nearest
32-bit single precision float representation of the given number.
...however, sometimes you may be working with
32-bit floating-point numbers, for example if you are reading values from a float
32array.
...And 7 more matches
parseInt() - JavaScript
radix optional an integer between 2 and
36 that represents the radix (the base in mathematical numeral systems) of the string.
... or nan when the radix is smaller than 2 or bigger than
36, or the first non-whitespace character cannot be converted to a number.
...6.022e2
3 for 6.022 × 102
3), using parseint to truncate numbers will produce unexpected results when used on very large or very small numbers.
...And 7 more matches
begin - SVG: Scalable Vector Graphics
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w
3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="
35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="
35" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin=...
... 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> <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="11...
...0" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="
30" x2="110" y2="
30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w
3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w
3.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" attributen...
...And 7 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w
3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop
3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> ...
...<stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop
3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradient2)"/> </svg> screenshotlive sample above is an example of a linear gradient being applied to a <rect> element.
...also, like with fill and stroke, you can specify a stop-opacity attribute to set the opacity at that position (again, in ff
3 you can also use rgba values to do this).
...And 7 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 i
32)) (func (export "exported_func") i
32.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.
...for example, to write 42 directly into the first word of linear memory, you can do this: new uint
32array(memory.buffer)[0] = 42; you can then return the same value using: new uint
32array(memory.buffer)[0] try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your javascript console.
...add the following into your code, where indicated: var i
32 = new uint
32array(memory.buffer); for (var i = 0; i < 10; i++) { i
32[i] = i; } var sum = results.instance.exports.accumulate(0, 10); console.log(sum); note how we create the uint
32array view on the memory object’s buffer (memory.prototype.buffer), not on the memory itself.
...And 7 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox
30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content ...
...script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox
30, you can still do this for primitive values, but can no longer do it for objects.
... communicating with page scripts there are two different ways a content script can communicate with a page script: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox
31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview.
...And 6 more matches
Forms related code snippets - Archive of obsolete content
> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version
3 or later.
... |*| http://www.gnu.org/licenses/gpl-
3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; ...
... otable.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtml = "\u00ab"; /* « */ odecrmonth.innerhtml = "\u00
3c"; /* < */ oincrmonth.innerhtml = "\u00
3e"; /* > */ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid < 7...
...And 6 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
matsuzawa-san is a co-author of firefox
3 hacks (o'reilly japan, 2008.) this chapter discusses tools to assist in developing extensions.
...try inserting one within the quicknote_savenote function, around line
345 (figure
3).
... fixme: figure
3: inserting a breakpoint start debugger type in some text into the quicknote screen, and then select save current tab from the menu.
...And 6 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
note this article is the version from 200
3 with slight modifications (no images and no links to samples).
...an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom
3 load.
...many of the new web technologies in the html 4.0 specification, xml 1.0, dom level
3 were explicitly created with application-like behavior and more sophisticated navigational models in mind.
...And 6 more matches
Creating a Microsummary - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) a microsummary generator is a set of instructions for creating a microsummary from the content of a page.
... add the xslt transform sheet to the generator by including it within a <template> element: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w
3.org/1999/xsl/transform" version="1.0"> </transform> </template> </generator> note that while microsummary generators can include arbitrary xslt, including xslt that produces rich text output, firefox currently only displays the text version of the xslt output.
... specifying the output type since the xslt transform sheet will generate a text microsummary, we should indicate this with the xslt <output> element: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w
3.org/1999/xsl/transform" version="1.0"> <output method="text"/> </transform> </template> </generator> using a simple xslt <template> the xslt processor transforms documents by comparing each xslt <template> element in the transform sheet to a set of nodes in the document.
...And 6 more matches
New Skin Notes - Archive of obsolete content
--nickolay 10:
38,
31 aug 2005 (pdt) existing fixes should be on test/docs/ now.
...--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:
34,
31 aug 2005 (pdt) ok, so i'm asking just to change this color.
...And 6 more matches
Table Cellmap - Archive of obsolete content
8
3 union { 84 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 6 more matches
Table Layout Regression Tests - Archive of obsolete content
a typical beginning of a dump (*.rgd file) looks like: <frame va="15022440" type="viewport(-1)" state="270
340" parent="0"> <view va="47171904"> </view> <stylecontext va="150222
32"> <font serif 240 240 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 left: null top: null right: null bott...
...to 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 +++ javascript debugging hooks installed.
... ++webshell == 1 ++domwindow == 1 ++webshell == 2 ++domwindow == 2 note: styleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell ==
3 ++domwindow ==
3 running baseline test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
...And 6 more matches
nsIContentPolicy - Archive of obsolete content
6
3 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_image
3 indicates an image (for example, <img> elements).
... type_dtd 1
3 indicates a dtd loaded by an xml document.
...And 6 more matches
Adobe Flash - Archive of obsolete content
determine if the flash version is greater than 6r.49 //
3.
...the former is part of the w
3c html 4 standard, whereas the latter is a deprecated element, as discussed in using the right markup to invoke plugins.
... example 2: javascript to flash communication note: javascript to flash communication may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 284057 and bug 2
335
33).
...And 6 more matches
-moz-border-bottom-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 6 more matches
-moz-border-left-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 6 more matches
-moz-border-right-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 6 more matches
-moz-border-top-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 6 more matches
GLSL Shaders - Game development
vertex shaders transform shape positions into
3d drawing coordinates.
... as you may remember from the basic theory article, a vertex is a point in a
3d coordinate system.
...the
3d coordinate system defines space and the vertices help define shapes in that space.
...And 6 more matches
Desktop gamepad controls - Game development
api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 6
3% global coverage, according to caniuse.com.
...xbox
360 or ps
3) should be suitable for web implementations.
...for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox
360 wireless controller.
...And 6 more matches
Visual typescript game engine - Game development
written in typescript current version
3.1.
3.
...multirtc
3 alias 'broadcaster' used for video chat.
... */ private aspectratio: number = 1.
333; /** * domain is simple url address, * recommendent to use for local propose lan ip * like : 192.168.0.xxx if you wanna run ant test app with server.
...And 6 more matches
How CSS is structured - Learn web development
an example would be the calc() function, which can do simple math within css: <div class="outer"><div class="box">the inner box is 90% -
30px.</div></div> .outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% -
30px); background-color: rebeccapurple; color: white; } this renders as: a function consists of the function name, and parentheses to enclose the values for the function.
... in the case of the calc() example above, the values define the width of this box to be 90% of the containing block width, minus
30 pixels.
... <div class="box"></div> .box { margin:
30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below.
...And 6 more matches
How do you make sure your website works properly? - Learn web development
301: moved permanently the resource has moved to a new location.
... you won't see this much in your browser, but it's good to know about "
301" since search engines use this information a lot to update their indexes.
...
304: 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 6 more matches
HTML text fundamentals - Learn web development
in html, each paragraph has to be wrapped in a <p> element, like so: <p>i am a paragraph, oh yes i am.</p> each heading has to be wrapped in a heading element: <h1>i am the title of the story.</h1> there are six heading elements: <h1>, <h2>, <h
3>, <h4>, <h5>, and <h6>.
... each element represents a different level of content in the document; <h1> represents the main heading, <h2> represents subheadings, <h
3> represents sub-subheadings, and so on.
... implementing structural hierarchy for example, in this story, the <h1> element represents the title of the story, the <h2> elements represent the title of each chapter, and the <h
3> elements represent sub-sections of each chapter: <h1>the crushing bore</h1> <p>by chris mills</p> <h2>chapter 1: the dark night</h2> <p>it was a dark night.
...And 6 more matches
HTML table advanced features and accessibility - Learn web development
le> <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(2
35,2
35,2
35); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10px; } tbody { font-size: 90%; font-style: italic; } t...
...ate</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> <td>hairdresser</td> <td>12/09</td> <td>great idea</td> <td>
30</td> </tr> <tr> <td>lasagna</td> <td>restaurant</td> <td>12/09</td> <td>regrets</td> <td>18</td> </tr> <tr> <td>shoes</td> <td>shoeshop</td> <td>1
3/09</td> <td>big regrets</td> <td>65</td> </tr> <tr> <td>to...
...othpaste</td> <td>supermarket</td> <td>1
3/09</td> <td>good</td> <td>5</td> </tr> </tbody> </table> </body> </html> note: you can also find it on github as spending-record-finished.html (see it live also).
...And 6 more matches
Simple SeaMonkey build
minimum and recommended hardware requirements for mozilla development are: recommended: 8gb of ram (having only 4gb ram and 4gb swap may give memory errors during compile)
35 gb free disk space.
... this will accomodate visual studio 201
3 community edition, the required sdks, the mozillabuild package, the mercurial source repository and enough free disk space to compile.
... debian linux: # this one-liner should install all necessary build deps sudo aptitude install zip mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.1
3 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-get build-dep thunderbird sudo apt-get build-dep seamonkey sudo apt-get install zip unzip mercurial g++ make autoconf2.1
3 yasm libgtk2.0-dev libglib...
...And 6 more matches
Obsolete Build Caveats and Tips
from firefox 10, the compilator is visual studio 2010; if you want to use it, you must use a previous version of it !), or 2005 professional from build_instructions those who need to work with the code for firefox
3/mozilla 1.9 and earlier can check out the latest source using cvs.
...to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox
3.6) code for the firefox
3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox
3.5) code for the firefox
3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
...And 6 more matches
Investigating leaks using DMD heap scan mode
the result of that grep will contain output that looks something like this: cc-edges.1587
3.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 214748
3662 inner https://www.example.com/ * cc-edges.1587
3.log: the first part is the file name where it was found.
... 1587
3 is the pid of the process that leaked.
... the output will look something like this, after a message about loading progress: 0x7f0882fe
32
30 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=
3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 214748
3662 inner https://www.example.com] root 0x7f0882fe
32
30 is a ref counted object with 1 unknown...
...And 6 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 1024 /* 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-...
...ignature-----" #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 <noisefilen...
... progname, "-d -b <headerfilename> -e <encryptfilename> -o <opfilename>"); fprintf(stderr, "%s %s\n --sign using private key \n\n", progname, "-s -b <headerfilename> -i <infilename> "); fprintf(stderr, "%s %s\n --verify using public key \n\n", progname, "-v -b <headerfilename> -i <ipfilename> "); fprintf(stderr, "options:\n\n"); fprintf(stderr, "%-
30s - db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-
30s - db password [optional]\n\n", "-p <dbpwd>"); fprintf(stderr, "%-
30s - db password file [optional]\n\n", "-f <dbpwdfile>"); fprintf(stderr, "%-
30s - noise file name [optional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-
30s - input file name\n\n", ...
...And 6 more matches
sample2
nclude <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 <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize
32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "...
...er "-----begin certificate for signature verification-----" #define ns_cert_vfy_trailer "-----end certificate for signature verification-----" #define ns_sig_header "-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* missing publically from nss versions earlier than
3.1
3 */ #ifndef sec_error_base #define sec_error_base (-0x2000) typedef enum { sec_error_io = sec_error_base + 0, sec_error_token_not_logged_in = (sec_error_base + 155), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss
3.1
3.
...*/ #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 ...
...And 6 more matches
PKCS #11 Module Specs
des - this token should be used for all des, des2, and des
3 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,rc4,rc2,des,md2,md5,sha1,ssl,tls,publiccerts,random'] 0x2=[slotflags='rsa' askpw=only]}" library=dkck
32.dll name="datakey signasure
3600" nss="trustorder=50 ciphers= " library=swft
32.dll name="netscape software fortezza" parameters="keyfile=/u/relyea/keyfile" nss="trustorder=50 ciphers=fortezza slotparams=0x1=[slotflags='fortezza']" library=core
32.dll name="litronic netsign" softoken specific parameters the internal nss pkcs #11 implementation (softoken) requires applications parameters.
...this value will be truncated at
32 bytes (no null, partial utf8 characters dropped).
...And 6 more matches
NSS tools : pk12util
pk12util supports two types of databases: the legacy security databases (cert8.db, key
3.db, and secmod.db) and new sqlite databases (cert9.db, key4.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 1
3 - pkcs11 get slot error o 14 - 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 2
3 - ...
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and
3key triple des-cbc parameters: salt: 45:2e:6a:a0:0
3:4d:7b:a1:6
3:
3c:15:ea:67:
37:62:1f iteration count: 1 (0x1) certificate: data: version:
3 (0x2) serial number: 1
3 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" ...
...And 6 more matches
NSS Tools crlutil
-p dbprefix specify the prefix used on the nss security database files (for example, my_cert8.db and my_key
3.db).
...this formatting follows rfc #111
3.
...list of possible algorithms: md2 | md4 | md5 | sha1 | sha256 | sha
384 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...And 6 more matches
NSS tools : pk12util
pk12util supports two types of databases: the legacy security databases (cert8.db, key
3.db, and secmod.db) and new sqlite databases (cert9.db, key4.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 1
3 - pkcs11 get slot error o 14 - 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 2
3 - get default cert db error o 24 - 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
Redis Tips
ode.js redis client: https://github.com/mranney/node_redis npm install redis python redis client: https://github.com/andymccurdy/redis-py there are some gotchas with the python api: https://github.com/andymccurdy/redis-py#api-reference select statement not implemented del is 'delete' in python zadd argument order is wrong setex argument order is wrong the default redis port is 6
379.
... in node, create client with explicit host and port like so: > var r = require('redis').createclient(6
379, '127.0.0.1') commands are asynchronous.
... redis> set foo 42 ok redis> incr foo (integer) 4
3 redis> incrby foo 17 (integer) 60 notice that these results come back as numbers, not strings.
...And 6 more matches
XPCOM array guide
void notifyobservers(nsiarray* aarray) { pruint
32 length; aarray->getlength(&length); for (pruint
32 i=0; i<length; ++i) { nscomptr<nsimyobserver> element; aarray->queryelementat(i, ns_get_iid(nsielement), getter_addrefs(element)); element->observe(); } } a simpler option is to use the helper do_queryelementat which is typesafe.
... void notifyobservers(nsiarray* aarray) { pruint
32 length; aarray->getlength(&length); for (pruint
32 i=0; i<length; ++i) { nscomptr<nsimyobserver> element = do_queryelementat(aarray, i); element->observe(); } } passing as a parameter since nsiarray is an xpcom object, it should be passed as a pointer.
... when the array can or should be modified, then use nsimutablearray: // array is read-only because it uses nsiarray void printsize(nsiarray* elements) { pruint
32 count; elements->getlength(&count); printf("there are %d elements.\n", count); } // using nsimutablearray, so callee may modify void tweakarray(nsimutablearray* elements) { elements->removeelementat(0); elements->appendelement(newelement, pr_false); } while it is usually possible to call queryinterface on an nsiarray to get access to the nsimutablearray interface, this is against convention and it should be avoided.
...And 6 more matches
mozIStorageBindingParams
last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) inherits from: nsisupports you can only create mozistoragebindingparams objects by calling the mozistoragebindingparamsarray.newbindingparams().
... void bindint
32byindex(in unsigned long aindex, in long avalue); native code only!
... void bindint
32byname(in autf8string aname, in long avalue); native code only!
...And 6 more matches
mozIStorageConnection
1.0 68 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) for a general overview on how to use this interface, see storage.
... method overview void asyncclose([optional] in mozistoragecompletioncallback acallback); void begintransaction(); void begintransactionas(in print
32 transactiontype); mozistoragestatement clone([optional] in boolean areadonly); void close(); void committransaction(); void createaggregatefunction(in autf8string afunctionname, in long anumarguments, in mozistorageaggregatefunction afunction); mozistorageasyncstatement createasyncstatement(in autf8string asqlstatement); void createfunction(in autf8string afunctionname, in long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); void createtable(in string atablename, in strin...
...atementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print
32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print
32 agranularity, in mozistorageprogresshandler ahandler); boolean tableexists(in autf8string atablename); attributes attribute type description connectionready boolean indicates if the connection is open and ready to use.
...And 6 more matches
nsIAppStartup
e1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlastwindowclosingsurvivalarea(); void exitlastwindowclosingsurvivalarea(); void getstartupinfo(); void hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint
32 amode); void restartinsafemode(in pruint
32 aquitmode); void run(); attributes attribute type description interrupted boolean true if the startup process was interrupted by an interactive prompt.
... eforcequit 0x0
3 force all windows to close, then quit.
... createstartupstate() obsolete since gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs.
...And 6 more matches
nsIBinaryInputStream
inherits from: nsiinputstream last changed in gecko 1.7 method overview pruint8 read8(); pruint16 read16(); pruint
32 read
32(); pruint64 read64(); unsigned long readarraybuffer(in pruint
32 alength, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint
32 alength, [array, size_is(alength), retval] out pruint8 abytes); void readbytes(in pruint
32 alength, [size_is(alength), retval] out string astring); acstring readcstring(); double...
... read
32() reads from the stream.
... pruint
32 read
32(); parameters none.
...And 6 more matches
nsIEditorIMESupport
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview void begincomposition(in nstexteventreplyptr areply); native code only!
... methods native code only!begincomposition obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1)this feature is obsolete.
...void begincomposition( in nstexteventreplyptr areply ); parameters areply endcomposition() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) handles the end of inline input composition.
...And 6 more matches
nsIZipWriter
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) once all the operations you wish to perform are added to the queue, a call to processqueue() will perform the operations in the order they were added to the queue.
...to create an instance, use: var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizipwriter); method overview void addentrychannel(in autf8string azipentry, in prtime amodtime, in print
32 acompression, in nsichannel achannel, in boolean aqueue); void addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); void addentryfile(in autf8string azipentry, in print
32 acompression, in nsifile afile, in boolean aqueue); void addentrystream(in autf8string azipentry, in prtime amodtime, in print
32 acompression, in nsiinputstream astream,...
... in boolean aqueue); void close(); nsizipentry getentry(in autf8string azipentry); boolean hasentry(in autf8string azipentry); void open(in nsifile afile, in print
32 aioflags); void processqueue(in nsirequestobserver aobserver, in nsisupports acontext); void removeentry(in autf8string azipentry, in boolean aqueue); attributes attribute type description comment acstring gets or sets the comment associated with the currently open zip file.
...And 6 more matches
XPCOM tasks
it was last edited in 200
3 and is probably of historical interest only.
... p
3 i/o functionality (except for the filespec facility) probably doesn't belong in xpcom; perhaps it should be moved to netwerk p
3 the `twips' units routines (or perhaps all routines) in "nsunitconversion.h" probably belong in layout.
... p
3 nsstringtokenizer probably belongs in the parser.
...And 6 more matches
Autoconfiguration in Thunderbird
author: ben bucksch please do not change this document without consulting the author thunderbird
3.1 and later (and
3.0 to some degree) includes mail account autoconfiguration functionality.
...dns records): autoconfig in a 10.2.
3.4 or autoconfig in cname autoconfig.hoster.com.
...where 10.2.
3.4 and autoconfig.hoster.com are ip addresses / hostnames you own.
...And 6 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
"address-line1", "address-line2", "address-line
3" each individual line of the street address.
... "address-level
3" the third administrative level, in addresses with at least three administrative levels.
... "cc-csc" the security code for the payment instrument; on credit cards, this is the
3-digit verification number on the back of the card.
...And 6 more matches
Microformats - HTML: Hypertext Markup Language
developer</a> on <time class="dt-published" datetime="201
3-06-1
3 12:00:00">1
3<sup>th</sup> june 201
3</time></p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embedded h-card dt-published when the entry ...
...was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a6
30/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/pr...
...ofile/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-
31t14:19:09+0000">
31 may 2019</time></a></p> </div> { "items": [ { "type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/
31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-
31t14:19:09+0000" ], "content": [ { "html": "hey thanks for making this microformats resource", "value": "hey thanks f...
...And 6 more matches
MIME types (IANA media types) - HTTP
it is defined and standardized in ietf's rfc 68
38.
... model list at iana model data for a
3d object or scene.
... examples include model/
3mf and model/vml.
...And 6 more matches
HTTP resources and specifications - HTTP
specification title status rfc 72
30 hypertext transfer protocol (http/1.1): message syntax and routing proposed standard rfc 72
31 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc 72
32 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 72
33 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 72
34 hy...
...pertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content informational rfc 8246 http immutable responses proposed standard rfc 72
35 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 6265 http state management mechanism defines cookies proposed standard draft spec cookie prefixes ietf draft draft spec same-site cookies ietf draft draft spec deprecate modification of 'secure' cookies from non-secure origins ietf draft rfc 2145 use and interpretation of http version numbers informational rfc 6585 additional http status codes proposed standard rfc 75
38 t...
...he hypertext transfer protocol status code
308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2
397 the "data" url scheme proposed standard rfc
3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7578 returning values from forms: multipart/form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standar...
...And 6 more matches
Date - JavaScript
tc
39 is working on temporal, a new date/time api.
...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 1
3, 275760 ce) can be represented by the standard date object (equivalent to ±8,640,000,000,000,000 milliseconds).
... instance methods date.prototype.getdate() returns the day of the month (1–
31) for the specified date according to local time.
...And 6 more matches
this - JavaScript
// in web browsers, the window object is also the global object: console.log(this === window); // true a =
37; console.log(window.a); //
37 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running.
...dent on how the function is called } whatsthis(); // 'global' as this in the function isn't set, so it defaults to the global/window object whatsthis.call(obj); // 'custom' as this in the function is set to obj whatsthis.apply(obj); // 'custom' as this in the function is set to obj this and object conversion function add(c, d) { return this.a + this.b + c + d; } var o = {a: 1, b:
3}; // the first parameter is the object to use as // 'this', subsequent parameters are passed as // arguments in the function call add.call(o, 5, 7); // 16 // the first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); //
34 note that in non–strict mode, with call and apply, if the value...
...console.log(h()); // azerty var o = {a:
37, f: f, g: g, h: h}; console.log(o.a, o.f(), o.g(), o.h()); //
37,
37, azerty, azerty arrow functions in arrow functions, this retains the value of the enclosing lexical context's this.
...And 6 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
previous overview: progressive web apps next now that we’ve seen what the structure of js1
3kpwa looks like and have seen the basic shell up and running, let's look at how the offline capabilities using service worker are implemented.
... in this article, we look at how it is used in our js1
3kpwa example (see the source code also).
... service workers in the js1
3kpwa app enough theory — let's see some source code!
...And 6 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
the mandatory namespace for xslt is "http://www.w
3.org/1999/xsl/transform".
...the string "http://www.w
3.org/1999/xsl/transform" is a constant that designates the elements so marked as belonging to the set of tags designated by the w
3c in the 1999 xslt recommendation.
... another string that is occasionally seen in stylesheets, "http://www.w
3.org/tr/wd-xsl", indicates compliance with an earlier working draft (hence the wd) of the w
3c document.
...And 6 more matches
Classes and Inheritance - Archive of obsolete content
to illustrate this, let's define a simple constructor for a class shape: function shape(x, y) { this.x = x; this.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2,
3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // =>
3 the keyword new tells javascript that we are performing a constructor call.
...when a function is used in a constructor call, javascript makes the value of this property the prototype of the newly created object: let shape = shape(2,
3); object.getprototypeof(shape) == shape.prototype; // => true all instances of a class have the same prototype.
...to illustrate this, let's add a member function to the class shape: shape.prototype.draw = function () { throw error("not yet implemented"); } let shape = shape(2,
3); shape.draw(); // => error: not yet implemented inheritance and constructors suppose we want to create a new class, circle, and inherit it from shape.
...And 5 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
3.
...the current version is gplv
3.
... <one line to give the program's name and a brief idea of what it does.> copyright (c) <year> <name of author> this program is free software: you can redistribute it and/or modify it under the terms of the gnu general public license as published by the free software foundation, either version
3 of the license, or (at your option) any later version.
...And 5 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.
...certutil.exe) in the system directory (\windows\system
32\) so ensure the new paths are first in the path search list.
...And 5 more matches
Monitoring downloads - Archive of obsolete content
firefox
3 makes it easier than ever to monitor the status of downloads.
...firefox
3 introduces new api that allows any number of listeners to observe downloads.
... this article demonstrates how to monitor downloads in firefox
3, using the download manager.
...And 5 more matches
Install script template - Archive of obsolete content
additionally installs to a secondary location on the windows desktop, in this case c:\winnt\system
32\myplugin\
3.
...consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra so it is not required to update too often var software_name="cult
3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors.
... var plid = "@myplugin.com/myplugin,version=5.
3"; var version = "5.
3.0.0"; var mimetype = "application/x-my-plugin"; var suffix = "my"; var suffix_description = "my plugin files"; var company_name = "mypluginco"; var plugin_description = "my exemplary plugin mine all mine"; // registry constant paths // these will be used when the win
32 registry keys are written var hkey_local_machine = "hkey_local_machine"; var hkey_current_user = "hkey_current_user"; var reg_moz_path = "software\\mozillaplugins"; // my own error code in case secondary installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current browser var errblock1; // error return codes when we try and do a secondary installation...
...And 5 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
3.
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author="my name...
...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 8
3px
39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px
39px 84px);} .custombutton {-moz-image-region: rect(
39px 49px 72px 0px);} .custombutton:hover {-moz-image-region: rect(
39px 98px 72px 49px);} .custombutton:active {-moz-image-region: rect(
39px 147px 72px 98px);} /* common style f...
...And 5 more matches
Extentsions FAQ - Archive of obsolete content
option #
3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar.
...<https://bugzilla.mozilla.org/show_bug.cgi?id=
312818> "thunderbird requires domain in addresses and doesn't always add default" there is an extension that allows what you want attached to one of the comments in this bug.
...use the dom api (http://www.w
3schools.com/dom/default.asp has a good tutorial).
...And 5 more matches
Client-side form validation - Learn web development
"your password needs to be between 8 and
30 characters long and contain one uppercase letter, one symbol, and a number." (a very specific data format is required for your data).
...this means that floats, like
3.2, will also show as invalid.
...ss]trawberry|[ll]emon|[oo]range"> <datalist id="l1"> <option>banana</option> <option>cherry</option> <option>apple</option> <option>strawberry</option> <option>lemon</option> <option>orange</option> </datalist> </p> <p> <label for="t2">what's your e-mail address?</label> <input type="email" id="t2" name="email"> </p> <p> <label for="t
3">leave a short message</label> <textarea id="t
3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>submit</button> </p> </form> and now some css to style the html: form { font: 1em sans-serif; max-width:
320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px sol...
...And 5 more matches
Example 1 - Learn web development
class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0
3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding ...
...: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e
3e
3e
3, #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-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em ...
...} .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 class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div...
...And 5 more matches
Images in HTML - Learn web development
therefore, you should give your image a descriptive filename; dinosaur.jpg is better than img8
35.png.
...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="
341"> 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="
341" 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.
...And 5 more matches
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="rabbit
320.mp4" type="video/mp4"> <source src="rabbit
320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit
320.mp4">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.
...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.
...And 5 more matches
What is JavaScript? - Learn web development
a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/
3d graphics, scrolling video jukeboxes, etc.
...we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.
3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding:
3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); par...
... the canvas and webgl apis allow you to create animated 2d and
3d graphics.
...And 5 more matches
Handling common HTML and CSS problems - Learn web development
one service that can do this is the w
3c markup validation service, which allows you to point to your code, and returns a list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on.
... the w
3c has a css validator available too, for this purpose.
... note: html errors don't tend to show up so easily in dev tools, as the browser will try to correct badly-formed markup automatically; the w
3c validator is the best way to find html errors — see validation above.
...And 5 more matches
Mozilla accessibility architecture
accessibility apis are used by
3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus.
...you may also wish to read gecko info for windows accessibility vendors, a primer for vendors of
3rd party accessibility software, on how msaa clients can utilize gecko's support.
...readers of this document should be familiar with interfaces, the w
3c dom, xul and the concept of a layout object tree.
...And 5 more matches
Testopia
testopia
3.0 (not yet released) if you upgraded to bugzilla 5.0, you probably noticed that testopia 2.5 is not compatible with this version.
... if you find bugs in the code available from the git repository, please report it to us so that we can fix most critical ones on time for testopia
3.0.
... do not ask when we plan to release
3.0, because we really don't know.
...And 5 more matches
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w
3c//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 00b97c
30 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 ...
...70 c=9180,4470 cnt=858 canvas 00b97c6c r=0 a=9180,uc c=9180,4470 cnt=859 area 02d7afe4 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=8940,uc cnt=862 block 02d7b210 d=8940,0 area 02d7afe4 d=9180,120 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c
30 d=9180,4470 vp 00b97c
30 r=1 a=9180,4470 c=9180,4470 cnt=86
3 scroll 00b97ee0 r=1 a=9180,4470 c=9180,4470 cnt=864 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 02d7afe4 r=1 a=9180,uc c=9180,uc cnt=867 block 02d7b210 r=1 a=9180,uc c=8940,uc cnt=868 text 02d7b
3f8 r=0 a=8940,uc c=uc,uc cnt=869 text 02d7b
3f8 d=0,0 t...
...blo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1500,uc cnt=871 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=872 row 02d7baf8 r=0 a=uc,uc c=uc,uc cnt=87
3 cell 02d7bc98 r=0 a=uc,uc c=uc,uc cnt=874 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=875 text 02d7be84 r=0 a=uc,uc c=uc,uc cnt=876 text 02d7be84 d=
300,285 me=
300 block 02d7bcf8 d=
300,
300 me=
300 cell 02d7bc98 d=
330,
330 me=
330 row 02d7baf8 d=uc,
330 rowg 00b984a4 d=uc,
330 colg 02d7bfb0 r=0 a=uc,uc c=uc,uc cnt=877 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cel...
...And 5 more matches
How Mozilla's build system works
the file is generated from a file called configure.in, which is written in m4 and processed using autoconf 2.1
3 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.
... 0 created; 1 updated; 2187 unchanged total wall time: 5.0
3s; cpu time:
3.79s; efficiency: 75% what this is saying is that a total of 1,096 moz.build files were read.
...And 5 more matches
How to get a stacktrace with WinDbg
(you'll want the
32-bit version, even if you are using a 64-bit version of windows) then install it, the standard settings in the installation process are fine.
... faq q: i am running windows 7 (
32-bit or 64-bit) and i see an exception in the windbg command window that says 'ntdll
32!ldrpdodebuggerbreak+0x2c' or 'ntdll
32!ldrpdodebuggerbreak+0x
30'.
... a: if you see 'int
3' after either of those exceptions, you will need to execute the following commands in windbg.
...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 2484|25
395
3338
38| 17 |asynctransactiontrackersholder | 40 40| 10594 1| 78 |compositorchild | 472 472| 1 1| 79 |condvar | 24 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 14:17:40 2000 mozilla mozilla.txt tue aug 29 14:18:42 2000 yahoo yahoo.txt tue aug 29 14:19:
32 2000 netscape netscape.txt tue aug 29 14:20:14 2000 the numbers do not include malloc 'd data such as string contents.
...And 5 more matches
Refcount tracing and balancing
note: due to an issue with the sandbox on windows (bug 1
345568), 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,7
3,165 (serial numbers start from 1, not 0).
... 0x0025
3ab0 (1) 0x0025
3ae0 (2) 0x0025
3bd0 (4) the number in parentheses indicates the order in which it was allocated, if you care.
...And 5 more matches
TimerFirings logging
-991946880[7f46c
365ba00]: [6775] fn timer (slack 100 ms): layeractivitytracker -991946880[7f46c
365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c
365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c
365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1
34064
3584[7f46c
365ec00]: [6775] obs time...
... -991946880[7f46c
365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 7116
37568[7f
3219c48000]: [68
35] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:72
31 7116
37568[7f
3219c48000]: [68
35] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:942
3 these js timers are annotated with [content] and show the javascript s...
... 20824
35840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
...And 5 more matches
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 ssl
3 sessions.
... extern pruint
32 ssl_sid_timeout; (the ssl2 session lifetime) extern pruint
32 ssl
3_sid_timeout; (the ssl
3 session lifetime) each of these variables applied to both client and server sessions.
... so, ssl protocol code that wanted to cache a sid would do these steps, whether for client or for server: for ssl2: sid->lastaccesstime = sid->creationtime = ssl_time(); sid->expirationtime = sid->creationtime + ssl_sid_timeout; (*ss->sec.cache)(sid); for ssl
3: sid->lastaccesstime = sid->creationtime = ssl_time(); sid->expirationtime = sid->creationtime + ssl
3_sid_timeout; (*ss->sec.cache)(sid); the cache api was defined such that the caller must set creationtime properly, and may set expirationtime to the desired value or to zero.
...And 5 more matches
Overview of NSS
nss
3.x has been certified on 18 platforms.
... interoperability and open standards you can use nss to support a range of security standards in your application, including the following: ssl v
3.
... tls v1.
3 (rfc 8446), tls v1.2 (rfc 5246), tls v1.1 (rfc 4
346), tls v1 (rfc 2246).
...And 5 more matches
NSS tools : crlutil
please contribute to the initial review in mozilla nss bug 8
36477[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.
... -p dbprefix specify the prefix used on the nss security database files (for example, my_cert8.db and my_key
3.db).
...this formatting follows rfc #111
3.
...And 5 more matches
JS_DefineElement
syntax /* added in spidermonkey
38 (jsapi
32) */ bool js_defineelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(j...
...scontext *cx, js::handleobject obj, uint
32_t index, int
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint
32_t index, uint
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint
32_t index, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); /* obsolete since jsapi
32 */ js_defineelement(jscontext *cx, jsobject *obj, uint
32_t index, jsval value, jspropertyop getter, jsstrictpropertyop setter, unsigned attr...
... index uint
32_t the index of the property to define.
...And 5 more matches
Shell global objects
this page lists variables and functions available on spidermonkey 5
3.
...if options is given, it may have any of the following properties: samezoneas the compartment will be in the same zone as the given object (defaults to a new zone) invisibletodebugger the global will be invisible to the debugger (default false) principal if present, its value converted to a number must be an integer that fits in
32 bits; use that as the new compartment's principal.
... stackpointerinfo() return an int
32 value which corresponds to the offset of the latest stack pointer, such that one can take the differences of 2 to estimate a frame-size.
...And 5 more matches
Mozilla internal string guide
int pos = 0; while (cur < end) { if (char16_t('\t') != *cur) { ++pos; ++cur; } else { len +=
3; data.setlength(len); // after setlength, read `cur` and `end` again cur = data.beginwriting() + pos; end = data.endwriting(); // move the remaining data over if (pos < len - 1) memmove(cur + 4, cur + 1, (len - 1 - pos) * sizeof(char16_t)); // fill the tab with spaces *cur = char16_t(' '); *(cur + 1) = char16_t(' '); *(cur + 2...
...) = char16_t(' '); *(cur +
3) = char16_t(' '); pos += 4; cur += 4; } } } if a string buffer becomes smaller while writing it, use setlength to inform the string class of the new size: /** * remove every tab character from `data` */ void removetabs(nsastring& data) { int len = data.length(); char16_t* cur = data.beginwriting(); char16_t* end = data.endwriting(); while (cur < end) { if (char16_t('\t') == *cur) { len -= 1; end -= 1; if (cur < end) memmove(cur, cur + 1, (end - cur) * sizeof(char16_t)); } else { cur += 1; } } data.setlength(len); } note that using beginwriting() to make a string longer is not ok.
...utf-8 is capable of representing the entire unicode character repertoire, and it efficiently maps to utf-
32.
...And 5 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox
3) method overview void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint
32 width, in pruint
32 height, in pruint
32 stride, in pruint
32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint
32 width, in pruint
32 height, in pruint
32 stride, in pruint
32 inputformat, in astring outputoptions); ...
... void startimageencode(in pruint
32 width, in pruint
32 height, in pruint
32 inputformat, in astring outputoptions); constants possible values for input format (note that not all image formats support saving alpha channels): constant value description input_format_rgb 0 input is rgb each pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) input_format_rgba 1 input is rgb each pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... methods addimageframe() void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint
32 width, in pruint
32 height, in pruint
32 stride, in pruint
32 frameformat, in astring frameoptions ); parameters data list of bytes in the format specified by inputformat.
...And 5 more matches
nsIBinaryOutputStream
inherits from: nsioutputstream last changed in gecko 1.7 method overview void setoutputstream(in nsioutputstream aoutputstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write
32(in pruint
32 a
32); void write64(in pruint64 a64); void writeboolean(in prbool aboolean); void writebytearray([array, size_is(alength)] in pruint8 abytes, in pruint
32 alength); void writebytes(alength)] in string astring, in pruint
32 alength); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); void writeutf8z(in wstring astr...
... write
32() writes a
32-bit integer to the stream.
... void write
32( in pruint
32 a
32 ); parameters a
32 the
32-bit integer to write to the stream.
...And 5 more matches
nsIDownloadManager
inherits from: nsisupports last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) implemented by: @mozilla.org/download-manager;1.
... download_canceled
3 the user canceled the download.
...(see bug 41668
3) download_type_download 0 the download type used by adddownload.
...And 5 more matches
nsIIOService
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 uint
32_t asecurityflags, in uint
32_t acontentpolicytype); nsichannel newchannelfromuri(in nsiuri auri); obsolete since gecko 48 nsichannel newchannelfromuri2(in nsiuri auri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in unsigned long asecurityflags, in unsigned long acontentpolicytype); nsichannel newchannelfromuriwit...
...hloadinfo(in nsiuri auri, in nsiloadinfo aloadinfo); nsichannel newchannelfromuriwithproxyflags2(in nsiuri auri, in nsiuri aproxyuri, in uint
32_t aproxyflags,in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint
32_t asecurityflags, in uint
32_t acontentpolicytype); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description offline boolean returns true if networking is in "offline" mode.
... extractscheme() utility to extract the scheme from a url string, consistently and according to spec (see rfc
3986).
...And 5 more matches
nsIMsgDBHdr
method overview astring getproperty(in string propertyname); void setproperty(in string propertyname, in astring propertystr); void setstringproperty(in string propertyname, in string propertyvalue); string getstringproperty(in string propertyname); unsigned long getuint
32property(in string propertyname); void setuint
32property(in string propertyname, in unsigned long propertyval); void markread(in boolean read); void markflagged(in boolean flagged); void markhasattachments(in boolean hasattachments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned lo...
...ences(in string references); acstring getstringreference(in long refnum); void setrecipientsarray(in string names, in string addresses,in unsigned long numaddresses); void setcclistarray(in string names, in string addresses,in unsigned long numaddresses); void setbcclistarray(in string names, in string addresses,in unsigned long numaddresses);new in thunderbird
3.1 [noscript] void getauthorcollationkey(out octetptr key, out unsigned long len); [noscript] void getsubjectcollationkey(out octetptr key, out unsigned long len); [noscript] void getrecipientscollationkey(out octetptr key, out unsigned long len); attributes attribute type description isread boolean readonly: indicates whether or not...
... bcclist string [new in .
31] indicates the bcc list of this message; the equivalent header is the bcc: header.
...And 5 more matches
nsIScriptError
66 introduced gecko 1.0 inherits from: nsiconsolemessage last changed in gecko 1.9 (firefox
3) implemented by: @mozilla.org/scripterror;1.
... method overview void init(in wstring message, in wstring sourcename, in wstring sourceline, in pruint
32 linenumber, in pruint
32 columnnumber, in pruint
32 flags, in string category); void initwithwindowid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint
32 linenumber, in pruint
32 columnnumber, in pruint
32 flags, in string category, in unsigned long long innerwindowid); autf8string tostring(); attributes attribute type description ...
... columnnumber pruint
32 the column number where the error occurred.
...And 5 more matches
Xptcall Porting Status
status status platform contributors and <font color="red">?</font> possible contributors notes <font color="white">done</font> win
32 x86 john bandhauer <jband@netscape.com> win
32 <font color="white">done</font> linux x86 john bandhauer <jband@netscape.com> ulrich drepper <drepper@cygnus.com> unix <font color="white">done</font> freebsd and netbsd x86 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as linux 86 code) <font color="white">done</font> bsd/os x86 bert driehuis <bert_...
... <font color="white">done</font> os/2 john fairhurst <mjf
35@cam.ac.uk> i never heard exactly who did what.
...it is a variation of the iris port (only targeted for win
32).
...And 5 more matches
Using js-ctypes
on windows, for example, you might load the system user
32 library like this: var lib = ctypes.open("user
32.dll"); on mac os x, you can load the core foundation library from the core foundation framework like this: var corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); the returned object is a library object that you use to declare functions and data types for use with the loaded library.
... calling windows routines this example demonstrates how to use ctypes to call a win
32 api.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("c:\\windows\\system
32\\user
32.dll"); /* declare the signature of the function we are going to call */ var msgbox = lib.declare("messageboxw", ctypes.winapi_abi, ctypes.int
32_t, ctypes.int
32_t, ctypes.jschar.ptr, ctypes.jschar.ptr, ctypes.int
32_t); var mb_ok = 0; var ret = msgbox(0, "hello world", "title", mb_ok); lib.close(); in line
3, the user
32.dll system library is loaded.
...And 5 more matches
URLs - Plugins
for more information, see rfc
3986, "uniform resource identifier (uri): generic syntax", and the iana uri scheme registry.
... warning: in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1), npn_geturlnotify() does not notify the plug-in if notifydata is null.
... see bug 6
38
367 for details.
...And 5 more matches
Network request details - Firefox Developer Tools
if you 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.11
3 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-dis...
...position", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "67
3" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "date", "value": "tue, 11 jun 2019 1
3:01:
39 gmt" }, { "name": "mediawiki-login-suppressed", "value": "true" }, { "name": "p
3p", "value": "cp=\"this is not a p
3p policy!
... see https://en.wikipedia.org/wiki/special:centralautologin/p
3p for more info.\"" }, { "name": "server", "value": "mw1
316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106
384710; 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-2019;wmf-last-access-global=11-jun-2019;https=1" }...
...And 5 more matches
Drawing shapes with canvas - Web APIs
<html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(75, 75, 50, 0, math.pi * 2, true); // outer circle ctx.moveto(110, 75); ctx.arc(75, 75,
35, 0, math.pi, false); // mouth (clockwise) ctx.moveto(65, 65); ctx.arc(60, 65, 5, 0, math.pi * 2, true); // left eye ctx.moveto(95, 65); ctx.arc(90, 65, 5, 0, math.pi * 2, true); // right eye ctx.stroke(); } } the result looks like this: screenshotlive sample if you'd like to see the connecting lines, you can remove the lines that call moveto().
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="200"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); for (var i = 0; i < 4; i++) { for (var j = 0; j <
3; j++) { ctx.beginpath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // arc radius var startangle = 0; // starting point on circle var endangle = math.pi + (math.pi * j) / 2; // end point on circle var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise ctx.arc(x, y, radius, star...
...="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // quadratric curves example ctx.beginpath(); ctx.moveto(75, 25); ctx.quadraticcurveto(25, 25, 25, 62.5); ctx.quadraticcurveto(25, 100, 50, 100); ctx.quadraticcurveto(50, 120,
30, 125); ctx.quadraticcurveto(60, 120, 65, 100); ctx.quadraticcurveto(125, 100, 125, 62.5); ctx.quadraticcurveto(125, 25, 75, 25); ctx.stroke(); } } screenshotlive sample cubic bezier curves this example draws a heart using cubic bézier curves.
...And 5 more matches
Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa
3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server.
... <html> <body onload="draw();"> <canvas id="canvas" width="180" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(
30, 96); ctx.lineto(70, 66); ctx.lineto(10
3, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5
395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
...the image is scaled to one third of its original size, which is 50x
38 pixels.
...And 5 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
there are rules in the browser engine that decide which whitespace characters are useful and which aren’t — these are specified at least in part in css text module level
3, and especially the parts about the css white-space property and whitespace processing details, but we also offer an easier explanation below.
... <body>⏎ ⇥<div>◦◦hello◦◦</div>⏎ ⏎ ◦◦◦<div>◦◦world!◦◦</div>◦◦⏎ </body> we have
3 text nodes that contain only whitespace, one before the first <div>, one between the 2 <divs>, and one after the second <div>.
... </div> </body> we can summarize how the whitespace here is handled as follows (the may be some slight differences in exact behavior between browsers, but this basically works): because we’re inside a block formatting context, everything must be a block, so our
3 text nodes also become blocks, just like the 2 <div>s.
...And 5 more matches
FontFaceSetLoadEvent - Web APIs
specifications specification status comment css font loading module level
3the definition of 'fontfacesetloadevent' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimentalchrome full support
35edge full support ≤79firefox full support yesie ?
... webview android no support nochrome android full support
35firefox android full support yesopera android full support 22safari ios ?
...And 5 more matches
HTMLTextAreaElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...And 5 more matches
KeyboardEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="2
31" y="1" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates ...
... dom_key_location_numpad 0x0
3 the key is located on the numeric keypad, or is a virtual key associated with the numeric keypad if there's more than one place the key could originate from.
...And 5 more matches
Inputs and input sources - Web APIs
properties of input sources each individual xrinputsource has a set of properties that describe the input's available axes and buttons, which hand the user's holding it in, and how the input source is used to handle targeting within the
3d space.
... this means that if you use a
3d model to represent your controller, your player's avatar's hands, or anything else representative of the controller's position in space, the gripspace can be used as the transform matrix that correctly positions and orients the object's model for rendering.
... profile strings each input source can have zero or more input profile name strings, found in the array profiles, each of which describes a preferred visual representation of the input source within the
3d world as well as how the input source functions.
...And 5 more matches
ARIA: grid role - Accessibility
<th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday">w</th> <th role="columnheader" aria-label="thursday">t</th> <th role="columnheader" aria-label="friday">f</th> <th role="columnheader" aria-label="saturday">s</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <th scope="row" role="rowheader">week
35</th> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>
30</td> <td>
31</td> <td role="gridcell" tabindex="-1">1</td> </tr> <tr role="row"> <th scope="row" role="rowheader">week
36</th> <td role="gridcell" tabindex="-1"> 2 </td> <td role="gridcell" tabindex="-1">
3 </td> <td role="gridcell" t...
...abindex="-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"> 1
3 </td> <td role="gridcell" tabindex="-1"> 14 </td> <td role="gridcell" tabindex="-1"> ...
... 15 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week
38</th> <td role="gridcell" tabindex="-1"> 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"> 2
3 </td> <td role="gridcell" tabindex="-1"> 24 </td> <td role="gridcell" tabindex="-1"> ...
...And 5 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.
...the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding:
30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } 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; padd...
...ing:
30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
...And 5 more matches
-webkit-border-before - CSS: Cascading Style Sheets
the transparent keyword maps to rgba(0,0,0,0).animation typediscrete formal syntax <'border-width'> | <'border-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 5 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 5 more matches
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{
3} [ / <alpha-value> ]?
... ) | rgb( <number>{
3} [ / <alpha-value> ]?
... ) | rgb( <percentage>#{
3} , <alpha-value>?
...And 5 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for example linux oses need the latest linux freetype version, and macos prior to 10.1
3 does not support variable fonts.
...so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or
30 different font files to represent a complete typeface (it could be several times that for a large typeface that has different widths as well).
...the w
3c has undertaken mapping them to existing css attributes, and in one case introduced a new one, which you'll see below.
...And 5 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
.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; } .box
3 { grid-column-start: content-start; grid-row-start: main-start; } .box4 { 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="box
3">three</div> <div class="box4">four</div> </div> everything else about line-based placement still works in the s...
... "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"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper > div.overlay { z-index: 10; grid-column: main-start / main-end; grid-row: hd-start / ft-end; border: 4px solid rgb(92,148,1
3); background-color: rgba(92,148,1
3,.4); color: rgb(92,148,1
3); font-size: 150%; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> <div class="overlay">overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named...
...my next item will be placed from the 7th line named col-start and span
3 lines.
...And 5 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
html "0.c" - from january 2
3, 1991 though november 2
3, 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 24, 199
3 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.
...t) html version 2 level 2 this is the default and includes and permits all html level 2 functions and elements and attributes html version 2 strict level 2 this excludes these depreciated elements and also forbids such constructs as nesting a header (<h*> element) within a link (<a> element), or having a forms <input> element which is not within a block level element such as <p> html version
3.2 <nextid> has vanished altogether, never to be heard from again.
...the heading for each of the four sections would be assigned name values of "z0", "z1", "z2", and "z
3".
...And 5 more matches
Evolution of HTTP - HTTP
http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and
3d.
... at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows
3.1) 200 ok date: tue, 15 nov 1994 08:12:
31 gmt server: cern/
3.0 libwww/2.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 1994 08:12:
32 gmt server: cern/
3.0...
...0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:
30 gmt etag: "547fa7e
369ef560
31dd
3bff2ace9fc08
32eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 2016 00:59:
33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */...
...And 5 more matches
Object.assign() - JavaScript
object.assign({}, obj1); console.log(json.stringify(obj2)); // { "a": 0, "b": { "c": 0}} obj1.a = 1; console.log(json.stringify(obj1)); // { "a": 1, "b": { "c": 0}} console.log(json.stringify(obj2)); // { "a": 0, "b": { "c": 0}} 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 obj
3 = json.parse(json.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(json.stringify(obj
3)); // { "a": 0, "b": { "c": 0}} } test(); merging objects const o1 = { a: 1 }; const o2 = { b: 2 }; cons...
...t o
3 = { c:
3 }; const obj = object.assign(o1, o2, o
3); console.log(obj); // { a: 1, b: 2, c:
3 } console.log(o1); // { a: 1, b: 2, c:
3 }, target object itself is changed.
... merging objects with same properties const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o
3 = { c:
3 }; const obj = object.assign({}, o1, o2, o
3); console.log(obj); // { a: 1, b: 2, c:
3 } the properties are overwritten by other objects that have the same properties later in the parameters order.
...And 5 more matches
Proxy - JavaScript
the very simple trap in handler2 above redefines all property accessors: console.log(proxy2.message1); // world console.log(proxy2.message2); // world with the help of the reflect class we can give some accessors the original behavior and redefine others: const target = { message1: "hello", message2: "everyone" }; const handler
3 = { get: function (target, prop, receiver) { if (prop === "message2") { return "world"; } return reflect.get(...arguments); }, }; const proxy
3 = new proxy(target, handler
3); console.log(proxy
3.message1); // hello console.log(proxy
3.message2); // world constructor proxy() creates a new proxy object.
... examples basic example in this simple example, the number
37 gets returned as the default value when the property name is not in the object.
... obj[prop] :
37; } }; const p = new proxy({}, handler); p.a = 1; p.b = undefined; console.log(p.a, p.b); // 1, undefined console.log('c' in p, p.c); // false,
37 no-op forwarding proxy in this example, we are using a native javascript object to which our proxy will forward all operations that are applied to it.
...And 5 more matches
String.prototype.normalize() - JavaScript
the code point for "n" (u+006e) followed by the code point for the combining tilde (u+0
30
3).
... let string1 = '\u00f1'; let string2 = '\u006e\u0
30
3'; console.log(string1); // ñ console.log(string2); // ñ however, since the code points are different, string comparison will not treat them as equal.
... let string1 = '\u00f1'; // ñ let string2 = '\u006e\u0
30
3'; // ñ console.log(string1 === string2); // false console.log(string1.length); // 1 console.log(string2.length); // 2 the normalize() method helps solve this problem by converting a string into a normalized form common for all sequences of code points that represent the same characters.
...And 5 more matches
Spread syntax (...) - JavaScript
function myfunction(v, w, x, y, z) { } const args = [0, 1]; myfunction(-1, ...args, 2, ...[
3]); apply for new operator when calling a constructor with new it's not possible to directly use an array and apply() (apply() does a [[call]] and not a [[construct]]).
... 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.
...(the same is true with object.assign() and spread syntax.) const a = [[1], [2], [
3]]; const b = [...a]; b.shift().shift(); // 1 // oh no!
...And 5 more matches
JavaScript typed arrays - JavaScript
typed array views typed array views have self-descriptive names and provide views for all the usual numeric types like int8, uint
32, float64 and so forth.
... type value range size in bytes description web idl type equivalent c type int8array -128 to 127 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -
32768 to
32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 655
35 2 16-bit unsigned integer unsigned short uint16_t int
32array -214748
3648 to 214748
3647 4
32-bit two's complement signed integer long int
32_t uint
32array 0 to 4294967295 4
32-bit unsigned integer unsigned long uint
32_t ...
... float
32array 1.2×10-
38 to
3.4×10
38 4
32-bit ieee floating point number (7 significant digits e.g., 1.12
3456) unrestricted float float float64array 5.0×10-
324 to 1.8×10
308 8 64-bit ieee floating point number (16 significant digits e.g., 1.12
3...15) unrestricted double double bigint64array -26
3 to 26
3-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) dataview the dataview is a low-level interface that provides a getter/setter api to read and write arbitrary data to the buffer.
...And 5 more matches
d - SVG: Scalable Vector Graphics
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,
30 a 20,20 0,0,1 50,
30 a 20,20 0,0,1 90,
30 q 90,60 50,90 q 10,60 10,
30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.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...
... formula: po′ = pn = {xo, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w
3.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 smoo...
...And 5 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.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.
...rix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + 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.w
3.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 = 140 newy = b * oldx + d * oldy + f = 1 * 40 +
3 * 10 + 40 = 110 bottom left 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 = 140 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 5 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 + k
3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k
3 and k4 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 »...
... presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k
3 k4 dom interface this element implements the svgfecompositeelement interface.
... example svg <svg width="
330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters for each of the six compositing operators.
...And 5 more matches
Communicating With Other Scripts - Archive of obsolete content
page scripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox
31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview.
... see the section below on using postmessage() before firefox
31.
...pt> <button onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script: // listen.js window.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using postmessage() before firefox
31 if your add-on is running in a version of firefox before firefox
31, then your content script can't access the postmessage() or addeventlistener() apis using window, but must access them using document.defaultview instead.
...And 4 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
first a basic line box containing text, shown in figure
3.
... the most crucial part of figure
3 is the baseline (represented by the blue line), and its placement within the line box.
...in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav
3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table.
...And 4 more matches
In-Depth - Archive of obsolete content
a list of the different operating system colours can be found on the w
3c's web site.
...all of the properties follow the w
3c's standards for vendor extensions, which is why they all begin with -moz.
...other sites which list mozilla specific css properties xulplanet.com [dead link, 26.0
3.1
3] mozilla-prefixed properties on the standard track 26.0
3.1
3 -moz-appearance makes a widget look like it's from your operating system.
...And 4 more matches
Space Manager Detailed Design - Archive of obsolete content
nd) { mfloatdamage.includeinterval(aintervalbegin + my, aintervalend + my); } prbool intersectsdamage(nscoord aintervalbegin, nscoord aintervalend) { return mfloatdamage.intersects(aintervalbegin + my, aintervalend + my); } #ifdef debug /** * dump the state of the spacemanager out to a file */ nsresult list(file* out); void sizeof(nsisizeofhandler* ahandler, pruint
32* aresult) const; #endif private: // structure that maintains information about the region associated // with a particular frame struct frameinfo { nsiframe* const mframe; nsrect mrect; // rectangular region frameinfo* mnext; frameinfo(nsiframe* aframe, const nsrect& arect); #ifdef ns_build_refcnt_logging ~frameinfo(); #endif }; // doubly linke...
...ing allocated and returned for the // right part // // does not insert the new band rect into the linked list bandrect* splithorizontally(nscoord aright); // accessor functions prbool isoccupiedby(const nsiframe*) const; void addframe(const nsiframe*); void removeframe(const nsiframe*); prbool hassameframelist(const bandrect* abandrect) const; print
32 length() const; }; // circular linked list of band rects struct bandlist : bandrect { bandlist(); // accessors prbool isempty() const {return pr_clist_is_empty((prcliststr*)this);} bandrect* head() const {return (bandrect*)pr_list_head(this);} bandrect* tail() const {return (bandrect*)pr_list_tail(this);} // operations void append(bandrect* abandrect)...
... nsbanddata& aavailablespace) const; nsiframe* const mframe; // frame associated with the space manager nscoord mx, my; // translation from local to global coordinate space bandlist mbandlist; // header/sentinel for circular linked list of band rects frameinfo* mframeinfomap; nsintervalset mfloatdamage; static print
32 scachedspacemanagercount; static void* scachedspacemanagers[ns_space_manager_cache_size]; nsspacemanager(const nsspacemanager&); // no implementation void operator=(const nsspacemanager&); // no implementation }; public api life cycle the constructor requires a presentation shell, used for arena allocations mostly, and a frame that this space manager is rooted on.
...And 4 more matches
Running Tamarin acceptance tests - Archive of obsolete content
$ cd tamarin-redux/test/acceptance $ export asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:
37:06.410676 current configuration: x64-mac-tvm-release avm version: 5260:6d1899261bac executing 25
32 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 25
32 running abcasm/abs_helper.as skipping...
... reason: 25
31 running abcasm/adhoc.abs skipping...
... reason: inconsistencies in different debug output, need to implement regex matching of diffs 2527 running abcasm/branchtocommon.abs 25
30 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_476556.abs 2524 running abcasm/bug_491056.abs ...
...And 4 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
examples would be flash 6r47 on windows, which consists of a dll (called npswf
32.dll) and an xpt file for scriptability (called flashplayer.xpt).
...c:\winnt\system
32\ directory var windirectory = getfolder("win system"); // create the folder c:\winnt\system
32\myplugin var dllwin
32folder = getfolder("file:///", windirectory+"\\myplugin\\"); //install dll to c:\windows folder copyerr = addfile("", version, plugin_file, dllwin
32folder, null); if (copyerr != 0) { logcomment("first install:"+copyerr); return copyerr; } // install the x...
...pt file to c:\winnt\system
32\myplugin folder var xptwin
32folder = getfolder("file:///", windirectory+"\\myplugin\\"); copyerr = addfile("", version, component_file, xptwin
32folder, null); if (copyerr != 0) { logcomment("first install:"+copyerr); return copyerr; } once the secondary installation has taken place, the win
32 registry keys have to be updated to indicate information about where the secondary install location is, so that browsers can discover it.
...And 4 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
contents of a certificate the contents of certificates are organized according to the x.509 v
3 certificate specification, which has been recommended by the international telecommunications union (itu), an international standards body, since 1988.
...this data should be base-64 encoded, as described by rfc 111
3.
... the certificate information is followed by this line: -----end certificate----- distinguished names an x.509 v
3 certificate binds a distinguished name (dn) to a public key.
...And 4 more matches
New in JavaScript - Archive of obsolete content
javascript 1.1 version shipped in netscape navigator
3.0.
... javascript 1.
3 version shipped in netscape navigator 4.06-4.7x.
... standardization work to be compliant with ecma-262
3rd edition.
...And 4 more matches
Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the xforms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox
3.5.
...the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last release: 0.8.5ff2 firefox
3.0 gecko 1.9.0 cvs, branch head not developed any more last release: 0.8.5ff
3 firefox
3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox
3.5 any more not supported firefox
3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox
3.6 any more not developed any more last release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-central xforms s...
...firefox
3.5 and up: get the source code if you want to build xforms for firefox up to
3.0, you already have the required source code, it's part of your cvs checkout.
...And 4 more matches
Examples - Game development
dead trigger 2 classic zombie splatter action, made with unity
3d.
... angry bots a futuristic aliens-esque isometric
3rd person shooter demo, made with unity
3d.
... back to candyland a match-
3 (candy crush) style game.
...And 4 more matches
Audio for Web games - Game development
var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp
3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop.
... here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp
3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="17">1</button> <button data-start="14" data-stop="15">2</button> <button data-start="12" data-stop="1
3">
3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">5</button> <button data-start="6" data-stop="7">6</button> <button data-start="4" data-stop="5">7</...
...button> <button data-start="2" data-stop="
3">8</button> <button data-start="0" data-stop="1">9</button> now we have buttons with start and stop times in seconds.
...And 4 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html 5, css
3, the w
3c dom, xml, javascript, and others.
...dom
3 support is also planned for a future release.
... xml 1.0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition
3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...And 4 more matches
How do you set up a local testing server? - Learn web development
if you are a windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "
3.xxx".
... on the first installer page, make sure you check the "add python
3.xxx to path" checkbox.
... enter the command to start up the server in that directory: # if python version returned above is
3.x python
3 -m http.server # on windows try "python" instead of "python
3", or "py -
3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port 8000.
...And 4 more matches
How to build custom form controls - Learn web development
*/ box-shadow: 0 0
3px 1px #227755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control.
...*/ background : #f0f0f0; background : linear-gradient(0deg, #e
3e
3e
3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
... .select .option { padding: .2em .
3em; /* 2px
3px */ } .select .highlight { background: #000; color: #ffffff; } so here's the result with our three states: basic state active state open state check out the source code bringing your control to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually wor...
...And 4 more matches
Making decisions in your code — conditionals - Learn web development
the following example executes the code inside only if both or statements return true, meaning that the overall and statement will return true: if ((x === 5 || y >
3 || z <= 10) && (loggedin || username === 'steve')) { // run the code } a common mistake when using the logical or operator in conditional statements is to try to state the variable whose value you are checking once, and then give a list of values it could be to return true, separated by || (or) operators.
... as many other cases (bullets
3–5) as you like.
... the keyword default, followed by exactly the same code pattern as one of the cases (bullets
3–5), except that default does not have a choice after it, and you don't need to break statement as there is nothing to run after this in the block anyway.
...And 4 more matches
Arrays - Learn web development
for example: let sequence = [1, 1, 2,
3, 5, 8, 1
3]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays.
...so for example: let sequence = [1, 1, 2,
3, 5, 8, 1
3]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); } you'll learn about loops properly later on (in our looping code article), but briefly, this code is saying: start looping at item number 0 in the array.
... just below the // number
3 comment we want you to write a line of code that splits the current array item (name:price) into two separate items, one containing just the name and one containing just the price.
...And 4 more matches
Useful string methods - Learn web development
try this: browsertype.indexof('zilla'); this gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so
3 characters in) inside "mozilla".
...try the following: browsertype.slice(0,
3); this returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted.
...for example: man67584758
3748sjt567654;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.
...And 4 more matches
Beginning our React todo list - Learn web development
<span>active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading">
3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat ...
... we have our
3 tasks, arranged in an un-ordered list.
... implementing our styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline:
3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; ...
...And 4 more matches
Getting started with Svelte - Learn web development
it should take you about
30 minutes to complete.
...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: 240px; margin: 0 auto; } h1 { color: #ff
3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff
3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
...And 4 more matches
Working with Svelte stores - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494
366b179c87
3959400
39?version=
3.2
3.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.
... update the <script> section of your alert.svelte component like so: <script> import { ondestroy } from 'svelte' import { alert } from '../stores.js' export let ms =
3000 let visible let timeout const onmessagechange = (message, ms) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty visible = false } else { visible = true // show alert if (ms > 0) timeout = settimeout(() => visible = false, ms) // and hide it after ms milliseconds } } ...
... $: 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.w
3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.4
32 0c1.
34 0 2.01.912 2.01 1.957 0 1.
305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.4
36 10.67 0 12.4
32 0zm8.
309 20c-1.058 0-1.8
33-.652-1.09
3-
3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.
317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.5
31-
3.467 6.801-
3.467 1.057 0 1.2
33 1.27
3.705
3.2
3l-1.
391 5.
352c-.246.945-.141 1.271.106 1.271.
317 0 1.
357-.
392 2.
379-1.207l.6.814c12.098 19.02 9...
...And 4 more matches
Handling common JavaScript problems - Learn web development
try inserting the following line just below line
31 (bolded above): console.log('response value: ' + superheroes); refresh the page in the browser, and you will get an output in the console of "response value:", plus the same error message we saw before the console.log() output shows that the superheroes object doesn't appear to contain anything.
... webgl api for real
3d graphics.
...for example, the webgl api is really complex and challenging to use when you write it directly, so the three.js library (and others) is built on top of webgl and provides a much easier api for creating common
3d objects, lighting, textures, etc.
...And 4 more matches
Creating reftest-based unit tests
for example, the html 4.01 specification at the w
3c specifies that text inside of a <blockquote> will be indented, but it does not specify the number of pixels of the indentation.
...if your use python
3 as default you must edit the first line of mach.
...sorry about this, but the released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug
369809.
...And 4 more matches
Debugging on Windows
by default it will be: vc++ 6.0: c:\program files\microsoft visual studio\common\msdev98\bin\autoexp.dat vc++ 7.0: c:\program files\microsoft visual studio .net 200
3\common7\packages\debugger\autoexp.dat the file has information about the format in the beginning, and after a little practice you should be well on your way.
...l studio returns the value of stdout, which can be used with various debugging methods (such as nsgenericelement::list) that take a file* param: debug.evaluatestatement {,,msvcr80d}(&__iob_func()[1]) (alternatively you can evaluate {,,msvcr80d}(&__iob_func()[1]) in the quickwatch window) similarly, you can open a file on the disk using fopen: >debug.evaluatestatement {,,msvcr80d}fopen("c:\\12
3", "w") 0x10
311dc0 { ..snip..
... } >debug.evaluatestatement ((nsgenericelement*)0x0
3f0e710)->list((file*)0x10
311dc0, 1) <void> >debug.evaluatestatement {,,msvcr80d}fclose((file*)0x10
311dc0) 0x00000000 note that you may not see the debugging output until you flush or close the file handle.
...And 4 more matches
Simple Thunderbird build
do not copy mapi.h, it is already in c:\program files (x86)\windows kits\10\include\10.0.171
34.0\um\mapi.h.
... as of april 2019, 10.0.171
34.0 is needed to compile thunderbird.
... assuming standard installation locations, copy these 17 files to c:\program files (x86)\windows kits\10\include\10.0.171
34.0\shared.
...And 4 more matches
Localization prerequisites
perl 5.6 or higher older perl versions may work if you upgrade file::spec to version 0.8 gnu make
3.79.1 or higher.
... autoconf-2.1
3 - autoconf 2.5x will not work.
... zip 2.
3 (or higher) mercurial 1.2 or higher recommended.
...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
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 "-//w
3c//dtd html 4.01 transitional//en" "http://www.w
3.org/tr/html4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doctype declaration.
... some proprietary document objects such as document.all and document.layers are not part of the w
3c dom and are not supported in mozilla.
...the point of having a common api (the w
3c dom) is interoperability, and checking for a particular browser defeats that purpose.
...And 4 more matches
Power profiling overview
core i
3/i5/i7) have one package.
...it includes various components including the l
3 cache, memory controller, and, for processors that have one, the integrated gpu.
... note: the acpi standard specifies four states, c0, c1, c2 and c
3.
...And 4 more matches
JSS Provider Notes
contents signed jar file installing the provider specifying the cryptotoken supported classes what's not supported signed jar file jss
3.2 implements several jce (java cryptography extension) algorithms.
...netscape has this approval and signs the official builds of jss
32.jar.
... cipher supported algorithms notes aes des desede (des
3 ) rc2 rc4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding ...
...And 4 more matches
JSS 4.4.0 Release Notes
distribution information the hg tag is jss_4_4_20170
31
3.
... jss 4.4.0 requires netswork security services (nss)
3.29.1 and netscape portable runtime (nspr) 4.1
3.1 or newer.
...in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa
3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8.
...And 4 more matches
NSS Key Log Format
note: starting with nss
3.24 (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).
... <clientrandom> is
32 bytes random value from the client hello message, encoded as 64 hexadecimal characters.
... the following labels are defined, followed by a description of the secret: rsa: 48 bytes for the premaster secret, encoded as 96 hexadecimal characters (removed in nss
3.
34) client_random: 48 bytes for the master secret, encoded as 96 hexadecimal characters (for ssl
3.0, tls 1.0, 1.1 and 1.2) client_early_traffic_secret: the hex-encoded early traffic secret for the client side (for tls 1.
3) client_handshake_traffic_secret: the hex-encoded handshake traffic secret for the client side (for tls 1.
3) server_handshake_traffic_secret: the hex-encoded handshake traffic secret for the server side (for tls 1.
3) client_traffic_secret_0: the first hex-encoded application traffic secret for the client side (for tls 1.
3) server_traffic_secret_0: th...
...And 4 more matches
Installing Pork
gcc 4.
3 should also work fairly well, but there may be 5 or so files that elsa can't parse.
... hg clone http://hg.mozilla.org/rewriting-and-analysis/pork/ cd pork hg clone http://hg.mozilla.org/rewriting-and-analysis/elsa ./configure make building mozilla with mcpp to build mozilla with mcpp to generate annotated .ii files, use the following configure command: ac_cv_visibility_hidden=no cc="gcc
34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that get passed to mcpp.
... building a
32-bit mcpp on a 64-bit system this is dark magic, and i hope i've got it right.
...And 4 more matches
Rhino overview
rhino 1.
3 and greater conform to edition
3 of the standard.
... rhino 1.6 and greater implement ecma-
357 ecmascript for xml (e4x).
... version 1.
3 and greater are ecma conformant.
...And 4 more matches
How to embed the JavaScript engine
ar *filename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx, global, script, strlen(script), filename, lineno, rval.address()); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey
31 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
... const char *filename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx, global, script, strlen(script), filename, lineno, &rval); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey
38 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the global object.
...# if you're using version other than spidermonkey
31, please change -lmozjs-xx to your version.
...And 4 more matches
JS_ConvertArguments
obsolete since jsapi
38this feature is obsolete.
... syntax bool js_convertarguments(jscontext *cx, const js::callargs &args, const char *format, ...); // added in spidermonkey
31 bool js_convertarguments(jscontext *cx, unsigned argc, jsval *argv, const char *format, ...); // obsolete since jsapi
30 name type description cx jscontext * the context in which to perform any necessary conversions.
...added in spidermonkey
31 argc unsigned the number of arguments to convert.
...And 4 more matches
JS_SetGCCallback
syntax void js_setgccallback(jsruntime *rt, jsgccallback cb, void *data); jsgccallback js_setgccallback(jscontext *cx, jsgccallback cb); // obsolete since jsapi 1
3 jsgccallback js_setgccallbackrt(jsruntime *rt, jsgccallback cb); // obsolete since jsapi 1
3 name type description cx jscontext * (for the old js_setgccallback) any jscontext.
... callback syntax typedef enum jsgcstatus { jsgc_begin, jsgc_end, jsgc_mark_end, // obsolete since jsapi 1
3 jsgc_finalize_end // obsolete since jsapi 1
3 } jsgcstatus; typedef void (* jsgccallback)(jsruntime *rt, jsgcstatus status, void *data); name type description cx jscontext * the context in which garbage collection is happening.
...callback related to finalization is separated to js_setfinalizecallback in jsapi 1
3.
...And 4 more matches
How to build a binary XPCOM component using Visual Studio
for example, xulrunner 1.8.0.4 which has a pre-built sdk at gecko-sdk-win
32-msvc-1.8.0.4.zip.
...then make the following tweaks: add "..\gecko-sdk\include" to additional include directories add "..\gecko-sdk\lib" to additional library directories add "nspr4.lib xpcom.lib xpcomglue_s.lib" to additional dependencies add "xp_win;xp_win
32″ to preprocessor definitions turn off precompiled headers (just to keep it simple) use a custom build step for the xpcom idl file (spawns xpidl-build.bat to process the idl with mozilla toolset, not midl) vc++ express project: xpcom-test.zip note: the project uses xpcom_glue.
...your xpcom component is made up of
3 parts: component interface described using idl.
...And 4 more matches
Components.utils.exportFunction
allowcallbacks: deprecated/redundant from firefox
34.
...this option is new in firefox
33.
... from firefox
34 onwards this option has no effect: the exported function is always able to accept callbacks as arguments.
...And 4 more matches
nsIAccessibleProvider
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) attributes attribute type description accessible nsiaccessible read only.
... xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x0000100
3 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup...
... 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x0000101
3 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
...And 4 more matches
nsIAppShell
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void ...
... methods create() obsolete since gecko 1.9 (firefox
3) creates an application shell.
... dispatchnativeevent() obsolete since gecko 1.9 (firefox
3) after event dispatch execute app specific code.
...And 4 more matches
nsIClassInfo
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview nsisupports gethelperforlanguage(in pruint
32 language); void getinterfaces(out pruint
32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null.
... flags pruint
32 specifies various binary properties of this class.
... implementationlanguage obsolete since gecko 40 pruint
32 the language type in which this class is implemented.
...And 4 more matches
nsICryptoHash
the hash algorithms supported are md2, md5, sha-1, sha-256, sha-
384, 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 sha
384 5 secure hash algorithm
384 sha512 6 secure hash algorithm 512 methods finish() completes the hash object and produces the actual hash data.
...passing pr_uint
32_max indicates that all data available will be used to update the hash.
...And 4 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only i...
...see bug 5
34698 and bug 526207.
... localport print
32 the local port number to which the channel is bound.
...And 4 more matches
nsIWebNavigation
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) this interface is implemented by the following components: * @mozilla.org/browser/shistory-internal;1 * @mozilla.org/browser/shistory;1 * @mozilla.org/embedding/browser/nswebbrowser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox
3.6), the @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead.
...id goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 655
35 this flag defines the range of bits that may be specified.
... load_flags_is_link
32 this flag specifies that the load should have the semantics of a link click.
...And 4 more matches
nsIWindowMediator
nsisimpleenumerator getenumerator(in wstring awindowtype); nsidomwindow getmostrecentwindow(in wstring awindowtype); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); nsisimpleenumerator getxulwindowenumerator(in wstring awindowtype); pruint
32 getzlevel(in nsixulwindow awindow); native code only!
... void removelistener(in nsiwindowmediatorlistener alistener); void setzlevel(in nsixulwindow awindow, in pruint
32 azlevel); native code only!
... zlevelbelow
3 place window below some window.
...And 4 more matches
nsIWindowsRegKey
this interface is highly win
32 specific.
...access_create_sub_key 0x00000004 access_enumerate_sub_keys 0x00000008 access_notify 0x00000010 access_read access_basic | access_query_value | access_enumerate_sub_keys | access_notify access_write access_basic | access_set_value | access_create_sub_key access_all access_read | access_write wow64_
32 0x00000200 wow64_64 0x00000100 type constants values for the type of a registry value.
... constant value description type_none 0 reg_none type_string 1 reg_sz type_binary
3 reg_binary type_int 4 reg_dword type_int64 11 reg_qword methods close() this method closes the key.
...And 4 more matches
nsMsgViewCommandType
last changed in gecko 1.9 (firefox
3) constants name value description markmessagesread 0 marks the selected messages as read.
... markmessagesunread 1 mark the selected messages as unread togglemessageread 2 toggle the read flag of the selected messages flagmessages
3 flag the selected messages.
... copymessages 1
3 copy the selected messages.
...And 4 more matches
XPIDL
lowing is the correspondence table: table 1: standard 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 int
32_t int
32_t* number long long int64_t int64_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 lon...
...g uint
32_t uint
32_t* number unsigned long long uint64_t uint64_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.
...ns[c]string, refptr<t>, or uint
32_t) string, wstring, [ptr] native and [ref] native are unsupported as element types.
...And 4 more matches
Mail composition back end
nsimessage *msgtoreplace, - if the delivery mode is set to nsmsgsaveasdraft, this is a pointer to the the nsimessage object for the message that needs to be replaced const char *attachment1_type, const char *attachment1_body, pruint
32 attachment1_body_length, - the full text of the first attachment is provided via `attachment1_type' `attachment1_body' and `attachment1_body_length'.
... ns_imethod onstartsending(const char *amsgid, - the message id for the message being sent pruint
32 amsgsize) = 0; - the total message size for the message being sent onprogress the onprogress interface is called with progress notification on the send operation.
... ns_imethod onprogress(const char *amsgid, - the message id for the message being sent pruint
32 aprogress, - the progress so far pruint
32 aprogressmax) = 0; - the maximum progress (aprogress should be used as a numerator and aprogressmax as a denominator for a message sent percentage) onstatus the onstatus gives the listener status updates for the current operation.
...And 4 more matches
Using the Multiple Accounts API
it was imported from mozilla.org and last updated in 200
3.
... (you'll have to pardon the crude drawing for now) account manager +- account 1 | +- 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 i...
... (you may have noticed that identities 2 and
3 are shared between a few accounts...more on that later) servers servers are show in the folder pane, and in any place where the user must browse or choose folders, such as the new folder dialog, search, filters, etc.
...And 4 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/, id=141) │ │ ├──1
3.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.8
3 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──
3.56 mb (00.71%) -- objects │ │ │ │ │ ├──
3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-h...
...eap/code/asm.js │ │ │ │ ├──2.4
3 mb (00.49%) -- shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.0
3 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.
31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- type-inference │ │ │ │ │ ├──0.66 mb (00.1
3%) ── type-scripts [2] │ │ │ │ │ ├──0.1
3 mb (00.0
3%) ── 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.8
3 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.0
3 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.2
3 mb (00.85%) -- layout │ │ │ │ ├──
3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ │ ├──0.05 mb (00.01%) ── rule-nodes │ │ │ ...
...And 4 more matches
Deprecated tools - Firefox Developer Tools
scratchpad scratchpad is deprecated as of firefox 70 (bug 1565
380), and will be removed as of firefox 72 (bug 151910
3).
... webide and connect page webide was deprecated as of firefox 69 disabled as of firefox 70 (bug 15
39451).
... removed as of firefox 71 (bug 15
39462).
...And 4 more matches
Edit fonts - Firefox Developer Tools
note: the updated font tools as shown in this article are available in firefox 6
3 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).
... fonts editor firefox 6
3 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics.
... example: if the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become
30px.
...And 4 more matches
AudioListener.setPosition() - Web APIs
the three parameters x, y and z are unitless and describe the listener's position in
3d space according to the right-hand cartesian coordinate system.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...And 4 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 1
30); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,1
30, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.arc(200, 20, 5, 0, 2 * math.pi); ctx.fill(); // control points ctx.beginpath(); ctx.fillstyle = 'red'; ctx.arc(200, 1
30, 5, 0, 2 * math.pi); // control point one c...
... html <canvas id="canvas"></canvas> javascript the arc begins at the point specified by moveto(): (2
30, 20).
... it is shaped to fit control points at (90, 1
30) and (20, 20), and has a radius of 50.
...And 4 more matches
Pixel manipulation with canvas - Web APIs
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 = 1024; 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 blueforcoord = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; ...
... or, if es2015 is appropriate: const xcoord = 50; const ycoord = 100; const canvaswidth = 1024; 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.
... <canvas id="canvas" width="
300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5
397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.geteleme...
...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:1
3.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: [1
3:14:1
3.481] hello, bob.
...[1
3:14:1
3.48
3] hello, bob.
...And 4 more matches
FileSystemDirectoryEntry - Web APIs
no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤
37alternate name full support ≤
37alternate name alternate name uses the non-standard name: directoryentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryentryfirefox android ...
... full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreatereader experimentalchrome full support 1
3edge full support 79firefox full support 50ie no support noopera no support nosafari full support ...
... 11.1webview android full support ≤
37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yesgetdirectory experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in fir...
...And 4 more matches
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="5...
...0" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="5...
...And 4 more matches
IDBFactory - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbfactorychrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
... full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcmpchrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
... 8samsung internet android full support 1.5databases experimentalchrome full support 71edge full support 79firefox no support nonotes no support nonotes notes see bug 9
34640.ie no support noopera full support 58safari no support nowebview android full support 71chrome android full support 71firefox android no support ...
...And 4 more matches
Node - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f...
...8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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 curr...
...And 4 more matches
PannerNode.setOrientation() - Web APIs
the three parameters x, y and z are unitless and describe a direction vector in
3d space using the right-hand cartesian coordinate system.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...And 4 more matches
PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in
3d space using the right-hand cartesian coordinate system.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...And 4 more matches
SVGCircleElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consola...
...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 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0anglechrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android ...
... full support
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0lockchrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support ...
...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 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0anglechrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android ...
... full support
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0lockchrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support ...
...And 4 more matches
Basic concepts behind Web Audio API - Web APIs
a sample is a single float
32 value that represents the value of the audio stream at each specific point in time, in a specific channel (left or right, if in the case of stereo).
...say you've got a 16 x 16 image, but you want it to fill a
32x
32 area.
... the alternative is to use an interleaved buffer format: lrlrlrlrlrlrlrlrlrlrlrlrlrlrlrlr (for a buffer of 16 frames) this format is very common for storing and playing back audio without much processing, for example a decoded mp
3 stream.
...And 4 more matches
Using Web Workers - Web APIs
to illustrate this, let's create for didactical purpose a function named emulatemessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa: function emulatemessage(vval) { return eval('(' + json.stringify(vval) + ')'); } // tests // test #1 var example1 = new number(
3); console.log(typeof example1); // object console.log(typeof emulatemessage(example1)); // number // test #2 var example2 = true; console.log(typeof example2); // boolean console.log(typeof emulatemessage(example2)); // boolean // test #
3 var example
3 = new string('hello world'); console.log(typeof example
3); // object console.log(typeof emulatemessage(example
3)); // string // test #4 var exam...
...ple4 = { 'name': 'john smith', "age": 4
3 }; console.log(typeof example4); // object console.log(typeof emulatemessage(example4)); // object // test #5 function animal(stype, nage) { this.type = stype; this.age = nage; } var example5 = new animal('cat',
3); alert(example5.constructor); // animal alert(emulatemessage(example5).constructor); // object a value that is cloned and not shared is called message.
... first we need to have the methods to handle the two simple operations: var queryablefunctions = { getdifference: function(a, b) { reply('printstuff', a - b); }, waitsometime: function() { settimeout(function() { reply('doalert',
3, 'seconds'); },
3000); } } function reply() { if (arguments.length < 1) { throw new typeerror('reply - takes at least one argument'); return; } postmessage({ querymethodlistener: arguments[0], querymethodarguments: array.prototype.slice.call(arguments, 1) }); } /* this method is called when main page calls queryworker's postmessage met...
...And 4 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
note: the delay argument is converted to a signed
32-bit integer.
... this effectively limits delay to 214748
3647 ms, since it's specified as a signed integer in the idl.
... } function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example
3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
...And 4 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
take this example: function cb() { f(); settimeout(cb, 0); } settimeout(cb, 0); setinterval(f, 0); in chrome and firefox, the 5th successive callback call is clamped; safari clamps on the 6th call; in edge its the
3rd one.
... firefox implements this behavior since version 5 (see bug 6
33421, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference).
... firefox for android uses a timeout value of 15 minutes for background tabs since bug 7
36602 in firefox 14, and background tabs can also be unloaded entirely.
...And 4 more matches
ARIA annotations - Accessibility
wai-aria version 1.
3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
...</p> <div id="comment-source">suggested by chris, <time datetime="2019-0
3-
30t19:29">march
30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example: ins, [role="insertion"] { color: #0c0; text-decoration: underline; } del, [role="deletion"] { color: red; text-decoration: line-through; } ins, [...
... let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h
3>chris said</h
3> <p class="comment-text">i really think this could use more cowbell.</p> <p><time datetime="2019-0
3-
30t19:29">march
30 2019, 19:29</time></p> </div> we’ve used role="comment" to mark this up as a comment.
...And 4 more matches
Accessibility Information for Web Authors - Accessibility
web content accessibility guidelines (wcag) 1.0 another important set of guidelines from the w
3c web accessibility initiative (wai).
...in
30 days, you will know why your website should be accessible and how to make it more accessible.
...the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and
3.
...And 4 more matches
:checked - CSS: Cascading Style Sheets
ype="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt
3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0
3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0
3px hotpink; } /* option elements, when selected */ option:checked { ...
...box-shadow: 0 0 0
3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
... html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #
3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expan...
...And 4 more matches
:nth-last-child() - CSS: Cascading Style Sheets
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1,
3, 5, etc., counting from the end.
...'='<attr-modifier> = i | s examples example selectors tr:nth-last-child(odd) or tr:nth-last-child(2n+1) represents the odd rows of an html table: 1,
3, 5, etc., counting from the end.
... :nth-last-child(
3n+4) represents elements 4, 7, 10, 1
3, etc., counting from the end.
...And 4 more matches
@supports - CSS: Cascading Style Sheets
the following are both equivalent: @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} @supports (transform-style: preserve-
3d) or ((-moz-transform-style: preserve-
3d) or ((-o-transform-style: preserve-
3d) or (-webkit-transform-style: preserve-
3d))) {} note: when using both and and or operators, the parentheses must be used to define the order in which they apply.
...) { … /* css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given css property or a prefixed version @supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { … /* css applied when
3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fallback alternative for text-align-last: justify */ } testing for the support of custom properties @supports (--foo: green) { body { color: var(--varname); } } testing for the ...
... css conditional rules module level
3the definition of '@supports' in that specification.
...And 4 more matches
animation-direction - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-directionchrome full support 4
3 full support 4
3 full support
3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12 full support 12 full support 12prefixed prefixed implemented ...
... full support 5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support
30 full support
30 full support 15prefixed 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 4
3 full support 4
3 full support ≤
37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 4
3 full support 4
3 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 16 ...
...And 4 more matches
animation - CSS: Cascading Style Sheets
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation:
3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation:
3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein
3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre...
...> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation:
3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation:
3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation:
3s slidein;</div> <div c...
...lass="animation a
3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius:
3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%
3csvg%20xmlns%
3d%22http%
3a%2f%2fwww.w
3.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%22m
3%2c
3%20l
3%2c1
3%20l1
3%2c8%20z%22%20%2f%
3e%
3cpath%20id%
3d%22pause%22%20d%
3d%22m5%2c4%20l7%2c4%20l7%2c1
3%20l5%2c1
3%20z%20m9%2c4%20l11%2c4%20l11%2c1
3%...
...And 4 more matches
break-after - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size:
3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level
3the definition of 'break-after' in that specification.
...ra for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox no support noie full support 10opera full support
37 full support
37 no support 11.1 — 12.1safari no support nowebview android full support 50chrome android full support 50firefox android no support ...
... noopera android full support
37 full support
37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0alwayschrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support nowebview android no support ...
...And 4 more matches
break-before - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size:
3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level
3the definition of 'break-before' in that specification.
... for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera full support
37 full support
37 no support 11.1 — 12.1safari no support nowebview android full support 50chrome android full support 50firefox android full support ...
... 65opera android full support
37 full support
37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0always experimentalchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support nowebview android no support ...
...And 4 more matches
break-inside - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size:
3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification ...
... status comment css fragmentation module level
3the definition of 'break-inside' in that specification.
... for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera full support
37 full support
37 no support 11.1 — 12.1safari full support 10webview android full support 50chrome android full support 50firefox android full support ...
...And 4 more matches
linear-gradient() - CSS: Cascading Style Sheets
note also that the first example above does not exactly render as depicted in mozilla firefox (particularly version 80.0b
3).
...between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the
30% mark rather than 50% as would have happened without the
30% color hint.
... linear-gradient(red 10%,
30%, blue 90%); if two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.
...And 4 more matches
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: matrix
3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate
3d(1, 2.0,
3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate
3d(12px, 50%,
3em); transform: translatex(2em); transform: translatey(
3in); tr...
...ansform: translatez(2px); transform: scale(2, 0.5); transform: scale
3d(2.5, 1.2, 0.
3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.
3); transform: skew(
30deg, 20deg); transform: skewx(
30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(
3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
... find out more: mdn understanding wcag, guideline 2.
3 explanations understanding success criterion 2.
3.
3 | w
3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform...
...And 4 more matches
<button>: The Button element - HTML: Hypertext Markup Language
example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8
3 9v6l1 4h
3l1-
3 1
3h
3l7 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 | w
3c 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.
... understanding success criterion 2.5.5: target size | w
3c understanding wcag 2.1 target size and 2.5.5 | adrian roselli quick test: large touch targets - the a11y project proximity large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them.
...And 4 more matches
<input type="url"> - HTML: Hypertext Markup Language
submitting this form would cause the following data to be sent to the server: myurl=http%
3a%2f%2fwww.example.com.
...in this example, for instance, the url edit box is
30 characters wide: <input id="myurl" name="myurl" type="url" size="
30"> element value length the size is separate from the length limitation on the entered url itself.
... the example below creates a
30-character wide url address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.
...And 4 more matches
JavaScript modules - JavaScript
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 1
3.2.0notes full support 1
3.2.0notes notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
...see node's ecmascript modules documentation for more details.disabled from version 8.5.0: this feature is behind the --experimental-modules runtime flag.dynamic importchrome full support 6
3edge full support 79firefox full support 67 full support 67 no support 66 — 67disabled disabled from version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicimport preference (needs to be set to true...
...to change preferences in firefox, visit about:config.ie no support noopera full support 50safari full support 11.1webview android full support 6
3chrome android full support 6
3firefox android full support 67 full support 67 no support 66 — 67disabled disabled from version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicimport preference (needs to be set to true).
...And 4 more matches
Assertions - JavaScript
/\d+(?!\.)/.exec('
3.141') matches "141" but not "
3.
.../(?<!-)\d+/.exec('
3') matches "
3".
... /(?<!-)\d+/.exec('-
3') match is not found because the number is preceded by the minus sign.
...And 4 more matches
Regular expression syntax cheatsheet - JavaScript
for example, /\w/ matches "a" in "apple", "5" in "$5.28", and "
3" in "
3d".
...equivalent to [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u
3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u
3000\ufeff].
...And 4 more matches
Array.prototype.length - JavaScript
the value is an unsigned,
32-bit integer that is always numerically greater than the highest index in the array.
... description the value of the length property is an integer with a positive sign and a value less than 2 to the
32nd power (2
32).
... var namelista = new array(4294967296); //2 to the
32nd power = 4294967296 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); //4294967295 you can set the length property to truncate an array at any time.
...And 4 more matches
Atomics.wait() - JavaScript
the static atomics.wait() method verifies that a given position in an int
32array still contains a given value and if so sleeps, awaiting a wakeup or a timeout.
... note: this operation only works with a shared int
32array and may not be allowed on the main thread.
... syntax atomics.wait(typedarray, index, value[, timeout]) parameters typedarray a shared int
32array.
...And 4 more matches
Date.parse() - JavaScript
2015-02-
31).
... however, invalid values in date strings not recognized as simplified iso format as defined by ecma-262 may or may not result in nan, depending on the browser and values provided, e.g.: // non-iso string with invalid date values new date('2
3/25/2014'); will be treated as a local date of 25 november, 2015 in firefox
30 and an invalid date in safari 7.
... however, if the string is recognized as an iso format string and it contains invalid values, it will return nan in all browsers compliant with es5 and later: // iso string with invalid values new date('2014-25-2
3').toisostring(); // throws "rangeerror: invalid date" in all es5-compliant browsers spidermonkey's implementation-specific heuristic can be found in jsdate.cpp.
...And 4 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
hour the string used for the hour, for example "
3" or "0
3".
... 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...
...parts(date); // return value: [ { type: 'weekday', value: 'monday' }, { type: 'literal', value: ', ' }, { type: 'month', value: '12' }, { type: 'literal', value: '/' }, { type: 'day', value: '17' }, { type: 'literal', value: '/' }, { type: 'year', value: '2012' }, { type: 'literal', value: ', ' }, { type: 'hour', value: '
3' }, { type: 'literal', value: ':' }, { type: 'minute', value: '00' }, { type: 'literal', value: ':' }, { type: 'second', value: '42' }, { type: 'fractionalsecond', value: '000' }, { type: 'literal', value: ' ' }, { type: 'dayperiod', value: 'am' } ] now the information is available separately and it can be formatted and concatenated agai...
...And 4 more matches
Intl.NumberFormat() constructor - JavaScript
"percent" for percent formatting "unit" for unit formatting unit the unit to use in unit formatting, possible values are core unit identifiers, defined in uts #
35, part 2, section 6.
...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.
... let amount =
3500; console.log(new intl.numberformat().format(amount)); // → '
3,500' if in us english locale decimal and percent formatting let amount =
3500; new intl.numberformat('en-us', {style: 'decimal'}).format(amount); // → '
3,500' new intl.numberformat('en-us', {style: 'percent'}).format(amount); // → '
350,000%' unit formatting if the style is 'unit', a unit property must be provided.
...And 4 more matches
Math - JavaScript
math.ln2 natural logarithm of 2; approximately 0.69
3.
... math.ln10 natural logarithm of 10; approximately 2.
30
3.
... math.log2e base-2 logarithm of e; approximately 1.44
3.
...And 4 more matches
WebAssembly.Table - JavaScript
the table2.wasm module contains two functions (one that returns 42 and another that returns 8
3) and stores both into elements 0 and 1 of the imported table (see text representation).
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0getchrome full support 57edge full support 16firefox full support ...
...And 4 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 24-bit or
32-bit integers.
...that means each sample requires
32 bits of memory.
...therefore, a typical three-minute song requires about
34.5 mb of memory.
...And 4 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
there are
3 properties you can use: mask, clip-path, and filter.
... gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="
300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width:
300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it.
...</p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width:
300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css.
...And 4 more matches
<metadata> - SVG: Scalable Vector Graphics
example <svg width="400" viewbox="0 0 400
300" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w
3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:...
...nect:ends rdf:resource="#computerb"/> </rdf: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="#socket
3"/> <connect:ends rdf:resource="#socket4"/> <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; } pat...
...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="25
3" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined 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 ...
...And 4 more matches
Basic shapes - SVG: Scalable Vector Graphics
the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w
3.org/2000/svg"> <rect x="10" y="10" width="
30" height="
30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="
30" height="
30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width...
...="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 1
30 80 125 85 140 90 1
35 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195
35 205 40 190
30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,2
30 q40,205 50,2
30 t90,2
30" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial.
... <rect x="10" y="10" width="
30" height="
30"/> <rect x="60" y="10" rx="10" ry="10" width="
30" height="
30"/> x the x position of the top left corner of the rectangle.
...And 4 more matches
lang/functional - Archive of obsolete content
let { method } = require("sdk/lang/functional"); let mynumber = { times: method(times), add: method(add), number: 0 }; function times (target, x) { return target.number *= x; } function add (target, x) { return target.number += x; } console.log(mynumber.number); // 0 mynumber.add(10); // 10 mynumber.times(2); // 20 mynumber.add(
3); // 2
3 parameters lambda : function the function to be wrapped and returned.
... let { invoke } = require("sdk/lang/functional"); invoke(sum, [1,2,
3,4,5], null); // 15 function sum () { return array.slice(arguments).reduce(function (a, b) { return a + b; }); } parameters callee : function function to invoke.
... let { partial } = require("sdk/lang/functional"); let add = function add (x, y) { return x + y; } let addone = partial(add, 1); addone(5); // 6 addone(10); // 11 partial(add, addone(20))(2); // 2
3 parameters fn : function function on which partial application is to be performed.
...And 3 more matches
ui/sidebar - Archive of obsolete content
from firefox
33 onwards you can pass a browserwindow into these methods, and they will then operate on the specified window.
... to show what a sidebar looks like, here's a sidebar that displays the results of running the w
3c validator on the current page: specifying sidebar content the content of a sidebar is specified using html, which is loaded from the url supplied in the url option to the sidebar's constructor.
... 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
34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
...And 3 more matches
Miscellaneous - Archive of obsolete content
xtension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox
3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#16
39 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#16
31 bug
3380
39 tracks improving this situation by providing a simple method to restart the application.
...
3 change text size.
... simulating mouse and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox
3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content...
...And 3 more matches
Adding menus and submenus - Archive of obsolete content
nuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for
3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
... <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> </menupopup> </menu> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> in this case we grouped the
3 greeting items into a submenu.
... it doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with
3 child items.
...And 3 more matches
The Box Model - Archive of obsolete content
there are
3 basic box elements in xul: hbox, vbox and box.
... here's a very simple example of an hbox with
3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz...
... in this case, the "cat" button has a flex value of
3, while the "parrot" button still has a flex value of 1.
...And 3 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
the code for that will look something like this: <em:targetapplication> <!-- seamonkey --> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b6
3a}</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.
...some important menu ids are listed below, menu ids are based on firefox
3 source code: menu id in firefox menu id in seamonkey 1.x and 2.0 seamonkey 2.1 overlays menu_filepopup menu_filepopup menu_filepopup file menu popup menu_editpopup menu_edit_popup menu_editpopup edit menu popup menu_viewpopup menu_view_popup menu_view_popup view menu popup ...
... the statusbar in firefox
3 a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window.
...And 3 more matches
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
build create a new project in visual studio for a win
32 gui library (dll) (in .net 200
3: win
32 template, then switch to dll in application settings in the following dialog, export symbols too?)(in visual studio 2008, it is visualc++|win
32|win
32 project, then check dll in the wizard).
... add the following preprocessor definitions to project properties|(all configurations)|c++|preprocessor|preprocessor definitions: win
32;_windows;xp_win
32;xp_win;_x86_;npsimple_exports disable precompiled headers using project properties|(all configurations)|c++|precompiled headers|create/use precompiled header.
...to reflect your plugin remove the function npp_getjavaclass from npp_gate.cpp build rename the resulting dll so that the filename starts with "np" and ends with ".dll" (or "
32.dll"?
...And 3 more matches
Exception logging in JavaScript - Archive of obsolete content
in versions of firefox prior to firefox
3, all javascript exceptions were always logged into the error console if they remained unhandled at the time execution returned back into c++ code.
...exception reporting in firefox
3 firefox
3 improves reporting of unhandled exceptions by establishing a set of rules that determines whether or not an exception is worth reporting: any methods on interfaces annotated with the [function] attribute in idl (see, for example, nsidomeventlistener) that throw exceptions always report those exceptions into the error console.
...if the javascript in frame 4 throws an exception, the exception is returned as an error code to the c++ in frame
3.
...And 3 more matches
Introducing the Audio API extension - Archive of obsolete content
obsolete since gecko 28 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.
3)this feature is obsolete.
...this api has been deprecated since gecko 22, disabled since gecko 28, and removed from gecko
31.
...for example, for a two-channel signal: channel1-sample1 channel2-sample1 channel1-sample2 channel2-sample2 channel1-sample
3 channel2-sample
3.
...And 3 more matches
JavaScript crypto - Archive of obsolete content
they won't work in firefox
34 or later.
...rify, 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_rc4_flag: must support ckm_rc4_cbc and ckm_rc4_ecb and the following functions: c_generatekey, c_encrypt, c_decrypt, c_wrapkey, c_unwrapkey pkcs11_mech_des_flag: must support ckm_cpmf_cbc, ckm_des_cbc, ckm_des
3_cbc, ckm_cpmf_ecb, ckm_des_ecb, ckm_des
3_ecb and the following functions: c_generatekey, c_encrypt, c_decrypt, c_wrapkey, c_unwrapkey pkcs11_mech_dh_flag: must support ckm_dh_pkcs_derive and ckm_dh_key_pair_gen and the following functions: c_derivekey, c_generatekeypair pkcs11_mech_md5_flag: hashing must be able to function without authentication.
... pkcs11_mech_rsa_flag = 0x1<<0; pkcs11_mech_dsa_flag = 0x1<<1; pkcs11_mech_rc2_flag = 0x1<<2; pkcs11_mech_rc4_flag = 0x1<<
3; pkcs11_mech_des_flag = 0x1<<4; pkcs11_mech_dh_flag = 0x1<<5; //diffie-hellman pkcs11_mech_skipjack_flag = 0x1<<6; //skipjack algorithm as in fortezza cards pkcs11_mech_rc5_flag = 0x1<<7; pkcs11_mech_sha1_flag = 0x1<<8; pkcs11_mech_md5_flag = 0x1<<9; pkcs11_mech_md2_flag = 0x1<<10; pkcs11_mech_random_flag = 0x1<<27; /...
...And 3 more matches
Nanojit - Archive of obsolete content
figuring out how to compile it is left as an exercise for the reader; the following works when run in the object directory of an --enable-debug spidermonkey shell: g++ -ddebug -g
3 -wno-invalid-offsetof -fno-rtti -include js-confdefs.h -i dist/include/ -i..
... #include <stdio.h> #include <stdint.h> #include "jsapi.h" #include "jstracer.h" #include "nanojit.h" using namespace nanojit; const uint
32_t cache_size_log2 = 20; static avmplus::gc gc = avmplus::gc(); static avmplus::avmcore core = avmplus::avmcore(); int main() { logcontrol lc; #ifdef debug lc.lcbits = lc_readlir | lc_assembly; #else lc.lcbits = 0; #endif // set up the basic nanojit objects.
... typedef js_fastcall int
32_t (*addtwofn)(int
32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 + 5 = %d\n", fn(5)); return 0; } code explanation interesting part are the lines 46-50: // write a few lir instructions to the buffer: add the first parameter // to the constant 2.
...And 3 more matches
Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w
3c 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.
... min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widths
3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc.
... + padding #define min_adj
3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if present for a fixed width table, the column may get more space if the sum of the col allocat...
...And 3 more matches
Things I've tried to do with XUL - Archive of obsolete content
(to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a
30%-20%-50% ratio to the height of the parent vbox.
... <vbox flex="1"> <box height="
30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height:
30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="
3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
... enn: percentages won't have any effect in these examples though, since the actual height of the container isn't known, and
30% of an unknown number is still an unknown number.
...And 3 more matches
textbox - Archive of obsolete content
prior to gecko 1.9 (firefox
3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding.
...as of gecko 1
3.0 (firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.
...prior to gecko 1.9 (firefox
3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding.
...And 3 more matches
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: sunbird and lightning 0.
3rc1 available sunbird and lightning 0.
3rc1 is announced.
... 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
3548
35 is suspected).
...And 3 more matches
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 0
30176cc r=0 a=8940,uc c=0,0 cnt=429 tbl 0
30178c4 r=0 a=8940,uc c=4470,uc cnt=4
30 rowg 0
3017a7c r=0 a=uc,uc c=uc,uc ...
...cnt=4
31 row 0
3017c08 r=0 a=uc,uc c=uc,uc cnt=4
32 cell 0
3017da8 r=0 a=uc,uc c=uc,uc cnt=4
33 block 0
3017e08 r=0 a=uc,uc c=uc,uc cnt=4
34 block 0
3017e08 d=870,
300 me=480 cell 0
3017da8 d=9
30,
360 me=540 cell 0
301a8cc r=0 a=uc,uc c=uc,uc cnt=4
36 block 0
301a92c r=0 a=uc,uc c=uc,uc cnt=4
37 block 0
301a92c d=1
335,
300 me=465 cell 0
301a8cc d=1
395,
360 me=525 row 0
3017c08 d=uc,
360 rowg 0
3017a7c d=uc,
360 rowg 0
3017a7c r=2 a=4470,uc c=4470,uc cnt=442 row 0
3017c08 r=2 a=4470,uc c=4470,uc cnt=44
3 cell 0
3017da8 r=2 a=1755,uc c=1695,uc cnt=444 block 0
3017e08 r=2 a=1695,uc c=1695,uc cnt=445 block 0
3017e08 d=1695,
300 cell 0
3017da8 d=1755,
360 cell 0
301a8cc r=2 a=2625,uc c=2565,uc cnt=446 block 0
301a92c...
... r=2 a=2565,uc c=2565,uc cnt=447 block 0
301a92c d=2565,
300 cell 0
301a8cc d=2625,
360 row 0
3017c08 d=4470,
360 rowg 0
3017a7c d=4470,
360 tbl 0
30178c4 d=4500,450 tblo 0
30176cc d=4500,450 table reflow optimizations if the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current column widths.
...And 3 more matches
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.
...unfortunately, <tt>cancelio()</tt> is not available on nt
3.51.
... so we can't go this route as long as we are supporting nt
3.51.
...And 3 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 a comprehension which selects only even numbers: var numbers = [1, 2,
3, 21, 22,
30]; var evens = [for (i of numbers) if (i % 2 === 0) i]; console.log(evens); // logs 2,22,
30 filter() can be used for the same purpose: var evens = numbers.filter(i => i % 2 === 0); map() and filter() style operations can be combined into a single array comprehension.
... 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.
...And 3 more matches
Building up a basic demo with Three.js - Game development
a typical
3d scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to actually see them, lights and materials to make it look better, animations to make it look alive, etc.
... three.js, as with any other
3d library, provides built-in helper functions to help you implement common
3d functionality more quickly.
...the following lines put the camera in place in the
3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added.
...And 3 more matches
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: #fff4e6; display: grid; grid-template-columns: repeat(
3, 1fr); grid-template-rows: repeat(
3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(
3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using their line number.
...in the following example the item is positioned from column line 1 to column line
3, and from row line 1 to row line
3.
...And 3 more matches
Organizing your CSS - Learn web development
you will typically have rules set up for: body p h1, h2, h
3, h4, 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, h
3, h4 { ...
... .comment { display: grid; grid-template-columns: 1fr
3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr
3fr; border-bottom: 1px solid grey; } .list-item .content { font-size: .8rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the sh...
...And 3 more matches
Flexbox - Learn web development
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).
...try updating your existing article rules like so: article { flex: 1 200px; } article:nth-of-type(
3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space.
...so if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd,
3rd, then 1st.
...And 3 more matches
Beginner's guide to media queries - Learn web development
note: there were a number of other media types defined in the level
3 media queries specification; these have been deprecated and should be avoided.
... * { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.
3 arial, helvetica, sans-serif; } a:link, a:visited { color: #
333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 2
32, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10px; color: #
333; font-weight: bold; } nav a:hover { background-color: rgba...
...(207, 2
32, 220, 0.7); } .related { background-color: rgba(79, 185, 227, 0.
3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar { background-color: rgba(207, 2
32, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the document is ordered in a way that makes the content readable.
...And 3 more matches
Practical positioning examples - Learn web development
let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab
3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height:
3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states.
... .info-box .panels { height:
352px; position: relative; clear: both; } finally for this section, we will style the individual <article> elements that comprise our panels.
...And 3 more matches
How can we design for all types of users? - Learn web development
the w
3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background.
... for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.
30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.
... suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of
32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px).
...And 3 more matches
Advanced form styling - Learn web development
onsider this simple test case: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 1
3, opera chrome 6
3 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p...
...> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> <p> <label> <input type="checkbox" name="fruit-
3" value="strawberry"> i like strawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design.
...: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.
3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the che...
...And 3 more matches
Dynamic behavior in Svelte: working with variables and props - 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
3-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
3-adding-dynamic-behavior 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/c862d964d48d47
3ca6
3ab91709a0a5a0?version=
3.2
3.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
... create a <script> section at the top of src/components/todos.svelte and give it some content, as follows: <script> let todos = [ { id: 1, name: 'create a svelte starter app', completed: true }, { id: 2, name: 'create your first component', completed: true }, { id:
3, name: 'complete the rest of the tutorial', completed: false } ] let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length </script> now let's do something with that information.
...And 3 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline:
3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance:...
...: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.
31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn__danger { color: #fff; background-color: #ca
3c
3c; border-color: #bd21
30; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82
333; } .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: cente...
...And 3 more matches
Accessible Toolkit Checklist
often these kinds of toolkits don't use a separate window for each control; in that case remember to generate a unique
32 bit child id for each control so that the msaa event system can call back for the right iaccessible for each event.
... msaa support: expose window with role_dialog, unless it's already the standard dialog window class #
32770.
...expose status bars with role_statusbar, unless they already use the standard window class msctls_statusbar
32.
...And 3 more matches
Adding a new event
roughly, there are
3 types of event.
... how to implement a dom event class if you're in the case
3 (non-dom events), you can skip this section.
...for example, keyboardevent which is defined in dom level
3 events should be implemented as mozilla::dom::keyboardevent.
...And 3 more matches
Creating a Language Pack
$ cd ../../dist the xpi file can be found in the directory win
32/xpi on windows, linux-i686/xpi or linux-x86_64 on linux or mac/xpi on mac.
...ilding on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-
3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded.
... $ make ident fx_revision 2
37dccbcb967 buildid 200911260
33851 you can now go back to your source hg clone.
...And 3 more matches
The Firefox codebase: CSS Guidelines
do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h
3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h
3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common.
... example: use margin-inline-start:
3px; instead of margin-left:
3px.
... write padding: 0
3px 4px; instead of padding: 0
3px 4px
3px;.
...And 3 more matches
Eclipse CDT
(having to move the mouse slightly is eclipse bug 2687
3).
... alternately, you can jump to the definition of the symbol under the cursor by pressing f
3.
... headers are only parsed once for performance reasons, eclipse only processes header files that have include guards once, using the compiler options for the first source file it encounters that includes that header (eclipse bug
380511).
...And 3 more matches
Performance best practices for Firefox front-end engineers
as of bug 1
35
3206, you can also schedule idle events in non-dom contexts by using services.tm.idledispatchtomainthread.
... the rendering process goes through the following steps: the above image is used under creative commons attribution
3.0, courtesy of this page from our friends at google, which itself is well worth the read.
... historically, there hasn't been an easy way of doing this - however, bug 14
34
376 has recently landed some chromeonly helpers to the window binding to make this simpler.
...And 3 more matches
HTTP Cache
it will soon be completely obsoleted and removed (bug 91
3828).
... currently we have
3 types of storages, all the access methods return an nsicachestorage object: memory-only (memorycachestorage): stores data only in a memory cache, data in this storage are never put to disk disk (diskcachestorage): stores data on disk, but for existing entries also looks into the memory-only storage; when instructed via a special argument also primarily looks into applicati...
...immediately); there is currently no way to opt out of this feature (watch bug 9
38186).
...And 3 more matches
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: the uuid used b...
... const ci = components.interfaces; const cu = components.utils; cu.import('resource://gre/modules/xpcomutils.jsm'); const class_id = components.id('x75
3d8
30-ba1e-11e0-962b-0800200c9a66'); // ← change this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocompleteresult} * * @param {string} searchstring * @param {number} searchresult * @param {number} defaultindex * @param {string} errordescription * @param {array.<string>} results * @param {array.<string>|null=} comments */ function providerautocompleteresult(searchstring, searchresult, defaultindex, errordescription, results, commen...
...to do so put the following declaration in your chrome.manifest file: component {x75
3d8
30-ba1e-11e0-962b-0800200c9a66} components/basic_autocomplete.js contract @mozilla.org/autocomplete/search;1?name=basic-autocomplete {x75
3d8
30-ba1e-11e0-962b-0800200c9a66} and finally use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="basic-autocomplete"/> that's it!
...And 3 more matches
CustomizableUI.jsm
these come in
3 types themselves: button which are simple toolbar buttons which do something when clicked view which are toolbar buttons with a 'view' of further options.
... panel_column_count number
3, the (constant) number of columns in the menu panel.
...{ onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget moved'); var useicon; if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon
32.png'; } else { useicon = 'chrome://branding/content/icon16.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.length; i++) { myinstances[i].node.setattribute('image', useicon); } }, onwidgetdestroyed: function(awidgetid) { conso...
...And 3 more matches
OS.File for the main thread
var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w
3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { //...
...n(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?201
3-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
... as of firefox
30, os.file.read() takes an options object as second argument.
...And 3 more matches
Extras
w> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/
3f/9
341cbddc0.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%" ...
...%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="
360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l
30 15 l 20 20 l 15
30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msu...
... <mi>θ</mi> <mtext> <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 l
3,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...
...And 3 more matches
Various MathML Tests
overview of presentation mathml elements testing tensor indices <mmultiscripts>: r i1 j2 k
3 ; this with <none/>, a qp i a bit of calculus: ∫ a b f ( x ) dx ∂ ∂ x f ( x , y ) + ∂ ∂ y f ( x , y ) here is the alphabet with invisible portions wrapped by <mphantom> in between: a b c d e f g h i j k l m n o p q r s t u v w x y z .
... click the expression below to see several definitions of pi: π =
3.14159265
358...
... π 4 = 1 2 + 12 2 +
32 2 + 52 2 + 72 2+...
...And 3 more matches
Mozilla Port Blocking
"access to the port number given has been disabled for security reasons." "establishing a connection to an unsafe or otherwise banned port was prohibited" "0x804b001
3 (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", "port
3,port4"); blocked ports ports blocked by default in mozilla: port service 1 tcpmux 7 echo 9 discard 11 systat 1
3 daytime 15 netstat 17 qotd 19 chargen 20 ftp data 21 ftp control 22 ssh 2
3 telnet 25 smtp
37 time ...
...42 name 4
3 nicname 5
3 domain 77 priv-rjs 79 finger 87 ttylink 95 supdup 101 hostriame 102 iso-tsap 10
3 gppitnp 104 acr-nema 109 pop2 110 pop
3 111 sunrpc 11
3 auth 115 sftp 117 uucp-path 119 nntp 12
3 ntp 1
35 loc-srv / epmap 1
39 netbios 14
3 imap2 179 bgp
389 ldap 465 smtp+ssl 512 print / exec 51
3 login 514 shell 515 printer 526 tempo 5
30 courier 5
31 chat 5
32 netnews 540 uucp 556 remotefs ...
...And 3 more matches
NSS FAQ
this section is out of date iplanet e-commerce solutions has certified nss
3.1 on 18 platforms, including aix 4.
3, hp-ux 11.0, red hat linux 6.0, solaris (2.6 or later), windows nt (4.0 or later), and windows 2000.
...the nss
3.1 api requires c or c++ development environments.
... nss supports ssl v2 and v
3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, and x.509 v
3 certificates.
...And 3 more matches
Using JSS
jss version
3.0 linked statically with nss, so it only required nspr.
... jss versions
3.1 and later link dynamically with nss, so they also require the nss shared libraries.
... jss dependencies core library name description binary release location nspr4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/releases plc4 nspr standard c library replacement functions plds4 nspr data structure types nss
3 nss crypto, pkcs #11, and utilities http://ftp.mozilla.org/pub/mozilla.org/security/nss/releases ssl
3 nss ssl library smime
3 nss s/mime functions and types nssckbi pkcs #11 module containing built-in root ca certificates.
...And 3 more matches
Release notes for recent versions of NSS
the current stable release of nss is
3.56, which was released on 21 august 2020.
... (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.5
3.1 (nss
3.5
3.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.54 release notes nss
3.5
3.1 release notes nss
3.5
3 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.4
3 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...
...And 3 more matches
nss tech note1
how to use the nss asn.1 and quickder decoders nss technical note: 1 nss
3.6 contains several decoders for asn.1 and der.two of them are extensively used and are part of the public nss api : the "classic" asn.1 decoder, written by lisa repka .
... the "quickder" decoder, written by julien pierre for nss
3.6 .
...this
32-bit field tells the decoder what to do with a particular component within the input data.
...And 3 more matches
NSS Tools pk12util
using the pkcs #12 tool (pk12util) newsgroup: mozilla.dev.tech.crypto the pkcs #12 utility makes sharing of certificates among enterprise server
3.x and any server (netscape products or non-netscape products) that supports pkcs#12 possible.
... -p prefix specify the prefix used on the cert8.db and key
3.db files (for example, my_cert8.db and my_key
3.db).
...if no algorithm is specified, the tool defaults to using "pkcs12 v2 pbe with sha1 and
3key triple des-cbc" for private key encryption.
...And 3 more matches
NSS tools : crlutil
-p dbprefix specify the prefix used on the nss security database files (for example, my_cert8.db and my_key
3.db).
...this formatting follows rfc #111
3.
...list of possible algorithms: md2 | md4 | md5 | sha1 | sha256 | sha
384 | sha512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...And 3 more matches
Network Security Services
applications built with nss can support ssl v
3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v
3 certificates, and other security standards.
... nss
3.2 test suite archived version.
...links to performance reports for nss
3.2 and later releases.
...And 3 more matches
Tutorial: Embedding Rhino
the javascript feature calledliveconnect allows javascript programs to interact with java objects: $ java runscript "java.lang.system.out.println(
3)"
3.0 undefined implementing interfaces using rhino, javascript objects can implement arbitrary java interfaces.
...this is illustrated in the runscript
3 example.
...for example, $ java runscript
3 "x = 7" x = 7 f is undefined or not a function.
...And 3 more matches
SpiderMonkey Internals
nan-boxing is a technique based on the fact that in ieee-754 there are 2**5
3-2 different bit patterns that all represent nan.
...other values are encoded as a value and a type tag: on x86, arm, and similar
32-bit platforms, we use what we call "nunboxing", in which non-double values are a
32-bit type tag and a
32-bit payload, which is normally either a pointer or a signed
32-bit integer.
... on x64 and similar 64-bit platforms, pointers are longer than
32 bits, so we can't use the nunboxing format.
...And 3 more matches
JS::Value
constructor accessors mutators null val.isnull() js::nullvalue() n/a val.setnull() undefined val.isundefined() js::undefinedvalue() n/a val.setundefined() boolean val.isboolean(), val.istrue(), val.isfalse() js::booleanvalue(bool), js::truevalue(), js::falsevalue() val.toboolean() val.setboolean(bool) number val.isint
32(), val.isdouble(), val.isnumber() js::numbervalue(any number type), js::int
32value(int
32_t), js::doublevalue(double), js::float
32value(float) val.toint
32(), val.todouble(), val.tonumber() val.setint
32(int
32_t), val.setnumber(uint
32_t), val.setnumber(double) string val.isstring() js::stringvalue(jsstring*) val.tostring() val.setstring(jsstring *) object v...
...al.isobject() js::objectvalue(jsobject&), js::objectornullvalue(jsobject*) val.toobject() val.setobject(jsobject &) symbol val.issymbol() js::symbolvalue(js::symbol*) val.tosymbol() val.setsymbol(js::symbol &) numbers are stored in a js::value either as a double or as an int
32_t.
... the different representations are visible using the separate int
32/double methods but do not affect observable semantics (ignoring performance).
...And 3 more matches
JSClass.flags
the flags field is of type uint
32_t.
...if the global object does not have this flag, then scripts may cause nonstandard behavior by replacing standard constructors or prototypes (such as function.prototype.) objects that can end up with the wrong prototype object, if this flag is not present, include: arguments objects (ecma 262-
3 §10.1.8 specifies "the original object prototype"), function objects (ecma 262-
3 §1
3.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 4
3 correctly implements gc read and write barriers.
...And 3 more matches
JSNewEnumerateOp
syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); // added in spidermonkeysidebar
38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandleid idp); // obsolete since jsapi
37 name type description cx jscontext * the context in which the enumeration is taking place.
... enum_op jsiterateop obsolete since jsapi
37 specifies which step in iteration is happening.
... statep js::mutablehandleid obsolete since jsapi
37 in/out parameter.
...And 3 more matches
JS_CallFunction
syntax /* added in spidermonkey
31 */ bool js_callfunction(jscontext *cx, js::handleobject obj, js::handlefunction fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js_callfunctionname(jscontext *cx, js::handleobject obj, const char *name, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js_callfunctionvalue(jscontext *cx, js::handleobject obj, js::handlevalue fval, const js::handlevaluearray& args, js::mutablehandlevalue rval); /* obsolete since jsapi
30 */ bool js_callfunction(jscontext *cx, jsobject *obj, jsfunction *fun, unsigned argc, jsval *argv, jsval *rval); bool js_callfunctionname(jscontext *cx, jsobject *obj, c...
...added in spidermonkey
31 argc unsigned number of arguments you are passing to the function.
... obsolete since jsapi
30 argv jsval * pointer to the array of argument values to pass to the function.
...And 3 more matches
JS_FS
// added in spidermonkey
38 #define js_fninfo(name,call,info,nargs,flags) ...
...// added in spidermonkey
31 #define js_self_hosted_sym_fn(symbol, selfhostedname, nargs, flags) ...
... // added in spidermonkey
38 #define js_sym_fnspec(symbol, call, info, nargs, flags, selfhostedname) ...
...And 3 more matches
JS_GetGCParameter
syntax uint
32_t js_getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint
32_t value); uint
32_t js_getgcparameterforthread(jscontext *cx, jsgcparamkey key); // added in spidermonkeysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint
32_t value); // added in spidermonkeysidebar 17 name type description rt jsruntime * the runtime to configure.
... value uint
32_t (js_setgcparameter only) the value to assign to the parameter.
... jsgc_mode_zone_incremental (
3) the gc runs only the objects that belong to somezones are visited in multipleslices.
...And 3 more matches
JS_SetElement
syntax /* added in spidermonkey
31 */ bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handlevalue v); bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handleobject v); bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::handlestring v); bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, int
32_t v); bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, uint
32_t v); bool js_setelement(jscontext *cx, js::handleobject obj, uint
32_t index, double v); /* obsolete since jsapi 29 */ bool js_setelement(jscontext *cx, js::handleobj...
...ect obj, uint
32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in which to set the element.
... index uint
32_t index number of the element to set.
...And 3 more matches
JS_SetOptions
syntax uint
32 js_setoptions(jscontext *cx, uint
32 options); name type description cx jscontext * a context on which to set options.
... options uint
32 the new set of options.
...this function returns a uint
32 value containing the previous values of the flags.
...And 3 more matches
Parser API
a start position (the position of the first character of the parsed source region) and an end position (the position of the first character after the parsed source region): interface sourcelocation { source: string | null; start: position; end: position; } each position object consists of a line number (1-indexed) and a column number (0-indexed): interface position { line: uint
32 >= 1; column: uint
32 >= 0; } programs interface program <: node { type: "program"; body: [ statement ]; } a complete program source tree.
... interface graphexpression <: expression { type: "graphexpression"; index: uint
32; expression: literal; } a graph expression, aka "sharp literal," such as #1={ self: #1# }.
... interface graphindexexpression <: expression { type: "graphindexexpression"; index: uint
32; } a graph index expression, aka "sharp variable," such as #1#.
...And 3 more matches
Thread Sanitizer
the version of clang you need to use depends on what firefox release you are compiling if you are building from mozilla-central, you must use clang
3.6 or later.
... clang
3.4 + tsan cannot compile firefox due to an internal compiler error; some versions of clang
3.5 packaged by linux distros do not work for the same reason.
... you can check which version of clang you have by running the command: clang -v if you are not building from mozilla-central and are building firefox
39 or earlier, you must use clang
3.
3.
...And 3 more matches
Places Developer Guide
this document is for extension and application developers who want to use the bookmarks and history apis in firefox
3.
...overview places is the umbrella term for a set of apis for managing browsing history and uri metadata first introduced in firefox
3.
...while nsinavhistory is the main interface for history, there are a couple of other interfaces available for legacy and context-specific uses: nsibrowserhistory - detailed page addition and removal methods nsiglobalhistory2 - simple page detection and addition nsiglobalhistory
3 - for adding document redirects adding to history places provides a couple of interfaces for adding to, and editing the browsing history.
...And 3 more matches
Querying Places
not yet implemented -- see bug
3208
31.
...iuri uri readonly attribute boolean hasuri attribute boolean annotationisnot attribute autf8string annotation readonly attribute boolean hasannotation readonly attribute unsigned long foldercount basic query configuration options 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 u...
...nsigned 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 = 1
3 const unsigned short sort_by_lastmodified_descending = 14 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
3208
31) attribute unsigned short sortingmode attribute autf8string sortingannotation attribute unsigned short resulttype attribute boolean...
...And 3 more matches
Using the Places annotation service
the annotation service, provided by the nsiannotationservice interface, is designed to store arbitrary data about a web page or about an item in the places database in firefox
3.
...from c++ you must use the setter for the explicit data type being saved: setpageannotationstring(auri, aname, avalue, aflags, aexpiration); setpageannotationint
32(auri, aname, avalue, aflags, aexpiration); setpageannotationint64(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); setitemannotationint...
...
32(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint64(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.
...And 3 more matches
Using the Places history service
nsiglobalhistory
3: adds extra functions for dealing with redirects and hints for rendering (gecko flags).
... nsiautocompletesearch: url-bar autocomplete from history from 1.9.1 (firefox
3.1) on, don't use any places service on (or after) quit-application has been notified, since the database connection will be closed to allow the last sync, and changes will most likely be lost.
... nsiglobalhistory
3.adddocumentredirect: this is called by the docshell when a redirect occurs.
...And 3 more matches
Using XPCOM Utilities to Make Things Easier
many cids take the following form: #define ns_ioservice_cid \ { /* 9ac9e770-18bc-11d
3-9
337-00104ba0fd40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d
3, \ {0x9
3, 0x
37, 0x00, 0x10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also usually defined in a #define in a header file.
...however, a change in xpcom that occurred before mozilla 1.
3 makes ns_init_isupports no longer necessary: mrefcnt's type has been changed from an integer to a class that provides its own auto-initialization.
... if you are building with versions earlier than mozilla 1.
3, this macro is still required.
...And 3 more matches
mozIStorageStatement
inherits from: mozistoragevaluearray last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) for an introduction on how to use this interface, see the storage overview document.
...meters(in mozistoragebindingparamsarray aparameters); mozistoragebindingparamsarray 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 bindint
32parameter(in unsigned long aparamindex, in long avalue); void bindint64parameter(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(m...
... methods initialize() obsolete since gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) note: this method has been removed for gecko 1.9.1.
...And 3 more matches
nsIAppShellService
boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint
32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8...
... void hidesplashscreen(); obsolete since gecko 1.8 void initialize(in nsicmdlineservice acmdlineservice, in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.8 void quit(in pruint
32 aferocity); obsolete since gecko 1.8 void registertoplevelwindow(in nsixulwindow awindow); void run(); obsolete since gecko 1.8 void toplevelwindowismodal(in nsixulwindow awindow, in boolean amodal); obsolete since gecko 1.9.1 void unregistertoplevelwindow(in nsixulwindow awindow); note: prior to gecko 8.0, all references to nsidomwindow used in this i...
...obsolete since gecko 1.8 eforcequit
3 force all windows to close, then quit.
...And 3 more matches
nsIDialogParamBlock
inherits from: nsisupports last changed in gecko 1.7 method overview print
32 getint( in print
32 inindex ); wstring getstring( in print
32 inindex ); void setint( in print
32 inindex, in print
32 inint ); void setnumberstrings( in print
32 innumstrings ); void setstring( in print
32 inindex, in wstring instring); attributes attribute type description objects nsimutablearray a place where you can store an nsimutablearray to pass nsisupports.
...print
32 getint( in print
32 inindex ); parameters inindex the index of the integer to get.
...wstring getstring( in print
32 inindex ); parameters inindex the index of the string to get.
...And 3 more matches
nsIDragService
inherits from: nsisupports last changed in gecko 4
3 (firefox 4
3 / thunderbird 4
3 / seamonkey 2.40) note: using this interface directly from add-on code is deprecated.
... void firedrageventatsource(in unsigned long amsg); obsolete since gecko 4
3 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only!
... firedrageventatsource() obsolete since gecko 4
3 (firefox 4
3 / thunderbird 4
3 / seamonkey 2.40)this feature is obsolete.
...And 3 more matches
nsIEffectiveTLDService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) implemented by: @mozilla.org/network/effective-tld-service;1.
... method overview acstring getbasedomain(in nsiuri auri, [optional] in pruint
32 aadditionalparts); acstring getbasedomainfromhost(in autf8string ahost, [optional] in pruint
32 aadditionalparts); acstring getpublicsuffix(in nsiuri auri); acstring getpublicsuffixfromhost(in autf8string ahost); methods getbasedomain() returns the base domain of a uri; that is, the public suffix with a given number of additional domain name parts.
... acstring getbasedomain( in nsiuri auri, [optional] in pruint
32 aadditionalparts ); parameters auri the uri to be analyzed.
...And 3 more matches
nsIMarkupDocumentViewer
1 - logical 2 - visual
3 - like the containing document.
...1 - depending on context, default is arabic numerals 2 - depending on context, default is hindi numerals
3 - arabic numerals 4 - hindi numerals.
... bidioptions pruint
32 use this attribute to access all the bidi options in one operation.
...And 3 more matches
nsIXmlRpcClient
warning: this interface was removed from firefox
3 and is no longer available.
...erurl); void setauthentication(in string username, in string password); void clearauthentication(in string username, in string password); void setencoding(in string encoding); void setencoding(in unsigned long type, out nsiidref uuid, out nsqiresult result); void asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint
32 count); attributes attribute type description serverurl readonly nsiurl the url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from returned from this server.
... constants constant type description int unsigned long nsisupportsprint
32 boolean unsigned long nsisupportsprbool string unsigned long nsisupportscstring double unsigned long nsisupportsdouble datetime unsigned long nsisupportsprtime array readonly unsigned long nsisupportsarray struct readonly unsigned long nsisupportsdictionary methods init() set server url.
...And 3 more matches
Performance
as of april 10, 2006, mozilla uses sqlite
3.
3.4, but the latest precompiled version of the command line tools is not available for all platforms.
...you may want to check the sqlite_version definition in db/sqlite
3/src/sqlite
3.h for the current version if you are having problems.
...the vacuum command is essentially the same as the command line sqlite
3 olddb .dump | sqlite
3 newdb; mv newdb olddb.
...And 3 more matches
Storage
in javascript, there is a useful helper object (mozistoragestatementparams) available () that makes binding parameters much easier: var statement = dbconn.createstatement("select * from table_name where id = :row_id"); statement.params.row_id = 12
34; use :boundparametername the same way for numeric and non-numeric columns.
...the example below uses mozistoragestatement.bindint
32parameter().
... c++ example: nscomptr<mozistoragestatement> statement; rv = mdbconn->createstatement(ns_literal_cstring("select * from table_name where id = ?1"), getter_addrefs(statement)); ns_ensure_success(rv, rv); rv = statement->bindint
32parameter(0, 12
34); ns_ensure_success(rv, rv); note: numerical indexes for parameters are always one less than the number you write in the sql.
...And 3 more matches
Xptcall Porting Guide
the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // platform specific parts | +--mac // mac ppc | +--unix // all unix | \--win
32 // win
32 | +--test // simple tests to get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given platforms and to integrate into the build system as appropriate for their platform.
...the invoke functionality requires the implementation of the following on each platform (from xptcall/public/xptcall.h): xptc_public_api(nsresult) ns_invokebyindex(nsisupports* that, pruint
32 methodindex, pruint
32 paramcount, nsxptcvariant* params); calling code is expected to supply an array of nsxptcvariant structs.
...here are examples of this implementation for win
32 and linux x86, netbsd x86, and freebsd.
...And 3 more matches
XPCOM
this can create a difficult situation for extension developers trying to support multiple gecko versions (firefox 2 and
3, for example).creating a python xpcom componentcreating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface).
...ation on the workings of xpcom look elsewhere.how to pass an xpcom object to a new windowif you want to be able to call functions within an xpcom object from a xul window's code, you can do so if you pass the xpcom object as one of the arguments to the window creation method.interfacing with the xpcom cycle collectorthis is a quick overview of the cycle collector introduced into xpcom for firefox
3, including a description of the steps involved in modifying an existing c++ class to participate in xpcom cycle collection.
...it is available to trusted callers, meaning extensions and firefox components only.the thread managerthe thread manager, introduced in firefox
3, offers an easy to use mechanism for creating threads and dispatching events to them for processing.
...And 3 more matches
MailNews Protocols
imap pop
3 nntp smtp mailbox rss these are all implemented in c++, except for rss.
...imap,pop
3, and nntp are "incoming" protocols, i.e., we retrieve messages from a server, and represent them as folders to the user.
... those protocols all have the following, defined in the corresponding protocol subdirectory of mailnews (i.e., mailnews/imap, mailnews/local (for pop
3), mailnews/news): an incoming server class, which implements nsimsgincomingserver and inherits from mailnews/base/util/nsmsgincomingserver, i.e.., nspop
3incomingserver, nsimapincomingserver, nsnntpincomingserver.
...And 3 more matches
Declaring types
for example, to define a new
32-bit integer variable with the value 5: var i = ctypes.int
32_t(5); you can then pass a pointer to this value to a c function that requires a pointer to a
32-bit integer, like this: some_c_function(i.address()); declaring new primitive types there are times when you want to create new types that are simply new names for existing primitive types.
... for example, on windows, you may wish to be able to use the windows-standard dword type name for unsigned
32-bit integers.
... to declare this type, you can simply do: const dword = ctypes.uint
32_t; after doing this, dword is a ctype that can then be used to represent
32-bit unsigned integers.
...And 3 more matches
Validators - Firefox Developer Tools
applications and services devedge web tune-up wizard this interface to w
3c services guides beginning-to-intermediate web authors through the process of updating content to support netscape 7.x, mozilla and other browsers that support w
3c standards.
... w
3c html validator the w
3c html validator will validate any web page according to the w
3c html standards.
... w
3c css validator the w
3c css validator will validate the css within any web page or external css files according to the w
3c css standards.
...And 3 more matches
Using the CSS Typed Object Model - Web APIs
we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 4
3%, 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/1679
3/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; fon...
....log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mozillademos.org/files/1679
3/magicwand.png") // cssunparsedvalue let unit = allcomputedstyles.get('--unit'); console.log( unit ) // let parsedunit = cssnumericvalue.parse( unit ); console.log( parsedunit ); console.log( parsedunit.unit ); console.log( parsedunit.value ); for this example to work, the example must be closed out here.
...in our css we have width: calc(
30% + 20px);, which is a calc() function to define the width.
...And 3 more matches
Advanced animations - Web APIs
<canvas id="canvas" width="600" height="
300"></canvas> as usual, we need a drawing context first.
... <canvas id="canvas" style="border: 1px solid" width="600" height="
300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.cle...
... second demo <canvas id="canvas" style="border: 1px solid" width="600" height="
300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.cle...
...And 3 more matches
Transformations - Web APIs
; // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // 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 ...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i <
3; i++) { for (var j = 0; j <
3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate().
... 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 = '#4d4e5
3'; 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 ...
...And 3 more matches
Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(
3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image
3"); var objoutput = document.getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", width=" + arri...
...\/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/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image
3: no height, width, but style="height: 50px; width: 500px;" <img id="image
3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { docu...
... } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example
3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom.
...And 3 more matches
How to create a DOM tree - Web APIs
dynamically creating a dom tree consider the following xml document: <?xml version="1.0"?> <people> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="
321 south st" city="denver" state="co" country="usa"/> <address street="12
3 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="
321 north st" city="atlanta" state="ga" country="usa"/> <address street="12
3 west st" city="seattle" state="wa" country="usa"/> <address street="
321 south avenue" city="denver" sta...
...te="co" country="usa"/> </person> </people> the w
3c dom api, supported by mozilla, can be used to create an in-memory representation of this document like so: var doc = document.implementation.createdocument("", "", null); var peopleelem = doc.createelement("people"); var personelem1 = doc.createelement("person"); personelem1.setattribute("first-name", "eric"); personelem1.setattribute("middle-initial", "h"); personelem1.setattribute("last-name", "jung"); var addresselem1 = doc.createelement("address"); addresselem1.setattribute("street", "
321 south st"); addresselem1.setattribute("city", "denver"); addresselem1.setattribute("state", "co"); addresselem1.setattribute("country", "usa"); personelem1.appendchild(addresselem1); var addresselem2 = doc.createelement("address"); addresselem...
...2.setattribute("street", "12
3 main st"); addresselem2.setattribute("city", "arlington"); addresselem2.setattribute("state", "ma"); addresselem2.setattribute("country", "usa"); personelem1.appendchild(addresselem2); var personelem2 = doc.createelement("person"); personelem2.setattribute("first-name", "jed"); personelem2.setattribute("last-name", "brown"); var addresselem
3 = doc.createelement("address"); addresselem
3.setattribute("street", "
321 north st"); addresselem
3.setattribute("city", "atlanta"); addresselem
3.setattribute("state", "ga"); addresselem
3.setattribute("country", "usa"); personelem2.appendchild(addresselem
3); var addresselem4 = doc.createelement("address"); addresselem4.setattribute("street", "12
3 west st"); addresselem4.setattribute("city", "seattle"); addresselem4.setattr...
...And 3 more matches
Element - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interfa...
... note: in firefox
3.5 and earlier, html elements are in no namespace.
...And 3 more matches
FileSystemSync - Web APIs
about this document this document was last updated on march 2, 2012 and follows the w
3c specifications (working draft) drafted on april 19, 2011.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemsync non-standardchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie ...
...efixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix: webkitwebview android full support ≤
37prefixed full support ≤
37prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support ...
...And 3 more matches
GamepadEvent - Web APIs
working 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 —
34prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18firefox full support 29 full support 29 no support ...
... no support 15 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari full support 10.1webview android no support nochrome android full support yesfirefox android full support
32opera android full support 22 full support 22 no support 14 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 10.
3samsung internet android full support y...
...esgamepadevent() constructorchrome full support
35edge full support 12firefox full support 29 full support 29 no support 24 — 28disabled disabled from version 24 until version 28 (exclusive): this feature is behind the dom.gamepad.enabled preference (needs to be set to true).
...And 3 more matches
Ajax navigation example - Web APIs
nstatus / 100)) { /* case 1: // informational 1xx console.log("information code " + vmsg); 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 */...
...dingimg = new image(), opageinfo = { 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", 20
3: "non-authoritative information", 204: "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",
30
3: "see other",
304: "not modified", ...
...
305: "use proxy",
306: "reserved",
307: "temporary redirect",
308: "permanent redirect", 400: "bad request", 401: "unauthorized", 402: "payment required", 40
3: "forbidden", 404: "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", 41
3: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 417: "expectation fai...
...And 3 more matches
KeyboardEvent.location - Web APIs
dom_key_location_numpad
3 the key was on the numeric keypad, or has a virtual key code that corresponds to the numeric keypad.
... dom_key_location_mobile obsolete since gecko
38 4 the key was on a mobile device; this can be on either a physical keypad or a virtual keyboard.
...however, at gecko
38, this is dropped.
...And 3 more matches
Capabilities, constraints, and settings - Web APIs
} else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: 1.777777778, framerate: { max:
30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found are supported (width, height, framerate, and facingmode), w...
...e set up constraints which request a width no smaller than 640 and no larger than 1920 (but preferably 1920), a height no smaller than 400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater than
30 frames per second.
... below all of that, you'll see the video itself.</p> <p>click the "start" button to begin.</p> <h
3>constrainable properties available:</h
3> <ul id="supportedconstraints"> </ul> <div id="startbutton" class="button"> start </div> <div class="wrapper"> <div class="trackrow"> <div class="leftside"> <h
3>requested video constraints:</h
3> <textarea id="videoconstrainteditor" cols=
32 rows=8></textarea> </div> <div class="rightside"> <h
3>actual video settings:</h
3> ...
...And 3 more matches
NotificationEvent - Web APIs
opera full support
37safari ?
... webview android no support nochrome android full support 42firefox android full support 44opera android full support
37safari ios ?
... opera full support
37safari ?
...And 3 more matches
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; } #target
3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
... // log events flag var logevents = false; // event caches, one per touch target var evcache1 = new array(); var evcache2 = new array(); var evcache
3 = new array(); register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup.
... el.onpointerup = pointerup_handler; el.onpointercancel = pointerup_handler; el.onpointerout = pointerup_handler; el.onpointerleave = pointerup_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target
3"); } pointer down the pointerdown event is fired when a pointer (mouse, pen/stylus or touch point on a touchscreen) makes contact with the contact surface.
...And 3 more matches
PushEvent - Web APIs
var 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/0
3/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
... 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.0pushevent() constructor experimentalchrome full support 42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
...And 3 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/...
...><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseli...
...ne="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" targe...
...And 3 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 3 more matches
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="5...
...0" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499...
...And 3 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</tex...
...t></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y...
...And 3 more matches
Selection API - Web APIs
ung 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 ?
... yessafari ios full support yessamsung internet android full support yesfocusnode experimentalchrome full support yesedge full support 12firefox full support
3.6ie full support 10opera full support yessafari full support 5.1webview android full support yeschrome android full support yesfirefox android full support ...
...And 3 more matches
Slottable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslottable experimentalchrome full support 5
3edge full support 79firefox full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (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 40safari full support 10.1webview android full support 5
3chrome android full support 5
3firefox android full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (ne...
...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 5
3edge full support 79firefox full support 6
3 full support 6
3 no support ...
...And 3 more matches
TextDecoder() - Web APIs
bel is associated with a specific encoding type: possible values of utflabel encoding "unicode-1-1-utf-8", "utf-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-8859-2", "iso-ir-101", "iso8859-2", "iso88592", "iso_8859-2", "iso_8859-2:1987", "l2", "latin2" 'iso-8859-2' "csisolatin
3", "iso-8859-
3", "iso-ir-109", "iso8859-
3", "iso8859
3", "iso_8859-
3", "iso_8859-
3:1988", "l
3", "latin
3" 'iso-8859-
3' "csisolatin4", "iso-8859-4", "iso-ir-110", "iso8859-4", "iso88594", "iso_8859-4", "iso_8859-4:1988", "l4", "latin4" 'iso-8859-4' "csisolatincyrillic", "cyrillic", "iso-8859-5", "iso-ir-144", "iso88595", "iso_8859-5", "iso_8859-5:1988" 'iso-8859-5'...
...9-6-e", "iso-8859-6-i", "iso-ir-127", "iso8859-6", "iso88596", "iso_8859-6", "iso_8859-6:1987" 'iso-8859-6' "csisolatingreek", "ecma-118", "elot_928", "greek", "greek8", "iso-8859-7", "iso-ir-126", "iso8859-7", "iso88597", "iso_8859-7", "iso_8859-7:1987", "sun_eu_greek" 'iso-8859-7' "csiso88598e", "csisolatinhebrew", "hebrew", "iso-8859-8", "iso-8859-8-e", "iso-ir-1
38", "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-1
3", "iso8859-1
3", "iso88591
3" 'iso-8859-1
3' "iso-8859-14", "iso8859-14", "iso885914" ...
...r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-874", "iso-8859-11", "iso8859-11", "iso885911", "tis-620", "windows-874" 'windows-874' "cp1250", "windows-1250", "x-cp1250" 'windows-1250' "cp1251", "windows-1251", "x-cp1251" 'windows-1251' "ansi_x
3.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' "cp125
3", "windows-125
3", "x-cp125
3" 'windows-125
3' "cp1254", "csisolatin5", "iso-8859-9", "iso-ir-148", "iso8859-9", "iso88599", "iso_8859-9", "iso_...
...And 3 more matches
TextEncoder - Web APIs
example const encoder = new textencoder() const view = encoder.encode('€') console.log(view); // uint8array(
3) [226, 1
30, 172] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding.
...finally, note that you should run the below code through a minifier (especially closure compiler) to turn sequences like 0x1e <<
3 into 0xf0.
... if (typeof textencoder === "undefined") { textencoder=function textencoder(){}; textencoder.prototype.encode = function encode(str) { "use strict"; var len = str.length, respos = -1; // the uint8array's length must be at least
3x the length of the string because an invalid utf-16 // takes up the equivelent space of
3 utf-8 characters to encode it properly.
...And 3 more matches
WebGLRenderingContext.renderbufferStorage() - Web APIs
gl.depth_stencil when using a webgl 2 context, the following values are available additionally: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r
32ui gl.r
32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg
32ui gl.rg
32i 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.rgba
32i gl.rgba
32ui gl.depth_component24 gl.depth_component
32f gl.depth24_st...
...encil8 gl.depth
32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba
32f_ext: rgba
32-bit floating-point type.
... ext.rgb
32f_ext: rgb
32-bit floating-point type.
...And 3 more matches
WebGLRenderingContext - Web APIs
to get an access to a webgl context for 2d and/or
3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it.
... if you require a webgl 2.0 context, see webgl2renderingcontext; this supplies access to an implementation of opengl es
3.0 graphics.
... webglrenderingcontext.uniform[12
34][fi][v]() specifies a value for a uniform variable.
...And 3 more matches
Compressed texture formats - Web APIs
ext.compressed_rgba_s
3tc_dxt1_ext for the webgl_compressed_texture_s
3tc extension.) these can then be used with compressedteximage[2
3]d or compressedtexsubimage[2
3]d instead of teximage2d calls.
...which formats support texture_2d_array and texture_
3d targets (in combination with compressedteximage
3d) are noted in the following table.
... extension notes texture_2d_array texture_
3d webgl_compressed_texture_astc yes yes webgl_compressed_texture_atc not usable with compressedtexsubimage2d/copytexsubimage2d.
...And 3 more matches
Adding 2D content to a WebGL context - Web APIs
drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in
3d space.
...vssource = ` attribute vec4 avertexposition; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; void main() { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; } `; it's worth noting that we're using a vec4 attribute for the vertex position, which doesn't actually use a 4-component vector; that is, it could be handled as a vec2 or vec
3 depending on the situation.
...we'll do that using a function we call initbuffers(); as we explore more advanced webgl concepts, this routine will be augmented to create more -- and more complex --
3d objects.
...And 3 more matches
Lighting in WebGL - Web APIs
simulating lighting and shading in
3d although going into detail about the theory behind simulated lighting in
3d graphics is far beyond the scope of this article, it's helpful to know a bit about how it works.
...0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // bottom 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // right 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // left -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0 ]; gl.bufferdata(gl.array_buffer, new float
32array(vertexnormals), gl.static_draw); ...
... { const numcomponents =
3; const type = gl.float; const normalize = false; const stride = 0; const offset = 0; gl.bindbuffer(gl.array_buffer, buffers.normal); gl.vertexattribpointer( programinfo.attriblocations.vertexnormal, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexnorma...
...And 3 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
at we will oscillate with our second, low frequency oscillator: let amp = audioctx.creategain(); amp.gain.setvalueattime(1, audioctx.currenttime); creating the second, low frequency, oscillator we'll now create a second — square — wave (or pulse) oscillator, to alter the amplification of our first sine wave: let lfo = audioctx.createoscillator(); lfo.type = 'square'; lfo.frequency.value =
30; connecting the graph the key here is connecting the graph correctly, and also starting both oscillators: lfo.connect(amp.gain); osc.connect(amp).connect(audioctx.destination); lfo.start(); osc.start(); osc.stop(audioctx.currenttime + pulsetime); note: we also don't have to use the default wave types for either of these oscillators we're creating — we could use a wavetable and the periodi...
...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="1
320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="
30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz =
30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); osc.type = 'sine'; osc.frequency.setvalueattime(pulsehz, audioctx.currenttime); let amp = audioctx.creategain(); amp.gain.setvalueattime(1, audioctx.currenttime); let lfo = audioctx.createoscillator(); lfo.type = 'square'; lfo.frequency.setvalueattime(lfohz, audioctx.currenttime); ...
...And 3 more matches
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's getoffsetreferencespace() method returns a new reference space object which describes the relative difference in position between the object on which the method is called and a given point in
3d space.
... in other words, when you have an object in
3d space and need to position another object relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have relative to the position and orientation of the object on which you call getoffsetreferencespace().
... teleporting or setting the position of the viewer upon first creating a scene, you may need to set the user's position within the
3d world.
...And 3 more matches
::first-letter (:first-letter) - CSS: Cascading Style Sheets
/* selects the first letter of a <p> */ p::first-letter { font-size: 1
30%; } the first letter of an element is not always trivial to identify: punctuation that precedes or immediately follows the first letter is included in the match.
... css
3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...s border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css
3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
...And 3 more matches
CSS values and units - CSS: Cascading Style Sheets
ch average character advance of a narrow glyph in the element’s font, as represented by the “0” (zero, u+00
30) glyph.
... ic average character advance of a full width glyph in the element’s font, as represented by the “水” (cjk water ideograph, u+6c
34) glyph.
... angle units angle values are represented by the type <angle> and accept the following values: unit name description deg degrees there are
360 degrees in a full circle.
...And 3 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 4
3 full support 4
3 full support
3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes befor...
... full support 5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support
30 full support
30 full support 15prefixed 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 ...
...And 3 more matches
border-image-slice - CSS: Cascading Style Sheets
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 14 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 m...
...the source image for the borders is as follows: the diamonds are
30px across, therefore setting
30 pixels as the value for both border-width and border-image-slice will get you complete and fairly crisp diamonds in your border: border-width:
30px; border-image-slice:
30; these are the default values we have used in this example.
... however, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have: border-image-slice changes the size of the image slice sampled for use in each border and border corner (and the content area, if the fill keyword is used) — varying this away from
30 causes the border to look somewhat irregular, but can have some interesting effects.
...And 3 more matches
border-radius - CSS: Cascading Style Sheets
er-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-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px
30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px
30%; /* (first ra...
...dius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em
30px
35em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <length> or <percentage> values.
...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; /* ...
...And 3 more matches
font-size-adjust - CSS: Cascading Style Sheets
imes, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment css fonts module level
3the definition of 'font-size-adjust' in that specification.
...it has been newly defined in css
3.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-size-adjustchrome full support 4
3disabled full support 4
3disabled disabled from version 4
3: this feature is behind the enable experimental web platform features preference.
...And 3 more matches
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight:
300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200,
300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... inherited value bolder lighter 100 400 100 200 400 100
300 400 100 400 700 100 500 700 100 600 900 400 700 900 400 800 900 700 900 900 700 common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names (see the opentype specification): value common weight name 100 thin (...
...And 3 more matches
<integer> - CSS: Cascading Style Sheets
during the css
3 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 224-1 and 2
30-1 were also proposed.
... examples valid integers 12 positive integer (without a leading + sign) +12
3 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.
...\
35 escaped unicode characters are not allowed, even if they are an integer (here: 5).
...And 3 more matches
mix-blend-mode - CSS: Cascading Style Sheets
#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: #fff
3d4; 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 { ...
... transform-origin: center; transform: rotate(-
30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-blend-mode: screen; } .overlay .item { mix-blend-mode: overlay; } .darken .item { mix-blend-mode: darken; } .lighten .item { mix-blend-mode: lighten; } .color-dodge .item { mix-blend-mode: color-dodge; } .color-burn .item { mix-blend-mode: color-burn; } .hard-light .item { mix-blend-mode: hard-light; } .soft-light .item { mix-blend-mode: soft-light; } .difference .item { ...
... .item { mix-blend-mode: exclusion; } .hue .item { mix-blend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: 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 */ posit...
...And 3 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
apping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.
3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
... 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
perspective() - CSS: Cascading Style Sheets
the perspective() css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were
3-dimensional.
...this differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in
3-dimensional space.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
...And 3 more matches
transform-origin - CSS: Cascading Style Sheets
syntax /* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin:
3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px
30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -
3px; /* x-offset-keyword | y-offset-keyw...
...lc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1"> </div> .box1 { margin: 0.5em; width:
3em; height:
3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(
30deg); <div class="box2"> </div> .box2 { margin: 0.5em; width:
3em; height:
3em; border: solid 1px; background-color: palegreen; transform: rotate(
30deg); -webkit-transform: rotate(
30deg); } ...
... transform: rotate(
30deg); transform-origin: 0 0; <div class="box
3"> </div> .box
3 { 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="box4"> </div> .box4 { 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; ...
...And 3 more matches
url() - CSS: Cascading Style Sheets
ycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png")
30 fill /
30px /
30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https:/...
...} @import url("https://www.example.com/style.css"); @namespace url(http://www.w
3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page).
...css values and units level
3 returned to the narrower, initial definition.
...And 3 more matches
CSS: Cascading Style Sheets
css among the core languages of the open web and is standardized across web browsers according to the w
3c specification.
...you might have heard about css1, css2.1, css
3.
... from css
3, the scope of the specification increased significantly and the progress on different css modules started to differ so much, that it became more effective to develop and release recommendations separately per module.
...And 3 more matches
HTML5 - Developer guides
2d/
3d graphics and effects: allowing a much more diverse range of presentation options.
...this page was created with help from the w
3c as a quick guide for those who have some basic familiarity and experience using html5.
... online and offline events firefox
3 supports whatwg online and offline events, which let applications and extensions detect whether or not there's an active internet connection, as well as to detect when the connection goes up and down.
...And 3 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
firefox 2
3 removed support for dash for html5 webm video.
...to start with you'll only need the ffpmeg program from ffmpeg.org, with libvpx and libvorbis support for webm video and audio, at least version 2.5 (probably; this was tested ith
3.2.5).
... 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 scale=640:
360 -b:v 750k -dash 1 video_640x
360_750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:
360 -b:v 1000k -dash 1 video_640x
360_1000k.we...
...And 3 more matches
<input type="range"> - HTML: Hypertext Markup Language
the default stepping value for range inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5,
3.5,...
...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.14" 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 th...
...And 3 more matches
itemscope - HTML: Hypertext Markup Language
<div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d06
3c
361c1.jpg" width="50" height="50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime="2009-11-05" itemprop="datepublished">november 5, 2009</time> </p> <span itemprop="description">this is my grandmother's apple pie recipe.
... 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="pt
30m" itemprop="preptime">
30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h
30m" itemprop="totaltime">1 hour
30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritioninformation"> serving size: <span itemprop="servingsize">1 medium slice</span><br> calories per serving: <span itemprop="calories">250 cal</span><br> ...
... fat per serving: <span itemprop="fatcontent">12 g</span><br> </span> <p> ingredients:<br> <span itemprop="recipeingredient">thinly-sliced apples: 6 cups<br></span> <span itemprop="recipeingredient">white sugar:
3/4 cup<br></span> ...
...And 3 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
http/1.1 200 ok date: mon, 01 dec 2008 00:2
3:5
3 gmt server: apache/2 access-control-allow-origin: * keep-alive: timeout=2, max=100 connection: keep-alive transfer-encoding: chunked content-type: application/xml […xml data…] in response, the server sends back an access-control-allow-origin header.
...intosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type http/1.1 204 no content date: mon, 01 dec 2008 01:15:
39 gmt server: apache/2 access-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: 86400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive once the preflight request is complete, the real request is sent: post /doc http/1.1 host: bar.other user-...
...ext/xml; charset=utf-8 referer: https://foo.example/examples/preflightinvocation.html content-length: 55 origin: https://foo.example pragma: no-cache cache-control: no-cache <person><name>arun</name></person> http/1.1 200 ok date: mon, 01 dec 2008 01:15:40 gmt server: apache/2 access-control-allow-origin: https://foo.example vary: accept-encoding, origin content-encoding: gzip content-length: 2
35 keep-alive: timeout=2, max=99 connection: keep-alive content-type: text/plain [some xml payload] lines 1 - 10 above represent the preflight request with the options method.
...And 3 more matches
CSP: script-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
...And 3 more matches
CSP: style-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
...And 3 more matches
ETag - HTTP
they are a string of ascii characters placed between double quotes, like "675af
3456
3dc-tr
34".
... examples etag: "
33a64df551425fcc55e4d42a148795d9f25f89d4" 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: "
33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
...And 3 more matches
Firefox user agent string reference - HTTP
though fixed in firefox 69, previous
32-bit versions of firefox running on 64-bit processors would report that the system is using a
32-bit cpu.
... focus version (rendering engine) user agent string 1.0 (webview mobile) mozilla/5.0 (linux; android 7.0) applewebkit/5
37.
36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.
3029.8
3 mobile safari/5
37.
36 1.0 (webview tablet) mozilla/5.0 (linux; android 7.0) applewebkit/5
37.
36 (khtml, like gecko) version/4.0 focus/1.0 chrome/59.0.
3029.8
3 safari/5
37.
36 6.0 (geckoview) mozilla/5.0 (android 7.0; mobile; rv:62.0) gecko/62.0 firefox/62.0 klar for android since version 4.1, klar for and...
... klar version (rendering engine) user agent string 1.0 (webview) mozilla/5.0 (linux; android 7.0) applewebkit/5
37.
36 (khtml, like gecko) version/4.0 klar/1.0 chrome/58.0.
3029.8
3 mobile safari/5
37.
36 4.1+ (webview) mozilla/5.0 (linux; android 7.0) applewebkit/5
37.
36 (khtml, like gecko) version/4.0 focus/4.1 chrome/62.0.
3029.8
3 mobile safari/5
37.
36 6.0+ (geckoview) mozilla/5.0 (android 7.0; mobile; rv:62.0) gecko/62.0 firefox/62.0 focus for ios version 7 of focus for ios uses a user agent string with the following format: mozilla/5.0 (iphone; cpu iphone os 12_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko)...
...And 3 more matches
Loops and iteration - JavaScript
example 1 the following while loop iterates as long as n is less than
3: let n = 0; let x = 0; while (n <
3) { n++; x += n; } with each iteration, the loop increments n and adds that value to x.
... therefore, x and n take on the following values: after the first pass: n = 1 and x = 1 after the second pass: n = 2 and x =
3 after the third pass: n =
3 and x = 6 after completing the third pass, the condition n <
3 is no longer true, so the loop terminates.
... the syntax of the continue statement looks like the following: continue [label]; example 1 the following example shows a while loop with a continue statement that executes when the value of i is
3.
...And 3 more matches
RangeError: radix must be an integer - JavaScript
the javascript exception "radix must be an integer at least 2 and no greater than
36" occurs when the optional radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and
36.
... message rangeerror: invalid argument (edge) rangeerror: radix must be an integer at least 2 and no greater than
36 (firefox) rangeerror: tostring() radix argument must be between 2 and
36 (chrome) error type rangeerror what went wrong?
...its value must be an integer (a number) between 2 and
36, specifying the base of the number system to be used for representing numeric values.
...And 3 more matches
Arrow function expressions - JavaScript
this.age++; }, 1000); } var p = new person(); in ecmascript
3/5, the this issue was fixable by assigning the value in this to a variable that could be closed over.
...me 81 demonstrates that 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) vm515
33: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 <anon...
...ymous>:1:1 f2 @ vm51712:1 (anonymous) @ vm51800:1 > f
3 = x => (z1 = x + 1) x => (z1 = x + 1) > z1 vm51891:1 uncaught referenceerror: z1 is not defined at <anonymous>:1:1 (anonymous) @ vm51891:1 > f
3(10) 11 > z1 11 f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.
...And 3 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] 14 second call 14
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 3 more matches
Array.prototype.every() - JavaScript
//
3.
... let len be touint
32(lenvalue).
... function isbigenough(element, index, array) { return element >= 10; } [12, 5, 8, 1
30, 44].every(isbigenough); // false [12, 54, 18, 1
30, 44].every(isbigenough); // true using arrow functions arrow functions provide a shorter syntax for the same test.
...And 3 more matches
Array.from() - JavaScript
1 : -1) * math.floor(math.abs(number)); }; var maxsafeinteger = math.pow(2, 5
3) - 1; var tolength = function (value) { var len = tointeger(value); return math.min(math.max(len, 0), maxsafeinteger); }; var setgetitemhandler = function setgetitemhandler(isiterator, items) { var iterator = isiterator && items[symboliterator](); return function getitem(k) { return isiterator ?
... var items = object(arraylikeoriterator); var isiterator = iscallable(items[symboliterator]); //
3.
... var len = tolength(items.length); // 1
3.
...And 3 more matches
Atomics.notify() - JavaScript
note: this operation works with a shared int
32array only.
... syntax atomics.notify(typedarray, index, count) parameters typedarray a shared int
32array.
... exceptions throws a typeerror, if typedarray is not a int
32array.
...And 3 more matches
Object.defineProperty() - JavaScript
var o = {}; // creates a new object // example of an object property added // with defineproperty with a data property descriptor object.defineproperty(o, 'a', { value:
37, writable: true, enumerable: true, configurable: true }); // 'a' property exists in the o object and its value is
37 // example of an object property added // with defineproperty with an accessor property descriptor var bvalue =
38; object.defineproperty(o, 'b', { // using shorthand method names (es2015 feature).
... // this is equivalent to: // get: function() { return bvalue; }, // set: function(newvalue) { bvalue = newvalue; }, get() { return bvalue; }, set(newvalue) { bvalue = newvalue; }, enumerable: true, configurable: true }); o.b; //
38 // 'b' property exists in the o object and its value is
38 // the value of o.b is now always identical to bvalue, // unless o.b is redefined // you cannot try to mix both: object.defineproperty(o, 'conflict', { value: 0x9f91102, get() { return 0xdeadbeef; } }); // throws a typeerror: value appears // only in data descriptors, // get appears only in accessor descriptors modifying a property when the property already exists, object.defineproperty() attempts to modify the property according to the values in the descriptor and the object's curr...
... var o = {}; // creates a new object object.defineproperty(o, 'a', { value:
37, writable: false }); console.log(o.a); // logs
37 o.a = 25; // no error thrown // (it would throw in strict mode, // even if the value had been the same) console.log(o.a); // logs
37.
...And 3 more matches
String.fromCharCode() - JavaScript
the range is between 0 and 655
35 (0xffff).
...the remaining code points, in the range of 655
36 (0x010000) to 1114111 (0x10ffff) are known as supplementary characters.
...for example, both string.fromcharcode(0xd8
3c, 0xdf0
3) and \ud8
3c\udf0
3 return code point u+1f
30
3 "night with stars".
...And 3 more matches
String.prototype.slice() - JavaScript
(for example, if beginindex is -
3 it is treated as str.length -
3.) if beginindex is greater than or equal to str.length, slice() returns an empty string.
...(for example, if endindex is -
3 it is treated as str.length -
3.) return value a new string containing the extracted section of the string.
...str.slice(1, 4) extracts the second character through the fourth character (characters indexed 1, 2, and
3).
...And 3 more matches
eval() - JavaScript
you can postpone evaluation of an expression involving x by assigning the string value of the expression, say "
3 * x + 2", to a variable, and then calling eval() at a later point in your script.
...this can be done with eval(): var obj = { a: 20, b:
30 }; var propname = getpropname(); // returns "a" or "b" eval( 'var result = obj.' + propname ); however, eval() is not necessary here.
...instead, use the property accessors, which are much faster and safer: var obj = { a: 20, b:
30 }; var propname = getpropname(); // returns "a" or "b" var result = obj[ propname ]; // obj[ "a" ] is the same as obj.a you can even use this method to access descendant properties.
...And 3 more matches
for await...of - JavaScript
examples iterating over async iterables you can also iterate over an object that explicitly implements async iterable protocol: const asynciterable = { [symbol.asynciterator]() { return { i: 0, next() { if (this.i <
3) { return promise.resolve({ value: this.i++, done: false }); } return promise.resolve({ done: true }); } }; } }; (async function() { for await (let num of asynciterable) { console.log(num); } })(); // 0 // 1 // 2 iterating over async generators since the return values of async generators conform to the async iterable protocol, they can be loo...
... async function* asyncgenerator() { let i = 0; while (i <
3) { yield i++; } } (async function() { for await (let num of asyncgenerator()) { console.log(num); } })(); // 0 // 1 // 2 for a more concrete example of iterating over an async generator using for await...of, consider iterating over data from an api.
... 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.
...And 3 more matches
Template literals (Template strings) - JavaScript
ey] : dict[key]; result.push(value, strings[i + 1]); }); return result.join(''); }); } let t1closure = template`${0}${1}${0}!`; //let t1closure = template(["","","","!"],0,1,0); t1closure('y', 'a'); // "yay!" let t2closure = template`${0} ${'foo'}!`; //let t2closure = template([""," ","!"],0,"foo"); t2closure('hello', {foo: 'world'}); // "hello world!" let t
3closure = template`i'm ${'name'}.
... i'm almost ${'age'} years old.`; //let t
3closure = template(["i'm ", ".
... i'm almost ", " years old."], "name", "age"); t
3closure('foo', {name: 'mdn', age:
30}); //"i'm mdn.
...And 3 more matches
Codecs used by WebRTC - Web media technologies
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 240 pixels tall.
... sdp supports a codec-independent way to specify preferred video resolutions (rfc 62
36.
... max-dpb if specified and supported, max-dpb indicates the maximum decoded picture buffer size, given in units of 8/
3 macroblocks.
...And 3 more matches
How to make PWAs installable - Progressive web apps (PWAs)
previous overview: progressive next in the last article, we read about how the example application, js1
3kpwa, works offline thanks to its service worker, but we can go even further and allow users to install the web app on mobile and desktop browers that support doing so.
... the js1
3kpwa.webmanifest file of the js1
3kpwa web app is included in the <head> block of the index.html file using the following line of code: <link rel="manifest" href="js1
3kpwa.webmanifest"> there are a few common kinds of manifest file that have been used in the past: manifest.webapp was popular in firefox os app manifests, and many use manifest.json for web manifests as the contents are organized i...
...however, the .webmanifest file format is explicitly mentioned in the w
3c manifest specification, so that's what we'll use here.
...And 3 more matches
end - SVG: Scalable Vector Graphics
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w
3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="
35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin=...
... 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 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="11...
...0" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="
30" x2="110" y2="
30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w
3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w
3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="
35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style...
...And 3 more matches
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w
3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,
35 2,
35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,
35 102,
35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray.
... example html,body,svg { height:100% } <svg viewbox="-10 -10
320 120" xmlns="http://www.w
3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,
35 2,
35 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 ...
...And 3 more matches
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w
3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="
3" x2="5" y2="
3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" ...
.../> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,
3 h4 m1,5 h4" 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.w
3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m
3,
3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="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...
...And 3 more matches
Basic Transformations - SVG: Scalable Vector Graphics
an example: <svg width="
30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following transformations are summed up in an element's transform attribute.
... <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.
...And 3 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
note: in firefox
3+, rgba values are also allowed, and will give the same effect.
... <?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w
3.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 width of this stroke.
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w
3.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 140 80 100 120 140" 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" stro...
...And 3 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w
3.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 ...
...nt=".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" k
3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> ...
... <path fill="#d90000" d="m60,56 c-
30,0 -
30,-40 0,-40 h80 c
30,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 3 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
it is enabled by default in firefox 52+ and chrome 57+/latest opera (you can also run wasm code in firefox 47+ by enabling the javascript.options.wasm flag in about:config, or chrome (51+) and opera (
38+) by going to chrome://flags and enabling the experimental webassembly flag.) note: if you try to open generated html file (hello.html) directly from your local hard drive (e.g.
... now navigate into your new directory (again, in your emscripten compiler environment terminal window), and run the following command: emcc -o hello2.html hello2.c -o
3 -s wasm=1 --shell-file html_template/shell_minimal.html the options we've passed are slightly different this time: we've specified -o hello2.html, meaning that the compiler will still output the javascript glue code and .html.
...emcc -o hello2.js hello2.c -o
3 -s wasm=1.
...And 3 more matches
context-menu - Archive of obsolete content
your context listener is called even if any declarative contexts are not current (since firefox
36).
... menu that reacts to clicks for any child items.: var cm = require("sdk/context-menu"); cm.menu({ label: "my menu", contentscript: 'self.on("click", function (node, data) {' + ' console.log("you clicked " + data);' + '});', items: [ cm.item({ label: "item 1", data: "item1" }), cm.item({ label: "item 2", data: "item2" }), cm.item({ label: "item
3", data: "item
3" }) ] }); communicating with the add-on often you will need to collect some kind of information in the click listener and perform an action unrelated to content.
... const { getmostrecentbrowserwindow } = require("sdk/window/utils"); var cm = require("sdk/context-menu"); var uuid = require('sdk/util/uuid').uuid(); var uuidstr = uuid.number.substring(1,
37); cm.item({ data: uuidstr+"this is a tooltip", label: "just a tigger, will never show up", contentscript: 'self.on("context", function(){self.postmessage(); return false;})', onmessage: function(){ var cmitems = getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].toolti...
...And 2 more matches
page-mod - Archive of obsolete content
e("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
34, you can use "./my-script.js" as an alias for self.data.url("my-script.js").
...the exclude option is new in firefox
32.
... var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscriptfile: data.url("my-script.js") }); from firefox
34, you can use "./my-script.js" as an alias for the resource:// url pointing to the script in your "data" directory.
...And 2 more matches
cfx to jpm - Archive of obsolete content
you can use jpm from firefox
38 onwards.
... you can edit this file to create your own id, but if you don't, cfx will generate one for you, which will look something like "jid1-f
3boogbjqje67a".
... so: if you never did anything with ids when using cfx, then the value in your add-on's package.json will be something like "jid1-f
3boogbjqje67a", and the corresponding id in the install.rdf will be "jid1-f
3boogbjqje67a@jetpack".
...And 2 more matches
Getting Started (jpm) - Archive of obsolete content
you can use jpm from firefox
38 onwards.
... prerequisites to create add-ons for firefox using the sdk, you'll need: firefox version
38 or later.
...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", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...And 2 more matches
Multiple item extension packaging - Archive of obsolete content
from the release of firefox 5
3, multiple item extension packages are no longer supported and will not load.
... for the firefox and thunderbird 1.5 extension manager to determine that the package is a multiple item package, the em:type specified in your install.rdf must be
32 and specified as <em:type nc:parsetype="integer">
32</em:type>.
...<rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type nc:parsetype="integer">
32</em:type> ...
...And 2 more matches
The Essentials of an Extension - Archive of obsolete content
<em:targetapplication> <description> <em:id>{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:targetapplication> this node specifies the target application and target versions for the extension, specifically firefox, from version 4 up to version 10.
... as we saw in the directory structure of the unpacked extension, the chrome is composed of
3 sections: content, locale and skin.
... the
3 are necessary for most extensions.
...And 2 more matches
XPCOM Objects - Archive of obsolete content
if you want to see the list in your current firefox installation, just run the following code in the error console: var str = ""; for (var i in components.classes) { str += i + "\n" }; str a run on firefox
3.6.2 with a few extensions installed yields 876 strings.
... integers short, unsigned short, long, unsigned long, print
32, pruint
32 print
32 is the equivalent to long.
... we included a constant, an attribute and a method to display examples of the
3, but this is clearly an overly elaborate way to keep a simple counter.
...And 2 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
technically, there are 1
3 total stylesheets used at any one time.
... the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file
3 master alternate style sheets which import 1 file each the
3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
... the html went from
32 kb down to 19 kb, but images increased from 8 to 1
3 kb.
...And 2 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
see bug 255
37 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard.
...bug 255
37#c7
3, which is to run a proxy server that rewrites html source on the fly, as it is sent to the user.
...a variant on christian's original suggestion was made by "ct" in bug 255
37.
...And 2 more matches
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z
3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl.
... build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win
32 debug" or another target open some of the test files under pluginhostctrl\tests in internet explorer to verify the control has built and registered correctly.
... a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de
32-61f1-4f7f-beb8-a
37f5bc24ee2} to something else and any other guids this control relies upon (iid, libids etc).
...And 2 more matches
Autodial for Windows NT - Archive of obsolete content
introduction this document is intended to explain how the autodial helper feature implemented for bug 9
3002 works and why it works that way.
...in an attempt to help users who want to use the autodial feature of the os, i added the autodial helper feature requested in bug 9
3002.
...bug 1661
34 describes how the aol client installs itself as a dialer, but it doesn't behave like other dialers.
...And 2 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/locale/emptysidebar.dtd <!entity emptysidebar.title "emptysidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example
3.
... example
3.
...install.rdf <?xml version="1.0" encoding="utf-8"?> <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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> ...
...And 2 more matches
Creating a hybrid CD - Archive of obsolete content
the cd should support hfs (macintosh), joliet (win
32), and rock ridge (unix).
... many mozilla files have long file names which makes creating the cd on a macintosh difficult because the hfs filesystem limits the length of file names to
32 characters.
...i used version 1.8.1a0
3 although you'll probably want to get a newer one.
...And 2 more matches
Java in Firefox Extensions - Archive of obsolete content
note bug 8
34918 about click-to-play effect on java plugins in chrome and bug 775
301.
...(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 + "...
...And 2 more matches
Microsummary XML grammar reference - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) this article provides detailed information about the xml grammar used to build microsummary generators, describing each element and their attributes.
...example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w
3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml documents is: http://www.mozilla.org/microsumm...
...aries/0.1 all elements in a microsummary generator document should be in this namespace except the descendants of the <template> element, which should be in the xslt namespace: http://www.w
3.org/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code describing the generator.
...And 2 more matches
Microsummary topics - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) programmatically installing a microsummary generator to programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the nsimicrosummaryservice interface implemented by the nsimicrosummaryservice component, then call its installgenerator() method, passing it an xml document containing the generator.
... for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{8
35daeb
3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w
3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var...
...the value of the attribute must be a valid uri, but you can specify an arbitrary identifier using a urn, for example: urn:{8
35daeb
3-6760-47fa-8f4f-8e4fdea1fb16} to guarantee uniqueness, use urns containing uuids generated by the nsuuidgenerator component.
...And 2 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
imagine not having to re-write your application
3 times, or not supporting a less popular platform simply because you do not have the resources for parallel development!
...you may also further enhance the user interface by allowing
3rd parties to develop "themes" for your application.
...with gecko, developers seeking a streamlined way to create and distribute web-based services across multiple platforms and devices can write once to w
3c standards and their content and web applications will be accessible from across computing platforms and devices.
...And 2 more matches
Venkman Introduction - Archive of obsolete content
type /break animator-0.0
3 121 in the debugger.
... alternately, you can select animator-0.0
3.js from the loaded scripts view, locate the pause function at line 119, and click in the left margin.
... you should hit the breakpoint you just set in step
3.
...And 2 more matches
Binding Attachment and Detachment - Archive of obsolete content
see bug
307098.
... for example, given a binding d1, with an explicit inheritance chain of d1 -> d2 -> d
3 if this element is attached to an element using element.style.mozbinding that already has a binding chain of s1 -> s2 -> s
3 the resulting binding chain following the addition of the binding is d1 -> d2 -> d
3 -> s1 -> s2 -> s
3 the inheritance between d
3 and s1 is implicit, meaning that there is no connection in the xbl documents between the two bindings.
... for example, given a bound element with a binding chain of d1->d2 ->d
3 ->s1 ->s2 ->s
3 withs1 representing the binding attached via css.
...And 2 more matches
Return Codes - Archive of obsolete content
execution_error -20
3 an error occurred executing the script no_install_script -204 installation script was not signed no_certificate -205 extracted file is not signed or the file (and, therefore, its certificate) could not be found.
... no_such_component -21
3 the specified component is not present in the client version registry.
... uninstall_failed -22
3 an error occurred while uninstalling a package.
...And 2 more matches
Deprecated and defunct markup - Archive of obsolete content
elements <actions> (listed here by mistake or was it a container tag?) typo for <action> --neil 0
3 march 2011 <autorepeatbutton> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated?
... --neil 0
3 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
... --neil 0
3 march 2011 <sidebarheader> not true, still in use --neil 0
3 march 2011 <slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 0
3 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine te...
...And 2 more matches
Adding HTML Elements - Archive of obsolete content
xmlns:html="http://www.w
3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul.
...here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above.
... text outside of html blocks example
3 : source view <html:div> would you like to save the following documents?
...And 2 more matches
Box Model Details - Archive of obsolete content
layout examples using spacers example
3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels.
...a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="
3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height:
30px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for t...
...the left box has a flexiblity that is
3 times greater than the right one so it will always receive
3 times as much of the extra space when the window size is increased.
...And 2 more matches
Box Objects - Archive of obsolete content
for example, the next box sibling of button 1 is this next example will be button
3, because button 2 is hidden.
... 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.
...And 2 more matches
XUL Questions and Answers - Archive of obsolete content
the following bugs were reported on this issue: bug 22942, bug 1
33698.
... support for non-rdf datasources for xul template is planned (bug
321170): xml datasources (bug
321171) storage (sqlite) datasources (bug
321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the
3rd argument.
...And 2 more matches
Getting started with XULRunner - Archive of obsolete content
step
3: create the application folder structure time to start a simple, bare bones application shell.
... note: make sure your application name is lowercase and longer than
3 characters step 5: set up the chrome manifest the chrome manifest file is used by xulrunner to define specific uris which in turn are used to locate application resources.
...here is the chrome/chrome.manifest: content myapp content/ as mentioned in step
3, the default location of the chrome.manifest has changed in xulrunner 2.0, so we also need a simple chrome.manifest in the application root which will include the the manifest in our chrome root.
...And 2 more matches
XULRunner tips - Archive of obsolete content
in addition, a branding content package must be registered to include the application logos: content branding chrome/branding/
3 files should be provided in this folder: about.png, icon48.png and icon64.png.
...there are two approaches to display the branding of your application instead: when compiling xulrunner yourself: create a file module.ver in the directory mozilla/xulrunner/app with the contents: win
32_module_description=myapplication myapplication should be replaced by whatever you want to see as title of the button.
... pref("signon.remembersignons", true); pref("signon.expiremasterpassword", false); pref("signon.signonfilename", "signons.txt"); you also need to get an instance of the login manager service, which internally initializes the system: components.classes["@mozilla.org/login-manager;1"].getservice(components.interfaces.nsiloginmanager); using firefox to run xulrunner applications firefox
3 and up contain the xulrunner runtime.
...And 2 more matches
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - september 22 - september 29, 2006 announcements lightning and sunbird 0.
3 rc1 test day!
... clint announced the lightning and sunbird 0.
3 rc1 test day oct.
3 to oct.
... updated l10n status for sunbird 0.
3 release according to simon paquet, we now have a full l10n comparison on the trunk between en-us and all locales with a calendar localization.
...And 2 more matches
NPClass - Archive of obsolete content
syntax struct npclass { uint
32_t structversion; npallocatefunctionptr allocate; npdeallocatefunctionptr deallocate; npinvalidatefunctionptr invalidate; nphasmethodfunctionptr hasmethod; npinvokefunctionptr invoke; npinvokedefaultfunctionptr invokedefault; nphaspropertyfunctionptr hasproperty; npgetpropertyfunctionptr getproperty; npsetpropertyfunctionptr setproperty; npremovepropertyfunctionptr removeproperty; npenumerationfunctionptr enumerate; npconstructfunctionptr construct; }; warning: don't call these routines directly.
...this is set to np_class_struct_version, which is 1 in mozilla 1.8.*, 2 since mozilla 1.9a1, and
3 since firefox
3.0b1.
...this field is available only if structversion is np_class_struct_version_ctor (
3) or greater.
...And 2 more matches
NPVariant - Archive of obsolete content
syntax typedef struct _npvariant { npvarianttype type; union { bool boolvalue; int
32_t intvalue; double_t doublevalue; npstring stringvalue; npobject *objectvalue; } value; } npvariant; fields the data structure has the following fields: type a member of the npvarianttype enumeration specifying the data type contained in the npvariant.
...tion mapping when using npvariants to access javascript objects in the browser, or vise versa, the mapping of javascript values to npvariants is as follows: javascript type npvarianttype undefined npvarianttype_void null npvarianttype_null boolean npvarianttype_bool number npvarianttype_int
32 or npvarianttype_double string npvarianttype_string all other types npvarianttype_object functions npn_releasevariantvalue() npn_getstringidentifier() npn_getstringidentifiers() npn_getintidentifier() npn_identifierisstring() npn_utf8fromidentifier() npn_intfromidentifier() macros plugin developers are not expected to dire...
... npvariant_is_int
32() evaluates to true if v is of type npvarianttype_int
32.
...And 2 more matches
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
as of firefox
3 (and any gecko 1.9 based application) the use of install.js scripts is no longer supported and plugins must either be shipped as an executable installer or in a bundle as described here.
...platform-specific files gecko 1.9.2 (firefox
3.6) and earlier prior to gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1), it was possible to package multiple plugin libraries for different operating systems into a single xpi bundle.
... in the xpi you can use the following structure: platform/ linux_x86-gcc
3/ plugins/ libplugin.so darwin_ppc-gcc
3/ plugins/ libplugin.dylib more specific information can be found in the platform-specific subdirectories documentation.
...And 2 more matches
Version - Archive of obsolete content
note: there are
3 different versions of rss 0.91.
... netscape's rss 0.91 (revision 1), netscape's rss 0.91 revision
3 and userland's rss 0.91.
... note: rss 0.9
3 and rss 0.94 were only ever released as "drafts" and never became "final" and thus were not meant to actually be used.
...And 2 more matches
SSL and TLS - Archive of obsolete content
all cas should use at least 2048-bit keys, and stronger keys (such as
3072 or 4096 bits) if possible.
...there are
3.4 x 10
38 possible 128-bit keys and 1.1 x 1077 possible 256-bit keys.
...because the key size is so large, there are approximately
3.7 * 1050 possible keys.
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
this tutorial is a step-by-step guide to making a theme for sunbird 0.
3a1 and later versions.
...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.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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="{718e
30fb-e89b-41dd-9da7-e25a456
38b28}" 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.
...And 2 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.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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>{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}</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.
... {ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384} - firefox's application id.
...And 2 more matches
azimuth - Archive of obsolete content
initial valuecenterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] | behind ] | leftwards | rightwards values angle audible source position is described as an angle within the range -
360deg to
360deg.
... far-left: same as
300deg.
... left: same as
320deg.
...And 2 more matches
Processing XML with E4X - Archive of obsolete content
a full definition of e4x can be found in the ecma-
357 specification.
... those changes; you will need to re-create it to get the most recent updates: var languages = <languages> <lang>javascript</lang> <lang>python</lang> </languages>; var lang = languages.lang; alert(lang.length()); // alerts 2 languages.lang += <lang>ruby</lang>; alert(lang.length()); // still alerts 2 lang = languages.lang; // re-create the xmllist alert(lang.length()); // alerts
3 searching and filtering e4x provides special operators for selecting nodes within a document that match specific criteria.
... consequently, filters can also run against the value of a single node contained within the current element: var people = <people> <person> <name>bob</name> <age>
32</age> </person> <person> <name>joe</name> <age>46</age> </person> </people>; alert(people.person.(name == "joe").age); // alerts 46 filter expressions can even use javascript functions: function over40(i) { return i > 40; } alert(people.person.(over40(parseint(age))).name); // alerts joe handling namespaces e4x is fully namespace aware.
...And 2 more matches
New in JavaScript 1.1 - Archive of obsolete content
the following is a changelog for javascript from netscape navigator 2.0 to
3.0.
...netscape navigator
3.0 was released on august 19, 1996.
... netscape navigator
3.0 was the second major version of the browser with javascript support.
...And 2 more matches
XForms Custom Controls - Archive of obsolete content
work has just started in the w
3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors.
...for example, if a control is bound to a node of type xsd:integer then the typelist attribute will be "http://www.w
3.org/2001/xmlschema#integer http://www.w
3.org/2001/xmlschema#decimal".
...so if you want an input bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w
3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www.w
3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-integer'); } advanced xforms controls there may be times where you need a control that is very specific to your task, but you also want it to work with ...
...And 2 more matches
Mozilla XForms Specials - Archive of obsolete content
(limitation tracked in bug 280
368) mixing repeat and table or ul it is not possible to mix repeats with either table or ul.
...</li> </xf:repeat> </ul> section 9.
3.2 states that mixing with table will probably never work.
...(limitation tracked in bug
31
3111)pseudo element support there is no support for the pseudo elements (::value, ::repeat-item, and ::repeat-index ).
...And 2 more matches
XForms Input Element - Archive of obsolete content
(xhtml/xul) datepicker - used to represent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx
3.0 only, xul only) more detail about each of these widgets follows below.
...in short, the values of 1-
31 (xhtml only).
...for example, the value ---0
3 means the third day of the month.
...And 2 more matches
XForms - Archive of obsolete content
xforms were envisioned as the future of online forms as envisioned by the w
3c.
... drawing on other w
3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
...xforms is a w
3c specification.
...And 2 more matches
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
this article was written on august
31, 2001; it is not compatible with current versions of firefox.
...two new cases for the above mentioned new variables should be added to the plugin implementation of npp_getvalue (see example
3).
... ns_imethod getflags(pruint
32 *aflags) {*aflags = nsiclassinfo::plugin_object | nsiclassinfo::dom_object; return ns_ok;} ns_imethod getimplementationlanguage(pruint
32 *aimplementationlanguage) {*aimplementationlanguage = nsiprogramminglanguage::cplusplus; return ns_ok;} // the rest of the methods can safely return error codes...
...And 2 more matches
Archive of obsolete content
css
3 css
3 is the latest evolution of the cascading style sheets language and aims at extending css2.1.
... index of archived content inner-browsing extending the browser navigation paradigm this article is the version from 200
3 with slight modifications (no images and no links to samples).
... solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.
3a1 and later versions.
...And 2 more matches
Building up a basic demo with PlayCanvas editor - Game development
creating an account the playcanvas editor is free — all you have to do to begin with is register your account and login: when you first sign up, you are taken straight into the editor and given a simple starter tutorial involving editing a
3d rolling ball game.
...when you are ready to continue with our tutorial, go to your canvas homepage — for example mine is https://playcanvas.com/end
3r.
... animating our scene animating
3d models might be considered an advanced thing to do, but all we want to do is to control a few properties of a given object — we can use a script component to do that.
...And 2 more matches
Visual-js game engine - Game development
( + server engine tools + server part of web apps ) -
3d part : webgl based on three.js engine -
3d part : webgl2 based on glmatrix 2.0 -2d part (new): this is typescript based game engine (client part ts).
...
3) please read the following terms and conditions before using this application: disclaimer of warranty 'visual js' is provided "as-is" and without warranty of any kind, express, implied or otherwise, including without limitation, any warranty of merchantability or fitness for a particular purpose.
...http://creativecommons.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) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://g...
...And 2 more matches
WAI-ARIA basics - Learn web development
enter wai-aria wai-aria (web accessibility initiative - accessible rich internet applications) is a specification written by the w
3c, defining a set of additional html attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking.
...if you are looking for a
3rd party javascript solution for rapid ui development, you should definitely consider the accessibility of its ui widgets as an important factor when making your choice.
...we've updated the structure of the tabbed interface like so: <ul role="tablist"> <li class="active" role="tab" aria-selected="true" aria-setsize="
3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="
3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="
3" aria-posinset="
3" tabindex="0">tab
3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> ...
...And 2 more matches
Cascade and inheritance - Learn web development
selector thousands hundreds tens ones total specificity h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0
3 000
3 li > a[href*="en-us"] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 no selector, with a rule inside an element's style attribute 1 0 0 0 1000 before we move on, let's look at an example in action.
...so the winning specificity is 11
3 vs.
...selector six clearly loses to five with a specificity of 2
3 vs.
...And 2 more matches
CSS values and units - Learn web development
in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,9
3,161); } a value in css is a way to define a collection of allowable sub-values.
... lengths the numeric type you will come across most frequently is <length>, for example 10px (pixels) or
30em.
...so each successive level of nesting gets progressively larger, as each has its font size set to 1.
3em — 1.
3 times its parent's font size.
...And 2 more matches
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,2
32,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 you could have a layout with a cleared footer, which is then turned into a grid layout.
... in the floated layout, the percentage is calculated from the container —
33.
333% is a third of the container width.
... in grid however that
33.
333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the grid layout is introduced.
...And 2 more matches
What is CSS? - Learn web development
css specifications all web standards technologies (html, css, javascript, etc.) are defined in giant documents called specifications (or simply "specs"), which are published by standards organizations (such as the w
3c, whatwg, ecma, or khronos) and define precisely how those technologies are supposed to behave.
... css is no different — it is developed by a group within the w
3c called the css working group.
...see bug 15
36148.ie full support
3opera full support
3.5safari full support 1webview android full support 1chrome android full support 18firefox android full support ...
...And 2 more matches
Styling links - Learn web development
now let's add some more information to get this styled properly: body { width:
300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265
301; } a:visited { color: #4
37a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265
301; ...
...et.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: #265
301;\n}\n\na:visited {\n color: #4
37a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265
301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawou...
...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 ...
...And 2 more matches
What is a Domain Name? - Learn web development
17
3.194.121.
32) or an ipv6 address (e.g., 2027:0da8:8b7
3:0000:0000:8a2e:0
370:1
337).
...a tld's maximum length is 6
3 characters, although most are around 2–
3.
...it is not mandatory nor necessary to have
3 labels to form a domain name.
...And 2 more matches
Basic native form controls - Learn web development
the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 1
3 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...bel> <input type="radio" id="curry" name="meal" value="curry"> </li> <li> <label for="pizza">pizza</label> <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> </fieldset> the following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on firefox 71 and safari 1
3 on macos and chrome 79 and edge 18 on windows 10.
... the following examples show default, focused, and disabled button input types — in firefox 71 and safari 1
3 on macos and chrome 79 and edge 18 on windows 10.
...And 2 more matches
UI pseudo-classes - Learn web development
more recently, the css selector level
3 and css basic ui level
3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of.
...for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(
3px,
3px) scale(0); transform-origin: center; transition: all 0.
3s ease-in; } input[type="radio"]:checked::before { transform: translate(
3px,
3px) scale(1); transition: all 0.
3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out anot...
...we've styled the form controls using the :read-only and :read-write pseudo-classes, like so: input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px
3px #ccc; border-radius: 5px; } firefox only supported these pseudo-classes with a prefix up to version 78; at which point it started to support the unprefixed version.
...And 2 more matches
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: 1
35–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.
...And 2 more matches
The web and web standards - Learn web development
one last significant data point to share is that in 1994, timbl founded the world wide web consortium (w
3c), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications.
...the w
3c is the best known web standards body, but there are others such as the whatwg (who were responsible for the modernization of the html language), ecma (who publish the standard for ecmascript, which javascript is based on), khronos (who publish technologies for
3d graphics, such as webgl), and others.
... "open" standards one of the key aspects of web standards, which timbl and the w
3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing.
...And 2 more matches
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: 012
34 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, che...
...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.
...n() { 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 (6
3.245.215.20): 56 data bytes 64 bytes from 6
3.245.215.20: icmp_seq=0 ttl=40 time=158.2
33 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.
...And 2 more matches
Document and website structure - Learn web development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:
300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/
3.7.
3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main he...
...nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> <h
3>subsection</h
3> <p>donec ut librero sed accu vehicula ultricies a non tortor.
...donec sed odio eros.</p> <h
3>another subsection</h
3> <p>donec viverra mi quis quam pulvinar at malesuada arcu rhoncus.
...And 2 more matches
Functions — reusable blocks of code - Learn web development
try editing a() and b() so they look like this: function a() { let y = 2; output(y); } function b() { let z =
3; output(z); } save the code and reload it in your browser, then try calling the a() and b() functions from the javascript console: a(); b(); you should see the y and z values output in the page.
... now try updating your code like this: function a() { let y = 2; output(x); } function b() { let z =
3; output(x); } save and reload again, and try this again in your javascript console: a(); b(); both the a() and b() call should output the value of x — 1.
... finally, try updating your code like this: function a() { let y = 2; output(z); } function b() { let z =
3; output(y); } save and reload again, and try this again in your javascript console: a(); b(); this time the a() and b() calls will both return an annoying referenceerror: variable name is not defined error — this is because the output() calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls.
...And 2 more matches
Introduction to web APIs - Learn web development
in the same way, if you want to say, program some
3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions.
... apis for drawing and manipulating graphics are now widely supported in browsers — the most popular ones are canvas and webgl, which allow you to programmatically update the pixel data contained in an html <canvas> element to create 2d and
3d scenes.
... for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex
3d scene with lighting and textures using webgl.
...And 2 more matches
Third-party APIs - Learn web development
this article looks at the difference between browser apis and
3rd party apis and shows some typical uses of the latter.
...this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.
3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.
3.2/mapquest.css"/> you can then start using the objects available in that library.
... for example: let map = l.mapquest.map('map', { center: [5
3.480759, -2.2426
31], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
...And 2 more matches
A first splash into JavaScript - Learn web development
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.
... first let's look at arithmetic operators, for example: operator name example + addition 6 + 9 - subtraction 20 - 15 * multiplication
3 * 7 / division 10 / 5 you can also use the + operator to join text strings together (in programming, this is called concatenation).
...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 > 10 // true conditionals returning ...
...And 2 more matches
Working with JSON - Learn web development
"squadname": "super hero squad", "hometown": "metro city", "formed": 2016, "secretbase": "super tower", "active": true, "members": [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "radiation resistance", "turning tiny", "radiation blast" ] }, { "name": "madame uppercut", "age":
39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] }, { "name": "eternal flame", "age": 1000000, "secretidentity": "unknown", "powers": [ "immortality", "heat immunity", "inferno", "teleportation", "interdimensional trave...
...the reason we said "mostly right" is that an array is also valid json, for example: [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "radiation resistance", "turning tiny", "radiation blast" ] }, { "name": "madame uppercut", "age":
39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] } ] the above is perfectly valid json.
...bottom of the code, which creates and displays the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara
3 = document.createelement('p'); const mylist = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.textcontent = 'age: ' + heroes[i].age; mypara
3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const listit...
...And 2 more matches
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): 504 jul 1
3 02:4
3 bundle.css 95981 jul 1
3 02:4
3 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: 504 jul 1
3 02:4
3 bundle.css 21782 jul 1
3 02:4
3 bundle.js try running npm run build in your app's root directory now.
... our whole app is now just 21 kb — 8.
3 kb when gzipped.
...And 2 more matches
Introducing a complete toolchain - Learn web development
here is an example eslint output: ./my-project/src/index.js 2:8 error 'react' is defined but never used no-unused-vars 22:20 error 'body' is defined but never used no-unused-vars 96:19 error 'b' is defined but never used no-unused-vars ✖
3 problems (
3 errors, 0 warnings) note: we'll install eslint in the next section; don't worry about this for now.
...this also means that parcel will install our software dependencies automatically as they are referenced in the source code, as we saw in chapter
3.
...for example, instead of reaching for a tool like sass, this particular project uses the w
3c proposal for css nesting.
...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 success criterion 2.
3.
3: animation from interactions content on hover or focus if content is revealed on hover or focus, for example in tooltips, there are some things to keep in mind: if the extra content obscures existing content, there should be a way to close it without moving focus if the extra content is opened on hover, hovering the additional content itself should not cause it to disappear consistent n...
...And 2 more matches
Gecko Logging
info
3 an informational message, often indicates the current program state.
... set moz_log="example_logger:
3" in the windows command prompt (cmd.exe), don't use quotes: set moz_log=example_logger:
3 if you want this on geckoview example, use the following adb command to launch process: adb shell am start -n org.mozilla.geckoview_example/.geckoviewactivity --es env0 "moz_log=example_logger:
3" there are special module names to change logging behavior.
... we rotate four log files with .0, .1, .2, .
3 extensions.
...And 2 more matches
Storage access policy: Block cookies from trackers
testing in firefox this cookie policy has been available in firefox since version 6
3.
...if we discover that an origin is abusing this heuristic to gain tracking access, that origin will have the additional requirement that it must have received user interaction as a first party within the past
30 days.
...the tracking origin must have received user interaction as a first party within the past
30 days, and the storage access permission expires after 15 minutes.
...And 2 more matches
IME handling guide
android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 11
37567.
...currently, it's tried: after a native event is dispatched from presshell::handleeventinternal() at changing focus from a windowless plugin when new focused editor receives dom "focus" event the
3rd timing may not be safe actually, but it causes a lot of oranges of automated tests.
...when there is no composition, this is uint
32_max.
...And 2 more matches
OS.File.Info
es not represent anything } else { // some other error } } ) example: determining the owner of a file let promise = os.file.stat() promise.then( function onsuccess(info) { if ("unixowner" in info) { // info.unixowner holds the owner of the file } else { // information is not available on this platform } } ); evolution of this example bug 8025
34 will introduce the ability to check whether field unixowner appears in os.file.info.prototype, which will make it possible to write faster code.
...(as of firefox
38 this is always true on all systems, this is a bug: bugzilla 1145885) (on windows this returns false for hard links) size the number of bytes in the file.
...there is talk of reinstating this with proper functionality in bugzilla :: bug 116714
3.
...And 2 more matches
Using JavaScript code modules
creating a javascript code module a very simple javascript module looks like this: var exported_symbols = ["foo", "bar"]; function foo() { return "foo"; } var bar = { name : "bar", size :
3 }; var dummy = "dummy"; notice that the module uses normal javascript to create functions, objects, constants, and any other javascript type.
...for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.size +
3); // displays "6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the previous version of your module's code.
... if your extension or application needs to support mozilla 1.9.x (firefox
3.x), you should register a new resource url.
...And 2 more matches
Bootstrapping a new locale
for instance, for firefox
3.6, we use mozilla-1.9.2.
... if you are interested in localizing thunderbird
3, seamonkey 2 or other mozilla projects based on gecko 1.9.1 you'll need to follow the instructions on getting the source-code of the comm-central repository.
... first, you should specify your locale's language identifier in ab-cd format, where "ab" is the iso 6
39 language code, and cd is the iso
3166 country code.
...And 2 more matches
MathML Demo: <mfrac> - fractions
inline, display style, no line 1.2
34567 89 + x the end.
... inline, styles auto, display and text 1 2 - 1 2 + 1.2
3456 7890 , the rendering should be script-size, normal-size and script-size in this example.
... the same expression 1 2 - 1 2 + 1.2
3456 7890 in a display.
...And 2 more matches
Profiling with the Firefox Profiler
custom annotations in bug 1
334218 an annotation was added to presshell::paint to show the url of the document being painted.
...
3.
...if you built firefox yourself, it will attempt to use some cleverness
3 to grab the symbols from your binary.
...And 2 more matches
AsyncTestUtils extended framework
for example, if you pass
3, then 1 <- 2 <-
3 is what the reply chain looks like.
...for example, {weeks: 2, days:
3} would be a message sent exactly 17 days ago.
...(we will probably auto-correct that in the future.) if your set definition was {count:
3, age: {days: 7}, age_incr: {days: -1}}, then you would generate messages from 7, 6, and 5 days ago.
...And 2 more matches
Leak And Bloat Tests
t files (used to drive the tests): bloat/bloataddroverlay.js bloat/bloatcomposeoverlay.js bloat/bloatmainoverlay.js preference settings (used to provide a defined profile, see below): common/mailnewstestprefs.js python scripts (used to set up the profile and run the test): bloat/setupbloattest.py bloat/runtest.py common/setupcommonmailnews.py pre-defined profile initial setup: one pop
3 account (mails tbd) one identity one smtp server defined (not used) future requirements/possibilities: one address book where pab has ~1000 entries large message folders imap nntp server and subscribed newsgroup.
...l.accountmanager.defaultaccount", "account2"); user_pref("mail.accountmanager.localfoldersserver", "server1"); user_pref("mail.identity.id1.fullname", "tinderbox"); user_pref("mail.identity.id1.smtpserver", "smtp1"); user_pref("mail.identity.id1.useremail", "tinderbox@invalid.com"); user_pref("mail.identity.id1.valid", true); user_pref("mail.root.none-rel", "[profd]mail"); user_pref("mail.root.pop
3-rel", "[profd]mail"); user_pref("mail.server.server1.directory-rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new_mail", false); user_pref("mail.server.serve...
...r2.directory-rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.type", "pop
3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserver", "smtp1"); user_pref("mail.smtpserver.smtp1.hostname", "tinderbox"); user_pref("mail.smtpserver.smtp1.username", "tinderbox"); user_pref("mail.smtpservers", "smtp1"); user_pref("mail.startup.enabledmailcheckonce", true); user_pref("mailnews.start_page_override.mstone", "1.9pre"); user_pref("mail.shell.checkdefaultclient", false); // ensure os x and outlook/oe books are disabled u...
...And 2 more matches
NSPR build instructions
--enable-64bit on a dual
32-bit/64-bit platform, nspr build generates a
32-bit build by default.
... --target=x86_64-pc-mingw
32 for 64-bit builds on windows, when using the mozillabuild environment.
... --enable-win
32-target=win95 this option is only used on windows.
...And 2 more matches
Enc Dec MAC Output Public Key as CSR
#include #include #include #include #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize
32 #define default_key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #defi...
...bkey_header "-----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.1
3.
... * fixme: samples should determine the version of nss that's available and refuse * to run if not
3.1
3 or higher.
...And 2 more matches
Utilities for nss samples
*/ typedef struct { enum { pw_none = 0, /* no password */ pw_fromfile = 1, /* password stored in a file */ pw_plaintext = 2 /* plain-text password passed in buffer */ /* pw_external =
3 */ } source; char *data; /* depending on source this can be the actual * password or the file to read it from */ } secupwdata; /* * printasascii */ extern void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern void printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* * getdigit */ extern in...
...*/ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column +=
3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1...
...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, prfiledesc *src) { prfileinfo info; print
32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } secitem_freeitem(dst, pr_false); ...
...And 2 more matches
Build instructions
use_64: on platforms that support both
32-bit and 64-bit abis, tells nss to build for the 64-bit abi.
... default is
32-bit abi, except on platforms that do not support a
32-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_14_2_rtm cd ..
...And 2 more matches
FC_GetInfo
manufacturerid: the pkcs #11 library manufacturer, "mozilla foundation", padded with spaces to
32 characters and not null-terminated.
... librarydescription: description of the library, "nss internal crypto services", padded with spaces to
32 characters and not null-terminated.
... libraryversion: pkcs #11 library version number, for example,
3.11 (major=0x0
3, minor=0x0b).
...And 2 more matches
FC_GetTokenInfo
on return, the ck_token_info structure that pinfo points to has the following information: label: the label of the token, assigned during token initialization, padded with spaces to
32 bytes and not null-terminated.
... manufacturerid: id of the device manufacturer, "mozilla foundation", padded with spaces to
32 characters and not null-terminated.
... model: model of the device, "nss
3", padded with spaces to 16 characters and not null-terminated.
...And 2 more matches
SSL functions
function name/documentation source code nss versions nss_getclientauthdata mxr
3.2 and later nss_setdomesticpolicy mxr
3.2 and later nss_setexportpolicy mxr
3.2 and later nss_setfrancepolicy mxr
3.2 and later nssssl_versioncheck mxr
3.2.1 and later ssl_authcertificate mxr
3.2 and later ssl_authcertificatehook mxr
3.2 and later ssl_badcerthook mxr
3.2 and later ssl...
..._certdbhandleset mxr
3.2 and later ssl_canbypass mxr
3.11.7 and later ssl_cipherpolicyget mxr
3.2 and later ssl_cipherpolicyset mxr
3.2 and later ssl_cipherprefget mxr
3.2 and later ssl_cipherprefgetdefault mxr
3.2 and later ssl_cipherprefset mxr
3.2 and later ssl_cipherprefsetdefault mxr
3.2 and later ssl_clearsessioncache mxr
3.2 and later 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 ...
...And 2 more matches
NSS Tools
currently, you must download the nss
3.1 source and build it to create binary files for the nss tools.
... tools information tool description links certutil 2.0 manage certificate and key databases (cert7.db and key
3.db).
... source, documentation, dbck 1.0 analyze and repair certificate databases (not working in nss
3.2) source, tasks/plans modutil 1.1 manage the database of pkcs11 modules (secmod.db).
...And 2 more matches
NSS tools : signtool
for testing purposes only, you can create an object-signing certificate with netscape signing tool 1.
3.
... -d certdir specifies your certificate database directory; that is, the directory in which you placed your key
3.db and cert7.db files.
...the metadata file contains one entry per line, each with three fields: field #1: file specification, or + if you want to specify global metadata (that is, metadata about the jar archive itself or all entries in the archive) field #2: the name of the data you are specifying; for example: install-script field #
3: data corresponding to the name in field #2 for example, the -i option uses the equivalent of this line: + install-script: script.js this example associates a mime type with a file: movie.qt mime-type: video/quicktime for information about the way installer script information appears in the manifest file for a jar archive, see the jar format ...
...And 2 more matches
Rhino downloads archive
release release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r
3 2011-05-09 new in rhino 1.7r
3 rhino1_7r
3.zip rhino 1.7r2 2009-0
3-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-0
3-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.6r4, but relicensed under mpl/gpl.
... rhino1_6r5.zip rhino 1.6r4 2006-09-10 bug
34
3976 rhino1_6r4.zip rhino 1.6r
3 2006-07-24 changes in 1.6r
3 rhino1_6r
3.zip rhino 1.6r2 2005-09-19 changes in 1.6r2 rhino1_6r2.zip rhino 1.6r1 2004-11-29 changes in 1.6r1 rhino1_6r1.zip rhino 1.5r5 2004-0
3-25 changes in 1.5r5 rhino1_5r5.zip rhino 1.5r4.1 200
3-04-21 changes in 1.5r4.1 rhino15r41.zip rhino 1.5r4 200
3-02-10 changes in 1.5r4 rhino15r4.zip rhino 1.5r
3 2002-01-27 changes in 1.5r
3 rhino15r
3.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.4r
3 1999-05-10 initial public relea...
...se rhino14r
3.zip rhino 1.6r1 through 1.6r6 implement e4x using xmlbeans library.
...And 2 more matches
Rhino shell
the string versionnumber must be one of 100, 110, 120, 1
30, 140, 150, 160 or 170.
...if an argument is supplied, it is expected to be one of 100, 110, 120, 1
30, 140, 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 =
34; js> f()
34 js> quit() $ cat echo.js for (i in arguments) { print(arguments[i]) } $ java org.mozilla.javascript.tools.shell.main echo.js foo bar foo bar $ spawn and sync the following example creates 2 threads via spawn and uses sync to create a synchronized version of the function test.
...And 2 more matches
INT_TO_JSVAL
please use js::int
32value instead in spidermonkey 45 or later.
... syntax jsval int_to_jsval(int
32_t i); name type description i any integer type c integer to convert to a jsval.
...starting in spidermonkey 1.8.5, jsval can store a full
32-bit integer, so this check isn't needed any longer for
32-bit integers.") }} if i does not fit into a jsval (see int_fits_in_jsval), the behavior is undefined.
...And 2 more matches
JS::CreateError
this article covers features introduced in spidermonkey
38 create an error object.
... syntax // added in spidermonkey 45 bool js::createerror(jscontext *cx, jsexntype type, handleobject stack, handlestring filename, uint
32_t linenumber, uint
32_t columnnumber, jserrorreport *report, handlestring message, mutablehandlevalue rval); // obsolete since jsapi
39 bool js::createerror(jscontext *cx, jsexntype type, handlestring stack, handlestring filename, uint
32_t linenumber, uint
32_t columnnumber, jserrorreport *report, handlestring message, mutablehandlevalue rval); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... linenumber uint
32_t the value of error.prototype.linenumber.
...And 2 more matches
JSProtoKey
arraybuffer mxr search for jsproto_arraybuffer jsproto_int8array int8array mxr search for jsproto_int8array jsproto_uint8array uint8array mxr search for jsproto_uint8array jsproto_int16array int16array mxr search for jsproto_int16array jsproto_uint16array uint16array mxr search for jsproto_uint16array jsproto_int
32array int
32array mxr search for jsproto_int
32array jsproto_uint
32array uint
32array mxr search for jsproto_uint
32array jsproto_float
32array float
32array mxr search for jsproto_float
32array jsproto_float64array float64array mxr search for jsproto_float64array jsproto_uint8clampedarray uint8clampedarray mxr search for jsprot...
...ampedarray jsproto_proxy proxy mxr search for jsproto_proxy jsproto_weakmap weakmap mxr search for jsproto_weakmap jsproto_map map mxr search for jsproto_map jsproto_set set mxr search for jsproto_set jsproto_dataview dataview mxr search for jsproto_dataview jsproto_symbol symbol added in spidermonkey
38 mxr search for jsproto_symbol jsproto_sharedarraybuffer sharedarraybuffer (nightly only) mxr search for jsproto_sharedarraybuffer jsproto_intl intl mxr search for jsproto_intl jsproto_typedobject typedobject (nightly only) mxr search for jsproto_typedobject jsproto_generatorfunction generatorfunction added in spidermonkey
31 ...
... mxr search for jsproto_generatorfunction jsproto_simd simd (nightly only) mxr search for jsproto_simd jsproto_weakset weakset added in spidermonkey
38 mxr search for jsproto_weakset jsproto_sharedint8array sharedint8array (nightly only) mxr search for jsproto_sharedint8array jsproto_shareduint8array shareduint8array (nightly only) mxr search for jsproto_shareduint8array jsproto_sharedint16array sharedint16array (nightly only) mxr search for jsproto_sharedint16array jsproto_shareduint16array shareduint16array (nightly only) mxr search for jsproto_shareduint16array jsproto_sharedint
32array sharedint
32array (nightly only) mxr search for jsproto_sharedint
32array jspr...
...And 2 more matches
JS_DefineProperty
unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, int
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, uint
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, d...
... = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, int
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, uint
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const c...
... unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, int
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, uint
32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject o...
...And 2 more matches
JS_DeleteElement2
obsolete since jsapi
39this feature is obsolete.
... renamed to js_deleteelement in jsapi
39 syntax bool js_deleteelement2(jscontext *cx, js::handleobject obj, uint
32_t index, bool *succeeded); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... index uint
32_t index number of the element to delete.
...And 2 more matches
JS_ExecuteScript
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); // obsolet...
...e 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 e4x xml object, a with object, or a proxy.
...And 2 more matches
JS_NewRuntime
syntax jsruntime * js_newruntime(uint
32_t maxbytes, uint
32_t maxnurserybytes = js::defaultnurserybytes, jsruntime *parentruntime = nullptr); jsruntime * js_newruntime(uint
32_t maxbytes, jsusehelperthreads usehelperthreads, jsruntime *parentruntime = nullptr); // deprecated since jsapi
32 name type description maxbytes uint
32 maximum number of allocated bytes after which garbage collection is run.
... maxnurserybytes uint
32 nursery size in bytes.
...added in spidermonkey
38 parentruntime jsruntime * the topmost parent or nullptr .
...And 2 more matches
JS_SetGCZeal
syntax void js_setgczeal(jscontext *cx, uint8_t zeal, uint
32_t frequency); name type description cx jscontext * a context.
... frequency uint
32_t with some zeal levels, a gc is triggered every frequency allocations.
...
3 collect on window paints.
...And 2 more matches
jsint
obsolete since jsapi 1
3this feature is obsolete.
...int
32; typedef ...
... uint
32; typedef ...
...And 2 more matches
SpiderMonkey 1.8
spidermonkey 1.8 is the javascript engine that shipped in firefox
3.0.
...this includes iterators and generators (bug
34926
3) 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
384758).
...And 2 more matches
SpiderMonkey 45
you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 5705
30b1e551bf4a459d7cae875f
33f99d5ef0c29ccc7742a1b6f588e5eadbee md5: 2ca
34f998d8b5ea79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
...you may wish to make the bugs block bug 8
37921 (aliased as "sm.embedding").
... if you are compiling with microsoft's visual studio, note the minimum supported version is msvc 201
3.
...And 2 more matches
AT APIs Support
gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w
3c dom.
...however most of described features are supported starting from gecko 1.9.0 (firefox
3.0).
...if you seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.
3.
...And 2 more matches
Avoiding leaks in JavaScript XPCOM components
in firefox
3, a cycle collector was introduced and refined in later versions, and mozilla is currently working on a generational garbage collector for js.
...the situation with javascript properties on dom nodes may also improve—see bug 28
3129—but it requires substantial changes.) things not to do everybody writing, reviewing, or checking in javascript code to mozilla cvs should understand why these things are bad.
...if you implement nsiobserver in javascript and register that observer (without using weak references) with a service (for example, with the observer service bug 2
398
33 or with the pref service bug 256822), the service will do exactly what you tell it to do: notify the observer you just created until you unregister the observer.
...And 2 more matches
Finishing the Component
for example, in 2002 the gnu compiler collection (gcc), version
3.2 changed the c++ abi, and this caused problems between libraries compiled with gcc
3.2 and applications compiled with an earlier version and vice versa.
... ns_impl_isupports
3(weblock, nsiobserver, iweblock, nsicontentpolicy); receiving notifications to receive notifications, you must register as a new category.
...in the weblock component, the shouldload method looks like this: ns_imethodimp weblock::shouldload(print
32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidomwindow *window, prbool *_retval) uniform resource locators the method passes in an interface pointer of type nsiuri, which is based on the uniform resource identifier, or uri.
...And 2 more matches
Detailed XPCOM hashtable guide
you can store entries with keys 1, 5, and
3000).
... nsdatahashtable/nsinterfacehashtable/nsclasshashtable - high-level c++ wrappers around pldhash; simplifies the common usage pattern mapping a simple keytype to a simple datatype; client does not need to declare or manage an entry class; nsdatahashtable datatype is a scalar such as pruint
32; nsinterfacehashtable datatype is an interface; nsclasshashtable datatype is a class pointer owned by the hashtable.
... key type: integer string/cstring nsid nsisupports* complex data type: none (hash set) nsthashtable<...> simple (pruint
32) nsdatahashtable nsthashtable<...> <nsuint
32hashkey, pruint
32> <ns(c)stringhashkey, pruint
32> <nsidhashkey, pruint
32> <nsisupportshashkey, pruint
32> interface (nsisupports) nsinterfacehashtable <nsuint
32hashkey, nsisupports> <ns(c)stringhashkey, nsisupports> <nsidhashkey, nsisupports> <nsisupportshashkey, nsisupports> class (nsstring*) nsclasshashtable <nsuint
32hashkey, nsstring> <ns(c)stringhashkey, nsstring> <nsidhashkey, nsstring> <nsisupportshashkey, ...
...And 2 more matches
Introduction to XPCOM for the DOM
we also have another real class, nsbar, as well as three interfaces, nsifoo1, nsifoo2, and nsifoo
3.
... the situation is the following: nsbar <- nsifoo1 | v nsfoo <- nsifoo2 <- nsifoo
3 in this situation, the nsifoo2 interface inherits from the nsifoo
3 interface, as described above.
... nsfoo implements nsifoo2, and thus also nsifoo
3, and nsbar implements nsifoo1.
...And 2 more matches
mozIStorageValueArray
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview long gettypeofindex(in unsigned long aindex); long getint
32(in unsigned long aindex); long long getint64(in unsigned long aindex); double getdouble(in unsigned long aindex); autf8string getutf8string(in unsigned long aindex); astring getstring(in unsigned long aindex); void getblob(in unsigned long aindex, out unsigned long adatasize, [array,size_is(adatasize)] out octet adata); boolean getisnull(in u...
... value_type_text
3 text data type.
... getint
32() obtains a int
32 from the specified index.
...And 2 more matches
nsIAccessibleRetrieval
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview nsiaccessible getaccessiblefor(in nsidomnode anode); nsiaccessible getaccessibleinshell(in nsidomnode anode, in nsipresshell apresshell); nsiaccessible getaccessibleinweakshell(in nsidomnode anode, in nsiweakreference apresshell); obsolete since gecko 2.0 nsiaccessible getaccessibleinwindow(in nsidomnode anode, in nsidomwindow adomwin); obsolete since gecko 2.0 nsiaccessible getapplicationaccessible(); nsiaccessible getattachedaccessibl...
... getaccessibleinweakshell() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) return an nsiaccessible for a dom node in the given weak shell.
... getaccessibleinwindow() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) return an nsiaccessible for a dom node in present shell for this dom window.
...And 2 more matches
nsIAuthPrompt
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) this interface is implemented by @mozilla.org/login-manager/prompter;1.
... to create an instance, use: var authprompt = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt); method overview boolean prompt(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint
32 savepassword, in wstring defaulttext, out wstring result); boolean promptpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint
32 savepassword, inout wstring pwd); boolean promptusernameandpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint
32 savepassword, inout wstring user, inout wstring pwd); constants constant value description save_password_never 0 never saves the password.
... boolean prompt( in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint
32 savepassword, in wstring defaulttext, out wstring result ); parameters dialogtitle the title of the dialog.
...And 2 more matches
nsIChannelEventSink
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) channels will try to get this interface from a channel's notificationcallbacks or, if not available there, from the loadgroup's notificationcallbacks.
...new requests for this resource should use the uri of the new channel (this might be an http
301 reponse).
...this may happen due to an http
3xx status code.
...And 2 more matches
nsICollection
inherits from: nsiserializable last changed in gecko 1.7 method overview void appendelement(in nsisupports item); void clear(); pruint
32 count(); nsienumerator enumerate(); nsisupports getelementat(in pruint
32 index); void queryelementat(in pruint
32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result); void removeelement(in nsisupports item); void setelementat(in pruint
32 index, in nsisupports item); methods appendelement() appends a new item to the collection.
...pruint
32 count(); parameters none.
...nsisupports getelementat( in pruint
32 index ); parameters index the index position of the item to be returned.
...And 2 more matches
nsIDocShell
long aitemtype, in long adirection); nsidomstorage getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint
32 aflags, in wstring awindowtarget, in string atypehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only!
... parentcharsetsource print
32 indicates the source from which the character set being used was obtained.
... kcharsetfromdoctypedefault
3 the character set has been inferred from the doctype.
...And 2 more matches
nsIInputStream
moreover, since a stream may make available more than 2^
32 bytes of data, this method is incapable of expressing the entire size of the underlying data source.
... return value number of bytes currently available in the stream, or pr_uint
32_max if the size of the stream exceeds pr_uint
32_max.
... nsresult consumestream(nsiinputstream* astream) { nsresult rv; uint
32_t numread; char buf[512]; while (1) { rv = astream->read(buf, sizeof(buf), &numread); if (ns_failed(rv)) { printf("### error reading stream: %x\n", rv); break; } if (numread == 0) break; // buf now contains numread bytes of data } return rv; } consume all data from an input stream using readsegments().
...And 2 more matches
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!
...native code only!inittoappwithcreatorcode obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1)this feature is obsolete.
... native code only!initwithfsspec obsolete since gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0)this feature is obsolete.
...And 2 more matches
nsINavHistoryQueryOptions
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1
3.0 (firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10) method overview nsinavhistoryqueryoptions clone(); attributes attribute type description applyoptionstocontainers boolean if true, the query options are only applied to the containers.
... excludeitemifparenthasannotation obsolete since gecko 1
3.0 autf8string this option excludes items from a bookmarks query if the parent of the item has this annotation.
... sort_by_date_ascending
3 sort by the ascending date order.
...And 2 more matches
nsIProcess
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) implemented by: @mozilla.org/process/util;1.
... note: this function does not work with application bundles on mac os x, see bug
30746
3 for details.
... initwithpid() obsolete since gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) initializes the nsiprocess to represent an existing process, given that process's id.
...And 2 more matches
nsIPropertyBag2
sipropertybag last changed in gecko 1.0 method overview nsivariant get(in astring prop); acstring getpropertyasacstring(in astring prop); astring getpropertyasastring(in astring prop); autf8string getpropertyasautf8string(in astring prop); boolean getpropertyasbool(in astring prop); double getpropertyasdouble(in astring prop); print
32 getpropertyasint
32(in astring prop); print64 getpropertyasint64(in astring prop); void getpropertyasinterface(in astring prop, in nsiidref iid, [iid_is(iid), retval] out nsqiresult result); pruint
32 getpropertyasuint
32(in astring prop); pruint64 getpropertyasuint64(in astring prop); prbool haskey(in astring prop); methods get() this method retu...
...getpropertyasint
32() print
32 getpropertyasint
32( in astring prop ); parameters prop property to return the value of.
... return value the property value as a print
32.
...And 2 more matches
nsISupportsPrimitive
type_string
3 corresponding to nsisupportsstring.
... type_pruint
32 7 corresponding to nsisupportspruint
32.
... type_print
32 12 corresponding to nsisupportsprint
32.
...And 2 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 agx
3, in acstring agv
3, in acstring ar
3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() perform th...
...void round2( in acstring apeerid, in acstring apin, in acstring agx
3, in acstring agv
3, in acstring ar
3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara ); parameters apeerid string identifying the peer.
...agx
3 schnorr signature value g^x
3, in hex representation.
...And 2 more matches
nsITelemetry
s 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 uint
32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedstacks([optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint
32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramr...
...ingenabled(in acstring id, in boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint
32_t adataset, [optional] in boolean aclear); void keyedscalaradd(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, in jsval avalue); void keyedscalarsetmaximum(in acstring aname, in astring akey, in jsval avalue); jsval snapshotkeyedscalars(in uint
32_t adataset, [optional] in boolean aclear); v...
...oid clearscalars(); test only void flushbatchedchildtelemetry(); void recordevent(in acstring acategory, in acstring amethod, in acstring aobject, [optional] in jsval avalue, [optional] in jsval extra); void seteventrecordingenabled(in acstring acategory, in boolean aenabled); jsval snapshotevents(in uint
32_t adataset, [optional] in boolean aclear); void registerevents(in acstring acategory, in jsval aeventdata); void registerscalars(in acstring acategoryname, in jsval ascalardata); void clearevents(); test only attributes attribute type description canrecordbase boolean a flag indicating if telemetry can record base data (fhr data).
...And 2 more matches
nsIXULWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) an nsixulwindow is created as part of the creation of a top-level chrome window.
... void assumechromeflagsarefrozen(); void center(in nsixulwindow arelative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print
32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint
32 chromeflags are from nsiwebbrowserchrome.
... contextflags pruint
32 contextflags are from nsiwindowcreator2.
...And 2 more matches
nsPIPromptService
inherits from: nsisupports last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) implemented by: the contract id isn't defined.
...etitlemessage the value is
3.
...ebutton
3text the value is 11.
...And 2 more matches
XPCOM Interface Reference
ssiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin
32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformation...
...sifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory
3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfac...
...siresumablechannelnsirunnablensishentrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritycheckedcomponentnsiseekablestreamnsiselectionnsiselection2nsiselection
3nsiselectioncontrollernsiselectionimageservicensiselectionprivatensiserversocketnsiserversocketlistenernsiservicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistener...
...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-11d
3-9890-006008962422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scriptable, uuid(d79dc970-4a1c-11d
3-9890-006008962422)] interface nsisupportsstring : nsisupportsprimitive { attribute astring data; wstring tostring(); }; prbool nsisupportsprbool @mozilla.org/supports-prb...
...ool;1 [scriptable, uuid(ddc
3b490-4a1c-11d
3-9890-006008962422)] interface nsisupportsprbool : nsisupportsprimitive { attribute prbool data; string tostring(); }; pruint8 nsisupportspruint8 @mozilla.org/supports-pruint8;1 [scriptable, uuid(dec2e4e0-4a1c-11d
3-9890-006008962422)] interface nsisupportspruint8 : nsisupportsprimitive { attribute pruint8 data; string tostring(); }; pruint16 nsisupportspruint16 @mozilla.org/supports-pruint16;1 [scriptable, uuid(dfacb090-4a1c-11d
3-9890-006008962422)] interface nsisupportspruint16 : nsisupportsprimitive { attribute pruint16 data; string tostring(); }; pruint
32 nsisupportspruint
32 @mozilla.org/supports-pruint
32;1 [scriptable, uuid(e01dc470-4a1c-11d
3-9890-006008962422)] interface nsisupportspruint
32 : nsisupportsprimitive {...
... attribute pruint
32 data; string tostring(); }; pruint64 nsisupportspruint64 @mozilla.org/supports-pruint64;1 [scriptable, uuid(e1
3567c0-4a1c-11d
3-9890-006008962422)] interface nsisupportspruint64 : nsisupportsprimitive { attribute pruint64 data; string tostring(); }; prtime nsisupportsprtime @mozilla.org/supports-prtime;1 [scriptable, uuid(e256
36
30-4a1c-11d
3-9890-006008962422)] interface nsisupportsprtime : nsisupportsprimitive { attribute prtime data; string tostring(); }; char nsisupportschar @mozilla.org/supports-char;1 [scriptable, uuid(e2b05e40-4a1c-11d
3-9890-006008962422)] interface nsisupportschar : nsisupportsprimitive { attribute char data; string tostring(); }; print16 nsisupportsprint16 @mozilla.org/supports-print16;1 [scriptable, uuid(e
30...
...And 2 more matches
Activity Manager examples
this content covers features introduced in thunderbird
3 the activity manager is a simple component that understands how to display a combination of user activity and history.
... null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step
3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); // localization is omitted, initiator is omitted event.init(folder.prettiestname + " is processed", null, ...
...mplementation class mycopyeventundo : public nsiactivityundohandler { public: ns_decl_isupports ns_decl_nsiactivityundohandler mycopyeventundo() {} private: ~mycopyeventundo() {} }; ns_impl_isupports1(mycopyeventundo, nsiactivityundohandler) ns_imethodimp mycopyeventundo::undo(nsiactivityevent *event, nsresult *result) { nsresult rv; // get the subjects of this copy event pruint
32 length; nsivariant **subjectlist; rv = event->getsubjects(&length, &subjectlist); if(ns_failed(rv)) return rv; // first subject in the list is the source folder in this particular case nscomptr<nsimsgfolder> folder = do_queryinterface(subjectlist[0]); // get the initiator nsivariant *initiator; event->getinitiator(&initiator); if (initiator) { nsisupports* ptr; ...
...And 2 more matches
Theme Packaging
icon.png is a
32x
32 (max.
... install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa41
3bc41
3f}</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
Add to iPhoto
these are declared near the top of the code: const osstatus = ctypes.int
32_t; const cfindex = ctypes.long; const optionbits = ctypes.uint
32_t; osstatus used to represent the status code resulting from an operation.
... optionbits a
32-bit bit field data type.
...in c, the declaration looks like this: typedef struct { cfindex location; cfindex length; } cfrange; to declare this for use with js-ctypes, we use the following code: this.cfrange = new ctypes.structtype("cfrange", [ {'location': ctypes.int
32_t}, {'length': ctypes.int
32_t}]); this defines corefoundation.cfrange to represent this data type, comprised of two
32-bit integer fields called location and length.
...And 2 more matches
Mozilla
the default values given are for firefox
3.
...this may be because of a code error within firefox itself, such as a deadlock or infinite loop, or it may be caused by
3rd-party software such as a firefox extension, antivirus software, or even malware or a virus on your computer.
... internationalized domain names (idn) support in mozilla browsers netscape 7.1 is the first commercial browser that has built-in support for internationalized domain name under the new ietf rfc's established in 200
3.
...And 2 more matches
AudioListener.speedOfSound - Web APIs
the speedofsound property's default value is
34
3.
3 m/s and is used to calculate the doppler shift appropriate for the speed the panner is travelling at (as defined by pannernode.setvelocity.) note: bear in mind that no propagation delay is automatically applied to a sound far from the listener.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.speedofsound =
34
3.
3; value a double.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 2 more matches
AudioWorkletProcessor.process - Web APIs
important: currently, audio data blocks are always 128 frames long—that is, they contain 128
32-bit floating-point samples for each of the inputs' channels.
...each channel is a float
32array containing 128 samples.
... parameters an object containing string keys and float
32array values.
...And 2 more matches
BaseAudioContext.createBuffer() - Web APIs
the asynchronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp
3 file, and directly gives you back an audiobuffer that you can then set to play via in an audiobuffersourcenode.
... for simple uses like playing an mp
3, decodeaudiodata() is what you should be using.
...the default value is 1, and all user agents must support at least
32 channels.
...And 2 more matches
CDATASection - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1
30" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
331" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="
396,25 406,20 406,
30
396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="4
36" y2="25" st...
...roke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="4
36" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="47
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 521,20 521,
30 511,25" stroke="#d4dde4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d4dde4"/><line x1="529" y1="25" x2="529" y2="90" stroke="#d4dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="
391" y="65" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,m...
...And 2 more matches
A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas> element to do software rendering of a
3d environment using ray-casting.
... the code i ended up with is a regurgitated amalgam of the raycaster chapters from an old andré lamothetricks of the game programming gurus book (isbn: 0672
305070), and a java raycaster i found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.
...with the blockiness factor cranked up to render slivers 8 pixels wide, i can run a
320 x 240 window at 24 fps on my apple mini.
...And 2 more matches
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:#
3b
3b
3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" 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.js"></script> </body> </html> the key bits to take away fr...
...r.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 < 4
3) 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 like this: in line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we previously saved to draw the fra...
... the result is: line
3 fetches a copy of the raw graphics data for the current frame of video by calling the getimagedata() method on the first context.
...And 2 more matches
Compositing example - Web APIs
luma and chroma of 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 =
340; 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(); ru...
... ctx.arc(100, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(160, 100, 100, math.pi*2, 0, false); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,
30,
30) ctx.fill(); }; var colorsphere = function(element) { var ctx = canvas1.getcontext("2d"); var width =
360; var halfwidth = width / 2; var rotate = (1 /
360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <=
359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, o...
...top, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n +
300) %
360, s: 100, v: 100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,
30,
30) ctx.fill(); ret...
...And 2 more matches
CloseEvent - Web APIs
the only permitted codes to be specified in firefox are 1000 and
3000 to 4999 [source, bug].
... 100
3 unsupported data the connection is being terminated because the endpoint received data of a type it cannot accept (for example, a text-only endpoint received binary data).
...this is a generic status code, used when codes 100
3 and 1009 are not suitable.
...And 2 more matches
DOMMatrixReadOnly.scale() - Web APIs
if this value is anything other than 1, the resulting matrix will be
3d.
...if this value is anything other than 0, the resulting matrix will be
3d.
... if a scale is applied about the z-axis, the resulting matrix will be a 4x4
3d matrix.
...And 2 more matches
Document.cookie - Web APIs
;max-age=max-age-in-seconds (e.g., 60*60*24*
365 or
315
36000 for a year) ;expires=date-in-gmtstring-format if neither expires nor max-age specified it will expire at the end of session.
...ick="alertcookie()">show cookies</button> example #2: get a sample cookie named test2 document.cookie = "test1=hello"; document.cookie = "test2=world"; const cookievalue = document.cookie .split('; ') .find(row => row.startswith('test2')) .split('=')[1]; function alertcookievalue() { alert(cookievalue); } <button onclick="alertcookievalue()">show cookie value</button> example #
3: do something only once in order to use the following code, please replace all occurrences of the word dosomethingonlyonce (the name of the cookie) with a custom name.
... function doonce() { if (!document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri,
31 dec 9999 2
3: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 (es5)') } //es2016 if (document.cookie.split(';').some((item) => item.trim().startswith('...
...And 2 more matches
Document.createNSResolver() - Web APIs
this adapter works like the dom level
3 method lookupnamespaceuri on nodes in resolving the namespaceuri from a given prefix using the current information available in the node's hierarchy at the time lookupnamespaceuri is called.
...there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w
3.org/1999/xhtml').
... to match default elements in a non-null namespace, you either have to refer to a particular element using a form such as *namespace-uri()=http://www.w
3.org/1999/xhtml and name()=p[@id='_myid'] (this approach works well for dynamic xpath expressions where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
...And 2 more matches
Document - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties ...
... living standard intend to supersede dom
3 html living standardthe definition of 'document' in that specification.
...And 2 more matches
DocumentType - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
326" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its paren...
... documenttype.publicid read only a domstring, eg "-//w
3c//dtd html 4.01//en", empty string for html5.
...And 2 more matches
Element.getClientRects() - Web APIs
firefox
3.5 note firefox
3.5 adds width and height properties to the textrectangle object.
... <h
3>a paragraph with a span inside</h
3> <p>both the span and the paragraph have a border set.
... <h
3>a list</h
3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="with...
...And 2 more matches
Fullscreen API - Web APIs
document.addeventlistener("keypress", function(e) { if (e.keycode === 1
3) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter key.
... full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support 71 full support 71 full support ≤
37alternate name alternate 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 ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreenelementchrome full support 5
3prefixed full support 5
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18prefixed full support ≤18prefixed prefixed implemented with the vendor prefix: webkit full support 12prefixed...
...And 2 more matches
HTMLAnchorElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...And 2 more matches
HTMLCanvasElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...And 2 more matches
HTMLInputElement.webkitdirectory - Web APIs
for example, consider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2
34
3.jpg pic2
344.jpg pic2
355.jpg pic2
356.jpg vacations mars pic55
33.jpg pic55
34.jpg pic5556.jpg pic5684.jpg pic5712.jpg if the user chooses photoalbums, then the list reported by files will contain file objects for every file listed above—but not the directories.
... the entry for pic2
34
3.jpg will have a webkitrelativepath of photoalbums/birthdays/don's 40th birthday/pic2
34
3.jpg.
... this api has no official w
3c or whatwg specification.
...And 2 more matches
HTMLLinkElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...And 2 more matches
HTMLMediaElement.onencrypted - Web APIs
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...And 2 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom:
30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-ancho...
...r="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text...
... x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="5...
...And 2 more matches
HTMLOListElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...And 2 more matches
HTMLObjectElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...And 2 more matches
HTMLTrackElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...And 2 more matches
Working with the History API - Web APIs
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.
... starting in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3), the object is serialized using the structured clone algorithm.
... 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.
...And 2 more matches
IIRFilterNode.getFrequencyResponse() - Web APIs
syntax iirfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float
32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseoutput a float
32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray.
... phaseresponseoutput a float
32array to receive the computed phase response values in radians for each frequency value in the input frequencyarray.
...And 2 more matches
Intersection Observer API - Web APIs
"10px 20px
30px 40px" (top, right, bottom, left).
...er"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box
3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "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; height: 18px; padding: 2px; text-align: center; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { botto...
... 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; wra...
...And 2 more matches
MouseEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="2
31" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseev...
... candidate recommendation from document object model (dom) level
3 events specification, added movementx and movementy properties.
...And 2 more matches
PhotoCapabilities - Web APIs
opera android full support 4
3safari ios ?
... opera android full support 4
3safari ios ?
... opera android full support 4
3safari ios ?
...And 2 more matches
RTCPeerConnection.createDataChannel() - Web APIs
this string may not be longer than 65,5
35 bytes.
... this string may not be longer than 65,5
35 bytes.
... id optional an 16-bit numeric id for the channel; permitted values are 0-655
34.
...And 2 more matches
RTCPeerConnection - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50...
..." fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which indicates whether or not the remote peer can accept trickled ice candidates.connectionstate the read-only connectionstate property of the r...
...removed from the specification's may 1
3, 2016 working draft.
...And 2 more matches
Range.compareNode() - Web APIs
obsolete since gecko 1.9 (firefox
3)this feature is obsolete.
... the possible values are: node_before (0) node starts before the range node_after (1) node ends after the range node_before_and_after (2) node starts before and ends after the range node_inside (
3) node starts after and ends before the range, i.e.
... warning: this method has been removed from gecko 1.9 (firefox
3) and will not exist in future versions of firefox, which was the only browser implementing it; you should switch to range.compareboundarypoints() as soon as possible.
...And 2 more matches
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 ...
... 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/...
...And 2 more matches
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target=...
...And 2 more matches
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"...
...And 2 more matches
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement...
...And 2 more matches
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelem...
...And 2 more matches
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" targ...
...And 2 more matches
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#...
...d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="midd...
...le" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggr...
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 2 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y=...
...And 2 more matches
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30...
... 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3...
..." text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="...
...And 2 more matches
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...And 2 more matches
SVGTSpanElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consola...
...And 2 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x=...
...And 2 more matches
SVGTextPositioningElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consola...
...And 2 more matches
SubtleCrypto.encrypt() - Web APIs
rsa-oaep the rsa-oaep public-key encryption system is specified in rfc
3447.
... aes-ctr this represents aes in counter mode, as specified in nist sp800-
38a.
... aes-cbc this represents aes in cipher block chaining mode, as specified in nist sp800-
38a.
...And 2 more matches
WEBGL_color_buffer_float - Web APIs
the webgl_color_buffer_float extension is part of the webgl api and adds the ability to render to
32-bit floating-point color buffers.
... constants ext.rgba
32f_ext rgba
32-bit floating-point color-renderable format.
... ext.rgb
32f_ext ( ) rgb
32-bit floating-point color-renderable format.
...And 2 more matches
WEBGL_draw_buffers - Web APIs
in webgl 2, the constants are available without the "webgl" suffix and the new glsl built-ins require glsl #version
300 es.
... ext.color_attachment0_webgl ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl a glenum specifying a color buffer.
... ext.draw_buffer0_webgl ext.draw_buffer1_webgl ext.draw_buffer2_webgl ext.draw_buffer
3_webgl ext.draw_buffer4_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_buffer1
3_webgl ext.draw_buffer14_webgl ext.draw_buffer15_webgl a glenum returning a draw buffer.
...And 2 more matches
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
must be 1, 2,
3, or 4.
...position gl.vertexattribpointer(0,
3, gl.float, false, 20, 0); gl.enablevertexattribarray(0); //2.
... bone weights, normalized to [0, 1] gl.vertexattribpointer(1, 4, gl.unsigned_byte, true, 20, 12); gl.enablevertexattribarray(1); //
3.
...And 2 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
possible values: when using the webgl_compressed_texture_s
3tc extension: ext.compressed_rgb_s
3tc_dxt1_ext ext.compressed_rgba_s
3tc_dxt1_ext ext.compressed_rgba_s
3tc_dxt
3_ext ext.compressed_rgba_s
3tc_dxt5_ext when using the webgl_compressed_texture_s
3tc_srgb extension: ext.compressed_srgb_s
3tc_dxt1_ext ext.compressed_srgb_alpha_s
3tc_dxt1_ext ext.compressed_srgb_alpha_s
3tc_dxt
3_ext ext.compressed_srgb_alpha_s...
...
3tc_dxt5_ext when using the webgl_compressed_texture_etc extension: ext.compressed_r11_eac ext.compressed_signed_r11_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_ex...
... examples var ext = ( gl.getextension('webgl_compressed_texture_s
3tc') || gl.getextension('moz_webgl_compressed_texture_s
3tc') || gl.getextension('webkit_webgl_compressed_texture_s
3tc') ); gl.compressedtexsubimage2d(gl.texture_2d, 0, 256, 256, 512, 512, ext.compressed_rgba_s
3tc_dxt5_ext, texturedata); specifications specification status comment webgl 1.0the definition of 'compressedtexsubimage2d' in that specification.
...And 2 more matches
WebGLRenderingContext.pixelStorei() - Web APIs
glint 0 0 to infinity opengl es
3.0 gl.pack_skip_pixels number of pixel locations skipped before the first pixel is written into memory.
... glint 0 0 to infinity opengl es
3.0 gl.pack_skip_rows number of rows of pixel locations skipped before the first pixel is written into memory glint 0 0 to infinity opengl es
3.0 gl.unpack_row_length number of pixels in a row.
... glint 0 0 to infinity opengl es
3.0 gl.unpack_image_height image height used for reading pixel data from memory glint 0 0 to infinity opengl es
3.0 gl.unpack_skip_pixels number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es
3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es
3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es
3.0 examples setting the pixel storage mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures...
...And 2 more matches
Lighting a WebXR setting - Web APIs
and while this article provides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a guide to how to create a properly-lit
3d scene.
... flashback: simulating lighting in
3d although this article isn't a comprehensive guide to lighting a
3d scene, it's useful to provide a brief reminder as to how lighting works in general.
...while sunlight does actually fall off in intensity with distance, the rate of change is very low and is only noticed over vast distances, so the rate of intensity change of sunlight doesn't typically matter for rendering a
3d scene.
...And 2 more matches
Using the Web Audio API - Web APIs
for example, there is no ceiling of
32 or 64 sound calls at one time.
... <audio src="mycooltrack.mp
3"></audio> note: if the sound file you're loading is held on a different domain you will need to use the crossorigin attribute; see cross origin resource sharing (cors) for more information.
...gain can be set to a minimum of about -
3.4 and a max of about
3.4.
...And 2 more matches
Window - Web APIs
position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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 4x4 matrices, suitable for 2d and
3d operations.
... window.dommatrixreadonly read only returns a reference to a dommatrixreadonly object, which represents 4x4 matrices, suitable for 2d and
3d operations.
...And 2 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
case 1
3: // sec_error_unknown_issuer, sec(1
3) case 20: // sec_error_untrusted_issuer, sec(20) case 21: // sec_error_untrusted_cert, sec(21) case
36: // sec_error_ca_cert_invalid, sec(
36) errname = 'securityuntrustedcertificateissuererror'; break; case 90: // sec_error_inadequate_key_usage, sec(90) errname = 'securityinadequatekeyusageerror'; ...
.../ sec_error_cert_signature_algorithm_disabled, sec(176) errname = 'securitycertificatesignaturealgorithmdisablederror'; 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...
...or'; 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 0x804b000c: // ns_error_connection_refused, network(1
3) errname = 'connectionrefusederror'; break; // network timeout error case 0x804b000e: // ns_error_net_timeout, network(14) errname = 'networktimeouterror'; break; // hostname lookup failed case 0x804b001e: // ns_error_unknown_host, network(
30) errname = 'domainnotfounderror'; break; case 0x804b0047: // ns_error_net_inte...
...And 2 more matches
XRView - Web APIs
a
3d frame will involve two views, one for each eye, separated by an appropriate distance which approximates the distance between the viewer's eyes.
... this allows the two views, when projected in isolation into the appropriate eyes, to simulate a
3d world.
...or a close-up view of something that doesn't need to appear in
3d).
...And 2 more matches
ARIA: Comment role - Accessibility
<p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h
3>chris said</h
3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-0
3-
30t19:29">march
30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment.
... multiple comments since aria-details can now accept multiple ids, we can associate multiple comments with the same annotation, like so: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h
3>chris said</h
3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-0
3-
30t19:29">march
30 2019, 19:29</time></p> </div> <div role="comment" id="thread-2" data-author="chris"> <h
3>marcus said</h
3> <p class="comment-text">the guitar solo could do with a touch more chorus, and a slightly lower volume.</p> <p><time datetime="2019-0
3-29t15:
35">march 29 2019, 1...
...5:
35</time></p> </div> nested comments nested comments are also possible with aria annotations — simply nest the comments inside one another, like so: <div role="comment" id="thread-1" data-author="chris"> <h
3>chris said</h
3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-0
3-
30t19:29">march
30 2019, 19:29</time></p> <div role="comment" data-author="marcus"> <h
3>marcus replied</h
3> <p class="comment-text">i don't know about that.
...And 2 more matches
Web applications and ARIA FAQ - Accessibility
wai-aria is the accessible rich internet applications specification from the web accessibility initiative at the w
3c.
... 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.
...as a result, pages that include aria may not validate using tools such as the w
3c's markup validator.
...And 2 more matches
:scope - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:scopechrome full support 27edge full support 79firefox full support
32notes full support
32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported.
... no support 20 —
32disabled disabled from version 20 until version
32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 15safari full support 7webview android full support ≤
37chrome android full support 27firefox android full support
32notes full support
32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported.
...And 2 more matches
system - CSS: Cascading Style Sheets
syntax /* keyword values */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system: additive; system: fixed; /* combined values */ system: fixed
3; system: extends decimal; this may take one of three forms: one of the keyword values cyclic, numeric, alphabetic, symbolic, additive, or fixed.
... 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.
...this is because the representation will produce correct roman numerals only until the counter value of
3999.
...And 2 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.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200,
300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names: value common weight name 100 thin (hairline) 200 extra light (ultra light)
300 light 400 normal 500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping.
...And 2 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a
300x
300-pixel element.
... html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e966
34f92.png); background-size: 150px; width:
300px; height:
300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size:
300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... here we scale a
32x
32 pixel favicon to
300x
300 pixels: .square2 { background-image: url(favicon.png); background-size:
300px; width:
300px; height:
300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file.
...And 2 more matches
Stacking context example 1 - CSS: Cascading Style Sheets
in the root stacking context we have two divs (div #1 and div #
3), both relatively positioned, but without z-index properties.
... 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.
...it happens that, since div #1 and div #
3 are not assigned any z-index value, they do not create a stacking context.
...And 2 more matches
Stacking context example 2 - CSS: Cascading Style Sheets
you can see that div #2 (z-index: 2) is above div #
3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.
...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
CSS Scrollbars - CSS: Cascading Style Sheets
.scroller { width:
300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
...oidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-widthchrome no support noedge no support nofirefox full support 64 full support 64 full support 6
3disabled disabled from version 6
3: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
... no support nowebview android no support nochrome android no support nofirefox android full support 64 full support 64 full support 6
3disabled disabled from version 6
3: this feature is behind the layout.css.scrollbar-width.enabled preference (needs to be set to true).
...And 2 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
the cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: origin importance 1 user agent normal 2 user normal
3 author normal 4 animations 5 author !important 6 user !important 7 user agent !important 8 transitions in case of equality, the specificity of a value is considered to choose one or the other.
... example let's look at an example involving multiple sources of css across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left:
3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply.
... so three declarations are in competition: margin-left: 0 margin-left:
3px margin-left: 1px the last one is ignored (on a screen), and the first two have the same selector, hence the same specificity.
...And 2 more matches
Shorthand properties - CSS: Cascading Style Sheets
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).
... 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 c...
...And 2 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="
336" height="
336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.
33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.5
3" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x...
...1 = 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) { ...
... // draw the y axis ctx.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 (...
...And 2 more matches
Viewport concepts - CSS: Cascading Style Sheets
when zoomed in you may get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 5
33 */ window.innerheight /* 5
33 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
... upon zooming in, the viewport became 800 x 5
33 pixels.
... body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x 5
33 measurement when we zoomed in using the keyboard.
...And 2 more matches
column-count - CSS: Cascading Style Sheets
syntax /* keyword value */ column-count: auto; /* <integer> value */ column-count:
3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width.
...</p> css .content-box { column-count:
3; } result specifications specification status comment css multi-column layout modulethe definition of 'column-count' in that specification.
... 12 full support 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version
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 15prefixed prefixed implemented with the vendor prefix: -webkit-safari ...
...And 2 more matches
<custom-ident> - CSS: Cascading Style Sheets
and toto\
3f are the same identifiers.
... 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
34rem it must not start with a decimal digit.
... css counter styles level
3the definition of '<custom-ident> for list-style-type' in that specification.
...And 2 more matches
flex-basis - CSS: Cascading Style Sheets
syntax /* specify <'width'> */ flex-basis: 10em; flex-basis:
3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>.
...it was implemented in bug 10
32922.
... then, that change was reverted in bug 109
3316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.
...And 2 more matches
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: jis8
3; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis04; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-a...
...sian-width-values> */ font-variant-east-asian: ruby full-width jis8
3; /* global values */ font-variant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal this keyword leads to the deactivation of the use of such alternate glyphs.
...possible values are: keyword standard defining the glyphs opentype equivalent jis78 jis x 0208:1978 jp78 jis8
3 jis x 0208:198
3 jp8
3 jis90 jis x 0208:1990 jp90 jis04 jis x 021
3:2004 jp04 simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of figures used for east asian characters.
...And 2 more matches
image-orientation - CSS: Cascading Style Sheets
the flip and <angle> values were made obsolete in firefox 6
3.
...obsolete since gecko 6
3 */ image-orientation: 90deg; /* rotate 90deg */ image-orientation: 90deg flip; /* rotate 90deg, and flip it horizontally */ image-orientation: flip; /* no rotation, only applies a horizontal flip */ syntax values none default initial value.
... <angle> obsolete since gecko 6
3 the <angle> of rotation to apply to the image.
...And 2 more matches
<length> - CSS: Cascading Style Sheets
ch represents the width, or more precisely the advance measure, of the glyph "0" (zero, the unicode character u+00
30) in the element's font.
... ic equal to the used advance measure of the "水" (cjk water ideograph, u+6c
34) glyph found in the font used to render it.
...
300px, 50%,
30vw) to set the width of a result bar that will appear below it once you've pressed return.
...And 2 more matches
letter-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.
3em; letter-spacing:
3px; letter-spacing: .
3px; /* global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; values normal the normal letter spacing for the current font.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w
3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements.
...ider">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.
...And 2 more matches
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/248a99
38d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <h2>object-fit: cover</h...
...2> <img class="cover" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <h2>object-fit: none</h2> <img class="none" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a99
38d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.
3em; } div...
... working draft css images module level
3the definition of 'object-fit' in that specification.
...And 2 more matches
object-position - CSS: Cascading Style Sheets
img { width:
300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
... result specifications specification status comment css images module level
3the definition of 'object-position' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-positionchrome full support
31edge full support 16firefox full support
36ie no support noopera full support 19 full support 19 full support 11.6prefixed prefix...
...And 2 more matches
Audio and video manipulation - Developer guides
= 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 simple example showing how to manipulate video frames using a canvas.
... video and webgl webgl is a powerful api that uses canvas to draw hardware-accelerated
3d or 2d scenes.
... you can combine webgl and the <video> element to create video textures, which means you can put video inside
3d scenes.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and
3d graphics on the web.
...image courtesy of user sharkd on wikipedia, distributed under the cc by-sa
3.0 license.
... the value of the hue (h) component of an hsl color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at
360°) that identifies what the base color is.
...And 2 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
linking to telephone numbers <a href="tel:+49.157.0156">+49 157 0156</a> <a href="tel:+1(555)5
309">(555) 5
309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number.
... see rfc
3966 for syntax, additional features, and other details about the tel: url scheme.
... <a href="" download="my_painting.png">download my painting</a> </p> <canvas width="
300" height="
300"></canvas> css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math...
...And 2 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
for example, if the audio's media timeline starts at 12 hours, setting currenttime to
3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail.
... waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp
3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio.
...the browser tries to load the first source element (opus) if it is able to play it; if not it falls back to the second (vorbis) and finally back to mp
3: <audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> <source src="foo.mp
3" type="audio/mpeg"/> </audio> accessibility concerns audio with spoken dialog should provide both captions and transcripts that accurately describe its content.
...And 2 more matches
<input type="month"> - HTML: Hypertext Markup Language
the
32nd of april).
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } 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; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } 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; } the best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> ele...
...And 2 more matches
<input type="radio"> - HTML: Hypertext Markup Language
the resulting html looks like this: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice
3" name="contact" value="mail"> <label for="contactchoice
3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button within the group.
...output the form data into: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice
3" name="contact" value="mail"> <label for="contactchoice
3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#l...
...ion of the previous example: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email" checked> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice
3" name="contact" value="mail"> <label for="contactchoice
3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> in this case, the first radio button is now selected by default.
...And 2 more matches
<input type="text"> - HTML: Hypertext Markup Language
in this example, for instance, the input is
30 characters wide: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word" size="
30"> </div> <div> <button>submit</button> </div> </form> validation <input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capabl...
... 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; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
...ed attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <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 no search term entered into it, the browser will show an error message.
...And 2 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>64</option> </datalist> <datalist id="fruitsxx"> <option>cherry</option> <option>banana</option> <option>mango</option> <option>orange</option> <option>blueberry</option> </datalist> <datalist id="urlsxx"> <option>https://developer.mozilla.org</option> <option>https://caniuse.com/</option> <option>https://mozilla.com</option> <option>https://mdn.github.io</op...
... caret-color a property specific to text entry-related elements is the css caret-color property, which lets you set the color used to draw the text input caret: html <label for="textinput">note the red caret:</label> <input id="textinput" class="custom" size="
32"> css input.custom { caret-color: red; font: 16px "helvetica", "arial", "sans-serif" } result object-position and object-fit in certain cases (typically involving non-textual inputs and specialized interfaces), the <input> element is a replaced element.
...rather, usability and accessibility requires the inclusion of either implicit or explicit <label>: <!-- inaccessible --> <p>enter your name: <input id="name" type="text" size="
30"></p> <!-- implicit label --> <p><label>enter your name: <input id="name" type="text" size="
30"></label></p> <!-- explicit label --> <p><label for="name">enter your name: </label><input id="name" type="text" size="
30"></p> the first example is inaccessible: no relationship exists between the prompt and the <input> element.
...And 2 more matches
<table>: The Table element - HTML: Hypertext Markup Language
<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> <col style="background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow<...
... mdn adding a caption to your table with <caption> caption & summary • tables • w
3c wai web accessibility tutorials scoping rows and columns the scope attribute on header elements is redundant in simple contexts, because scope is inferred.
...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%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 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(246, 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 column.
...And 2 more matches
Link prefetching FAQ - HTTP
starting in gecko 1.9.1 (firefox
3.5), https content can be prefetched.
... standardization of this technique is part of the scope of html 5, see the current working draft, section §5.11.
3.1
3.
...camino builds as of march 200
3 are based on mozilla 1.0.1, and therefore do not support prefetching.
...And 2 more matches
JavaScript data types and data structures - JavaScript
the number type is a double-precision 64-bit binary format ieee 754 value (numbers between -(25
3 − 1) and 25
3 − 1).
... this example demonstrates, where incrementing the number.max_safe_integer returns the expected result: > const x = 2n ** 5
3n; 9007199254740992n > const y = x + 1n; 900719925474099
3n you can use the operators +, *, -, **, and % with bigints—just like with numbers.
... false obsolete attributes (as of ecmascript
3, renamed in ecmascript 5) attribute type description read-only boolean reversed state of the es5 [[writable]] attribute.
...And 2 more matches
Character classes - JavaScript
for example, /\w/ matches "a" in "apple", "5" in "$5.28", and "
3" in "
3d".
...equivalent to [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u
3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u
3000\ufeff].
...And 2 more matches
Text formatting - JavaScript
caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 8574
38 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=8574
38 ).
...for example, the following code assigns hellolength the value 1
3, because "hello, world!" has 1
3 characters, each represented by one utf-16 code unit.
...(examples should be added to this page after mdn bug 8574
38 is fixed.) see also string.fromcodepoint() or string.prototype.codepointat().
...And 2 more matches
Using Promises - JavaScript
we can start operations in parallel and wait for them all to finish like this: promise.all([func1(), func2(), func
3()]) .then(([result1, result2, result
3]) => { /* use result1, result2 and result
3 */ }); sequential composition is possible using some clever javascript: [func1, func2, func
3].reduce((p, f) => p.then(f), promise.resolve()) .then(result
3 => { /* use result
3 */ }); basically, we reduce an array of asynchronous functions down to a promise chain equivalent to: promise.resolve().then(func1).then(f...
...unc2).then(func
3); this can be made into a reusable compose function, which is common in functional programming: const applyasync = (acc,val) => acc.then(val); const composeasync = (...funcs) => x => funcs.reduce(applyasync, promise.resolve(x)); the composeasync() function will accept any number of functions as arguments, and will return a new function that accepts an initial value to be passed through the composition pipeline: const transformdata = composeasync(func1, func2, func
3); const result
3 = transformdata(data); in ecmascript 2017, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func
3]) { result = await f(result); } /* use last result (i.e.
... result
3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already-resolved promise: promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the javascript event loop, i.e.
...And 2 more matches
RangeError: invalid array length - JavaScript
the javascript exception "invalid array length" occurs when creating an array or an arraybuffer which has a length which is either negative or larger or equal to 2
32, or when setting the array.length property to a value which is either negative or larger or equal to 2
32.
... an invalid array length might appear in these situations: when creating an array or an arraybuffer which has a length which is either negative or larger or equal to 2
32, or when setting the array.length property to a value which is either negative or larger or equal to 2
32.
...the length property of an array or an arraybuffer is represented with an unsigned
32-bit integer, that can only store values which are in the range from 0 to 2
32-1.
...And 2 more matches
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) ?
...hecks that would not otherwise be necessary.) the other major issue is that the recursive call will get a different this value, e.g.: var global = this; var sillyfunction = function(recursed) { if (!recursed) { return arguments.callee(true); } if (this !== global) { alert('this is: ' + this); } else { alert('this is the global'); } } sillyfunction(); ecmascript
3 resolved these issues by allowing named function expressions.
...And 2 more matches
Array.prototype.find() - JavaScript
syntax arr.find(callback(element[, index[, array]])[, thisarg]) parameters callback function to execute on each value in the array, taking
3 arguments: element the current element in the array.
...however, you can polyfill array.prototype.find with the following snippet: // https://tc
39.github.io/ecma262/#sec-array.prototype.find if (!array.prototype.find) { object.defineproperty(array.prototype, 'find', { value: function(predicate) { // 1.
... var len = o.length >>> 0; //
3.
...And 2 more matches
Array.prototype.sort() - JavaScript
thus the character formed by the surrogate pair \ud655\ude55 will be sorted before the character \uff
3a.
...mozilla versions dating back to at least 200
3) respect this.
...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.
...And 2 more matches
BigInt - JavaScript
bigint is a built-in object that provides a way to represent whole numbers larger than 25
3 - 1, which is the largest number javascript can reliably represent with the number primitive and represented by the number.max_safe_integer constant.
... const previousmaxsafe = bigint(number.max_safe_integer) // ↪ 9007199254740991n const maxplusone = previousmaxsafe + 1n // ↪ 9007199254740992n const thefuture = previousmaxsafe + 2n // ↪ 900719925474099
3n, this works now!
... const multi = previousmaxsafe * 2n // ↪ 18014
398509481982n const subtr = multi – 10n // ↪ 18014
398509481972n const mod = multi % 10n // ↪ 2n const bign = 2n ** 54n // ↪ 18014
398509481984n bign * -1n // ↪ –18014
398509481984n the / operator also works as expected with whole numbers.
...And 2 more matches
Date.prototype.setMonth() - JavaScript
syntax dateobj.setmonth(monthvalue[, dayvalue]) versions prior to javascript 1.
3 dateobj.setmonth(monthvalue) parameters monthvalue a zero-based integer representing the month of the year offset from the start of the year.
...an integer from 1 to
31, representing the day of the month.
...for example, if you use 15 for monthvalue, the year will be incremented by 1, and
3 will be used for month.
...And 2 more matches
Date.prototype.toString() - JavaScript
date.prototype.tostring() returns a string representation of the date in the format specified in ecma-262 which can be summarised as: week day:
3 letter english week day name, e.g.
... "sat" space month name:
3 letter english month name, e.g.
..."5
3" colon second: 2 digit second of minute, e.g.
...And 2 more matches
Map - JavaScript
let contacts = new map() contacts.set('jessie', {phone: "21
3-555-12
34", address: "12
3 n 1st ave"}) contacts.has('jessie') // true contacts.get('hilary') // undefined contacts.set('hilary', {phone: "617-555-4
321", address: "
321 s 2nd st"}) contacts.get('jessie') // {phone: "21
3-555-12
34", address: "12
3 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map ...
... examples using the map object let mymap = new map() let keystring = 'a string' let keyobj = {} let keyfunc = function() {} // setting the values mymap.set(keystring, "value associated with 'a string'") mymap.set(keyobj, 'value associated with keyobj') mymap.set(keyfunc, 'value associated with keyfunc') mymap.size //
3 // getting the values mymap.get(keystring) // "value associated with 'a string'" mymap.get(keyobj) // "value associated with keyobj" mymap.get(keyfunc) // "value associated with keyfunc" mymap.get('a string') // "value associated with 'a string'" // because keystring === 'a string' mymap.get({}) // undefined, because keyobj !== {} mymap.get(f...
... maps can be merged, maintaining key uniqueness: let first = new map([ [1, 'one'], [2, 'two'], [
3, 'three'], ]) let second = new map([ [1, 'uno'], [2, 'dos'] ]) // merge two maps.
...And 2 more matches
Math.imul() - JavaScript
the math.imul() function returns the result of the c-like
32-bit multiplication of the two parameters.
... return value the result of the c-like
32-bit multiplication of the given arguments.
... description math.imul() allows for
32-bit integer multiplication with c-like semantics.
...And 2 more matches
Promise.all() - JavaScript
var p1 = promise.resolve(
3); var p2 = 1
337; var p
3 = new promise((resolve, reject) => { settimeout(() => { resolve("foo"); }, 100); }); promise.all([p1, p2, p
3]).then(values => { console.log(values); // [
3, 1
337, "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 ite...
...rable 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 p
3 = 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(p
3); }); // logs // promise { <state>: "fulfilled", <value>: array[
3] } // promise { <state>: "fulfilled", <value>: array[4] } // promise { <state>: "rejected", <reason>: 555 } asynchronicity or synchronicity of promise.all t...
...his 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...
...And 2 more matches
String.prototype.charCodeAt() - JavaScript
the charcodeat() method returns an integer between 0 and 655
35 representing the utf-16 code unit at the given index.
...(for information on unicode, see the javascript guide.) note: charcodeat() will always return a value that is less than 655
36.
... because of this, in order to examine (or reproduce) the full character for individual character values of 655
36 or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two letters), or to use codepointat(i) instead.
...And 2 more matches
TypedArray - JavaScript
type value range size in bytes description web idl type equivalent c type int8array -128 to 127 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -
32768 to
32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 655
35 2 16-bit unsigned integer unsigned short uint16_t int
32array -214748
3648 to 214748
3647 4
32-bit two's complement signed integer long int
32_t uint
32array 0 to 4294967295 4
32-bit unsigned integer unsigned long uint
32_t ...
... float
32array 1.2×10-
38 to
3.4×10
38 4
32-bit ieee floating point number (7 significant digits e.g., 1.12
34567) unrestricted float float float64array 5.0×10-
324 to 1.8×10
308 8 64-bit ieee floating point number (16 significant digits e.g., 1.12
3...15) unrestricted double double bigint64array -26
3 to 26
3-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) constructor this object cannot be instantiated directly.
... typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
...And 2 more matches
WebAssembly.Global() constructor - JavaScript
this can be one of i
32, i64, f
32, and f64.
...it is being defined as a mutable i
32 type, with a value of 0.
... the value of the global is then changed, first to 42 using the global.value property, and then to 4
3 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).
...And 2 more matches
WebAssembly.Memory - JavaScript
webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i
32 = new uint
32array(memory.buffer); for (var i = 0; i < 10; i++) { i
32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0memory() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0bufferchrome full support 57edge full support 16firefox full suppor...
...And 2 more matches
WebAssembly.Module - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0customsectionschrome full support 57edge full support 16firefox ful...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0exportschrome full support 57edge full support 16firefox full suppo...
...And 2 more matches
encodeURIComponent() - JavaScript
~ * ' ( ) encodeuricomponent() differs from encodeuri as follows: var set1 = ";,/?:@&=+$"; // reserved characters var set2 = "-_.!~*'()"; // unescaped characters var set
3 = "#"; // number sign var set4 = "abc abc 12
3"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$ console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set
3)); // # console.log(encodeuri(set4)); // abc%20abc%2012
3 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %
3b%2c%2f%
3f%
3a%40%26%
3d%2b%24 console.log(encodeuricompone...
...nt(set2)); // -_.!~*'() console.log(encodeuricomponent(set
3)); // %2
3 console.log(encodeuricomponent(set4)); // abc%20abc%2012
3 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\udfff')); use encodeuricomponent() on user-entered fields from forms post'd to the server.
... to be more stringent in adhering to rfc
3986 (which reserves !, ', (, ), and *), even though these characters have no formalized uri delimiting uses, the following can be safely used: function fixedencodeuricomponent(str) { return encodeuricomponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charcodeat(0).tostring(16); }); } examples encoding for content-disposition and link headers the following example provides ...
...And 2 more matches
delete operator - JavaScript
var empcount = 4
3; employeedetails = { name: 'xyz', age: 5, designation: 'developer' }; // adminname is a property of the global scope.
...in the following example, trees[
3] is removed with delete.
... var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; delete trees[
3]; if (
3 in trees) { // this is not executed } if you want an array element to exist but have an undefined value, use the undefined value instead of the delete operator.
...And 2 more matches
in operator - JavaScript
// arrays let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'] 0 in trees // returns true
3 in trees // returns true 6 in trees // returns false 'bay' in trees // returns false (you must specify the index number, not the value at that index) 'length' in trees // returns true (length is an array property) symbol.iterator in trees // returns true (arrays are iterable, works only in es2015+) // predefined objects 'pi' in math // returns true // custom objects le...
... let mycar = {make: 'honda', model: 'accord', year: 1998} delete mycar.make 'make' in mycar // returns false let trees = new array('redwood', 'bay', 'cedar', 'oak', 'maple') delete trees[
3]
3 in trees // returns false if you set a property to undefined but do not delete it, the in operator returns true for that property.
... let mycar = {make: 'honda', model: 'accord', year: 1998} mycar.make = undefined 'make' in mycar // returns true let trees = new array('redwood', 'bay', 'cedar', 'oak', 'maple') trees[
3] = undefined
3 in trees // returns true the in operator will return false for empty array slots.
...And 2 more matches
new operator - JavaScript
the object (not null, false,
3.1415 or other primitive types) returned by the constructor function becomes the result of the whole new expression.
...to do this, you would write the following function: function car(make, model, year) { this.make = make; this.model = model; this.year = year; } now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 199
3); this statement creates mycar and assigns it the specified values for its properties.
... then the value of mycar.make is the string "eagle", mycar.year is the integer 199
3, and so on.
...And 2 more matches
async function - JavaScript
const fast = await resolveafter1second() console.log(fast) //
3.
... this runs
3 seconds after 1.
... console.log(await fast) //
3.
...And 2 more matches
function* - JavaScript
examples simple example function* idmaker() { var index = 0; while (true) yield index++; } var gen = idmaker(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); //
3 // ...
... example with yield* function* anothergenerator(i) { yield i + 1; yield i + 2; yield i +
3; } function* generator(i) { yield i; yield* anothergenerator(i); yield i + 10; } var gen = generator(10); console.log(gen.next().value); // 10 console.log(gen.next().value); // 11 console.log(gen.next().value); // 12 console.log(gen.next().value); // 1
3 console.log(gen.next().value); // 20 passing arguments into generators function* loggenerator() { console.log(0); console.log(1, yield); console.log(2, yield); console.log(
3, yield); } var gen = loggenerator(); // the first call of next executes from the start of the function // until the first yield statement gen.next(); // 0 gen.next('pretzel'); // 1 pretzel gen.next('california'); // 2 california gen.next...
...('mayonnaise'); //
3 mayonnaise return statement in a generator function* yieldandreturn() { yield "y"; return "r"; yield "unreachable"; } var gen = yieldandreturn() console.log(gen.next()); // { value: "y", done: false } console.log(gen.next()); // { value: "r", done: true } console.log(gen.next()); // { value: undefined, done: true } generator as an object property const someobj = { *generator () { yield 'a'; yield 'b'; } } const gen = someobj.generator() console.log(gen.next()); // { value: 'a', done: false } console.log(gen.next()); // { value: 'b', done: false } console.log(gen.next()); // { value: undefined, done: true } generator as an object method class foo { *generator () { yield 1; yield 2; yield
3; } } const f = new foo (); const ge...
...And 2 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
css
3 drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better.
...you could use css
3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats.
... the downsides here are that css
3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs.
...And 2 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w
3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m
30,40 q
36,
35,42,40 m58,40 q64,
35,70,40 m
30,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" ...
...dth="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax meet" x="105" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preserveaspectratio="xminymid slice" x="120" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="1
35" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="
30" viewbox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> </svg> topexample html,body...
...,svg { height:100% } <svg viewbox="-1 -1 162 92" xmlns="http://www.w
3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m
30,40 q
36,
35,42,40 m58,40 q64,
35,70,40 m
30,60 q50,75,70,60 q50,75,
30,60" /> </defs> <!-- (width>height) meet --> <rect x="0" y="0" width="20" height="10"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xmidymid meet" x="0" y="0"> <use href="#smiley" /> </svg> <rect x="25" y="0" width="20" height="10"> <title>xminymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xminymid meet" x="25" y="0"> <use href="#smiley" /> </svg> <rect x="50" y="0" width="20" height="10"> ...
...And 2 more matches
Content type - SVG: Scalable Vector Graphics
the following are examples of legal clock values: full clock values: 02:
30:0
3 = 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 fra...
... svg supports all of the syntax alternatives for <color> defined in css2 syntax and basic data types, and (depend on the implementation) in the future css color module level
3.
... | "rgb("integer, integer, integer")" | "rgb("integer "%", integer "%", integer "%)" | color-keyword hexdigit ::= [0-9a-fa-f] where color-keyword matches (case insensitively) one of the color keywords listed in css color module level
3, or one of the system color keywords listed in user preferences for colors (css2, section 18.2).
...And 2 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
| r' | | r1 r2 r
3 r4 r5 | | r | | g' | | g1 g2 g
3 g4 g5 | | g | | b' | = | b1 b2 b
3 b4 b5 | * | b | | a' | | a1 a2 a
3 a4 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 + r
3*b + r4*a + r5 g' = g1*r + g2*g + g
3*b + g4*a + g5 b' = b1*r + b2*g + b
3*b + b4*a + b5 a' = a1*r + a2*g + a
3*b + a4*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, r
3 times of the old pixel's blue b, r4 times the old pixel's alpha a, plus a shift r5.
... r' = r1 * r + r2 * g + r
3 * b + r4 * a + r5 new red = [ r1 * old red ] + [ r2 * old green ] + [ r
3 * old blue ] + [ r4 * 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 2 more matches
Example - SVG: Scalable Vector Graphics
this is done completely in w
3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions.
...view the example <?xml version='1.0'?> <html xmlns="http://www.w
3.org/1999/xhtml" xmlns:svg="http://www.w
3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='
300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
... </p> <p> this is done completely in w
3c standards–xhtml, svg and javascript–no flash or any vendor specific extensions. currently, this will work in mozilla firefox version 1.5 and above.
...And 2 more matches
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
you can find some basic examples of svg syntax and usage in the w
3c svg test suite.
...mented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 27
3171).
... color profile module color-profile not implemented (bug 42771
3).
...And 2 more matches
SVG animation with SMIL - SVG: Scalable Vector Graphics
<svg width="
300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="
300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransfo...
... <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="
34" 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="indefinit...
...in this case, we're establishing a path consisting of a moveto command to establish the starting point for the animation, then the horizontal-line command to move the circle
300 pixels to the right, followed by the z command, which closes the path, establishing a loop back to the beginning.
...And 2 more matches
Introduction - SVG: Scalable Vector Graphics
svg came about in 1999 after several competing formats had been submitted to the w
3c and failed to be fully ratified.
... flavors of svg since becoming a recommendation in 200
3, the most recent "full" svg version is 1.1.
...it was dropped for the upcoming svg 2.0, which is under heavy development right now and follows a similar approach to css
3 in that it splits components into several loosely coupled specifications.
...And 2 more matches
Subresource Integrity - Web security
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, sha
384, and sha512), followed by a dash, and ending with the actual base64-encoded hash.
... example integrity string with base64-encoded sha
384 hash: sha
384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha
384 indicates that it's a sha
384 hash.
... tools for generating sri hashes you can generate sri hashes from the command-line with openssl using a command invocation such as this: cat filename.js | openssl dgst -sha
384 -binary | openssl base64 -a or with shasum using a command invocation such as this: shasum -b -a
384 filename.js | awk '{ print $1 }' | xxd -r -p | base64 notes: the pipe-through-xxd step takes the hexadecimal output from shasum and converts it to binary.
...And 2 more matches
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may
3, 2001) isbn: 076454
3814 michael kay is a member of the w
3c xsl working group and the developer of his own open-source xslt processor, saxon.
... http://www.amazon.com/xslt-programme.../dp/076454
3814 xslt author: doug tidwell length: 47
3 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 05960005
37 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/xslt-doug-tidwell/dp/05960005
37 learning xml, second edition author: erik t.
...And 2 more matches
2015 MDN Fellowship Program - Archive of obsolete content
mdn fellows: what they did & what’s next blog post, september 2
3, 2015.
... specific projects (we encourage you to target one of these in your application): testthewebforward brief project description mozilla participates in an important w
3c open testing initiative, testthewebforward.com.
... required skills and experience computer graphics experience with programmable shaders and the opengl, opengl es, webgl, or direct
3d apis.
...subject to mozilla’s travel reimbursement policies, mozilla will cover fellows travel, room, per diem food costs and visa costs up to $
3,000 to attend the orientation.
passwords - Archive of obsolete content
so: if a web server at http://www.example.com requested authentication with a response code like this: http/1.0 401 authorization required server: apache/1.
3.27 www-authenticate: basic realm="exampleco login" the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" realm: "exampleco login" oncomplete and onerror this api is explicitly asynchronous, so all its functions take two callback functions as additional options: oncomplete and onerror.
... to store an add-on credential: require("sdk/passwords").store({ realm: "user registration", username: "joe", password: "secret12
3", }); to store an html form credential: require("sdk/passwords").store({ url: "http://www.example.com", formsubmiturl: "http://login.example.com", username: "joe", usernamefield: "uname", password: "secret12
3", passwordfield: "pword" }); to store an http authentication credential: require("sdk/passwords").store({ url: "http://www.example.com", realm: "exampleco login", usern...
...ame: "joe", password: "secret12
3", }); see "credentials" above for more details on how to set these properties.
...example, to remove all of joe's stored credentials: require("sdk/passwords").search({ username: "joe", oncomplete: function oncomplete(credentials) { credentials.foreach(require("sdk/passwords").remove); }) }); to change an existing credential just call store after remove succeeds: require("sdk/passwords").remove({ realm: "user registration", username: "joe", password: "secret12
3" oncomplete: function oncomplete() { require("sdk/passwords").store({ realm: "user registration", username: "joe", password: "{new password}" }) } }); parameters options : object required options: name type username string the username for the credential.
widget - Archive of obsolete content
deprecated in firefox 29 and removed in firefox
38.
...el 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 6
38142.
...this issue is currently tracked as bug 8254
34.
...this issue is currently tracked as bug 8254
34.
lang/type - Archive of obsolete content
let { isnumber } = require('sdk/lang/type'); isnumber(
3.1415); // true isnumber(100); // true isnumber('100'); // false parameters value : mixed the variable to check.
... let { isdate } = require('sdk/lang/type'); isdate(new date()); // true isdate('
3/1/201
3'); // false parameters value : mixed the variable to check.
... let { isarguments } = require('sdk/lang/type'); function run () { isarguments(arguments); // true isarguments([]); // false isarguments(array.slice(arguments)); // false } run(1, 2,
3); parameters value : mixed the variable to check.
... let { isprimitive } = require('sdk/lang/type'); isprimitive(
3); // true isprimitive('foo'); // true isprimitive({}); // false parameters value : mixed the variable to check.
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-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "
32": "./icon-
32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 1
3) { // remove the newline.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="1
3" 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-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-
32.png ...
Getting started (cfx) - Archive of obsolete content
use cfx only if you need to work with firefox
38 or earlier.
...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", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
... next, save these three icon files to the "data" directory: icon-16.png icon-
32.png icon-64.png back at the command prompt, type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "
32": "./icon-
32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
Bootstrapped extensions - Archive of obsolete content
gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) introduces bootstrapped extensions.
... addon_enable
3 the add-on is being enabled.
... add-on debugger from firefox
31 onwards, you can use the add-on debugger to debug bootstrapped add-ons.
...there are three changes you must make: you have to change the html file's extension to be .xhtml the doctype must be defined point to a dtd file in your locale folder such as: <!doctype html system "chrome://l10n/locale/mozilla.dtd"> must add xmlns attribute to html tag for example: <html xmlns="http://www.w
3.org/1999/xhtml"> if you have multiple dtd files read on here: using multiple dtds the bare minimum needed is: file: install.rdf file: chrome.manifest file: bootstrap.js folder: locale folder: valid_locale_here file: anything.dtd the chrome.manifest file must include a definition for content for example: content name_of_your_addon ./ the chrome.manifest fi...
Rosetta - Archive of obsolete content
|*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version
3 or later.
... |*| http://www.gnu.org/licenses/gpl-
3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
... "); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u201
3 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
... 0; nidx < ascripts.length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parsedocument; this.appendcompiler = function (vmimetypes, fcompiler) { if (arguments.length < 2) { throw new typeerror("rosetta.appendcompiler() \u201
3 not enough arguments"); } if (typeof fcompiler !== "function") { throw new typeerror("rosetta.appendcompiler() \u201
3 second argument must be a function"); } if (!array.isarray(vmimetypes)) { odicts[(vmimetypes).tostring()] = fcompiler; return true; } for (var nidx = 0; nidx < vmimetypes.length; nidx++) { odicts[(vmimetypes[nidx]).tostring()] = f...
Interaction between privileged and non-privileged pages - Archive of obsolete content
the code containing the callback could look like this: in the extension: var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); /* the extension answers the page*/ evt.target.setattribute("attribute
3", "the extension"); var doc = evt.target.ownerdocument; var answerevt = doc.createelement("myextensionanswer"); answerevt.setattribute("part1", "answers this."); doc.documentelement.appendchild(answerevt); var event = doc.createevent("htmlevents"); event.initevent("myanswerevent", true, false); answerevt.dispatchevent(event); } } document.addeventlistener("myext...
...ment.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); } function extensionanswer(evtanswer) { alert(element.getattribute("attribute
3") + " " + evtanswer.target.getattribute("part1")); } basic example of similar idea, extension passes information via attributes and fires event on div in page, here.
...response.tosource() : response)); } } </script> </head> <body> <button 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: fun...
...ts"); 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.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
here are the key similarities and differences between the
3 themes: all systems use small icons that are 16x16 pixels.
... here are some examples of how the css for a toolbarbutton would look like on the
3 major platforms.
... firefox
3 let extension = application.extensions.get(your_extension_id); if (extension.firstrun) { // add button here.
... } } if (application.extensions) firstrun(application.extensions); else application.getextensions(firstrun); the fuel library currently only works on firefox
3 and above.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
json templating jsontodom.namespaces = { html: "http://www.w
3.org/1999/xhtml", xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" }; jsontodom.defaultnamespace = jsontodom.namespaces.html; function jsontodom(jsontemplate, doc, nodes) { function namespace(name) { var reelemnameparts = /^(?:(.*):)?(.*)$/.exec(name); return { namespace: jsontodom.namespaces[reelemnameparts[1]], shortname: reelemnameparts[2] }; } ...
...ewitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutton", { id: "mytestbutton", class: "toolbarbutton-1", type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton12
3" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfra...
...gment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript access) by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton12
3); another example this here is another example of using jsontodom but in the html scope, a complex form is created with ease.
...it is safe, though inefficient, to assign dynamic values to innerhtml if any dynamic content in the value is escaped with the following function: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => ({ "&": "&", '"': """, "'": "&#
39;", "<": "<", ">": ">" })[m]); } or slightly more verbose, but slightly more efficient: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => escapehtml.replacements[m]); } escapehtml.replacements = { "&": "&", '"': """, "'": "&#
39;", "<": "<", ">": ">" }; note that quotation marks must be escaped in order to prevent fragments escaping attribute values.
User Notifications and Alerts - Archive of obsolete content
the appendnotification method takes the message, id, image (
32x
32), level and buttons.
...for mac os x, support was added on firefox
3, and only through a third-party tool called growl.
... on linux systems, we have confirmed that it works on firefox
3 on ubuntu linux, but we haven't tested all distributions and firefox versions.
...on firefox
3 and above, this seems to have been corrected, using the panel element.
Session store API - Archive of obsolete content
firefox
3 note in firefox
3 and later, if you need to detect when a tab is about to be closed so that you can update data associated with the tab before it is closed, you can watch for the "sstabclosing" event, which is sent to the tab.
... restoring without restarting firefox
3.6 note this section applies to firefox
3.6 and later.
... firefox
3.6 knows how to save session store data when the last browser window closes, even if there are still other windows open.
... starting in firefox
3.5, notifications are sent after reading session store data and before using it, as well as immediately before writing it back to disk.
Signing an extension - Archive of obsolete content
then cert8.db, key
3.db and secmod.db will be generated.
...here's an example of verisign: nss-certutil -m -n "verisign class
3 public primary certification authority" -t "c,c,c" -d .
... nss-certutil -m -n "verisign class
3 public primary certification authority - g5 - verisign, inc." -t "c,c,c" -d .
... nss-certutil -m -n "verisign class
3 code signing 2010 ca - verisign, inc." -t "c,c,c" -d .
Tabbed browser - Archive of obsolete content
notification when a tab's attributes change requires gecko 2.0(firefox 4 / thunderbird
3.
3 / seamonkey 2.1) starting in gecko 2.0, you can detect when a tab's attributes change by listening for the tabattrmodified event.
... // now you can check what's changed on the tab } // during initialization var container = gbrowser.tabcontainer; container.addeventlistener("tabattrmodified", exampletabattrmodified, false); // when no longer needed container.removeeventlistener("tabattrmodified", exampletabattrmodified, false); notification when a tab is pinned or unpinned requires gecko 2.0(firefox 4 / thunderbird
3.
3 / seamonkey 2.1) starting in gecko 2.0, tabs can be "pinned"; that is, they become special application tabs ("app tabs"), which are pinned to the beginning of the tab bar, and show only the favicon.
...nsihttpchannel but i guess you can use nsichannel, im not sure why though var interfacerequestor = ohttp.notificationcallbacks.queryinterface(components.interfaces.nsiinterfacerequestor); //var domwindow = interfacerequestor.getinterface(components.interfaces.nsidomwindow); //not to be done anymore because: https://developer.mozilla.org/docs/updating_extensions_for_firefox_
3.5#getting_a_load_context_from_a_request //instead do the loadcontext stuff below var loadcontext; try { loadcontext = interfacerequestor.getinterface(components.interfaces.nsiloadcontext); } catch (ex) { try { loadcontext = asubject.loadgroup.notificationcallbacks.getinterface(components.interfaces.nsiloadcont...
...eryinterface(ci.nsihttpchannel);" //start loadcontext stuff var loadcontext; try { var interfacerequestor = httpchannel.notificationcallbacks.queryinterface(ci.nsiinterfacerequestor); //var domwindow = interfacerequestor.getinterface(components.interfaces.nsidomwindow); //not to be done anymore because: https://developer.mozilla.org/docs/updating_extensions_for_firefox_
3.5#getting_a_load_context_from_a_request //instead do the loadcontext stuff below try { loadcontext = interfacerequestor.getinterface(ci.nsiloadcontext); } catch (ex) { try { loadcontext = subject.loadgroup.notificationcallbacks.getinterface(ci.nsiloadcontext); } catch (ex2) {} } } catch (ex0) {} if (!loadcontext)...
No Proxy For configuration - Archive of obsolete content
ozilla.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.
... localhost proxy 127.0.0.1 local host direct confirm the filter uses only suffix matches (hostname unit tests) hostname hostname direct name hostname direct host hostname proxy domains with numbers
3com.com .
3com.com direct fqdns hostname.domain.com hostname.domain.com domain.com proxy hostname.domain.com hostname.domain.com direct hostname.domain.com host.hostname.domain.com direct .domain.com .domain.com domain.com hostname.domain.com host.hostname.domain.com proxy direct ...
...filter comparison notable bugs bug 17208
3 - [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 1
36789 - proxy: no proxy ip entries do not block dns resolved ips bug
314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.co...
...m" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 26088
3 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158 comment 21: the correct separator are spaces or commas.
Structure of an installable bundle - Archive of obsolete content
fest chrome registration manifest (>=1.8) /components/* xpcom components (*.js, *.dll), and interface files from *.xpt (>=1.7) /defaults/preferences/*.js default preferences (>=1.7) /plugins/* npapi plugins (>=1.8) /chrome/icons/default/* window icons (>=1.8) /icon.png extension icon, for display in the add-ons manager,
32px ×
32px (>=1.9.2) /icon64.png extension icon, for display in the add-ons manager, 64px × 64px (>=2.0) /options.xul extension options, for display in the add-ons manager (>=7.0) ...
... platform-specific files gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) removed support for platform-specific subdirectories, described below.
... for example: binary-component components/windows/mycomponent.dll abi=winnt_x86-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x86-gcc
3 binary-component components/mac/mycomponent64.dylib abi=darwin_x86_64-gcc
3 binary-component components/linux/mycomponent.so abi=linux_x86-gcc
3 this also means you can no longer have platform-specific preference files in your bundle.
...for example, if a plugin vendor wanted to make a plugin available for consumer computers running linux(of the form: /platform/linux*/), macintosh(of the form: /platform/darwin*/), and windows(of the form: /platform/win*/), it would provide the following files: /platform/linux_x86-gcc
3/plugins/libmyplugin.so /platform/winnt_x86-msvc/plugins/myplugin.dll /platform/darwin_ppc-gcc
3/plugins/libmyplugin.dylib because xpt files are not platform-specific, any associated xpt files would go in the generic components directory: /components/myplugin.xpt if an extension has non-binary platform-specific code (such as code which uses the windows registry from script), it can also use ju...
Installing Dehydra - Archive of obsolete content
cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110705 cd js/src autoconf-2.1
3 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_201201
31) are working, too.
... please also note that autoconf v2.1
3 is really needed: it does not work with e.g.
...cd $home # obtain gcc 4.5.
3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/releases/gcc-4.5.
3/gcc-4.5.
3.tar.bz2 tar -jxvf gcc-4.5.
3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.
3 patch -p0 < ../finish_decl.diff # build gcc cd ..
... mkdir gcc-objdir mkdir gcc-dist cd gcc-objdir ../gcc-4.5.
3/configure --disable-bootstrap --enable-languages=c,c++ --prefix=$pwd/../gcc-dist make make install building dehydra and treehydra building dehydra requires spidermonkey development headers from the previous step.
Drag and drop events - Archive of obsolete content
firefox
3 adds two new events that allow you to determine when drag operations begin and end.
... note: the drag and drop event support advertised in the firefox
3 release notes is not the same as the events described in the drag and drop section of the html 5 working draft.
...firefox
3 does not support the 'drag' event.
... this support is added in firefox
3.5, and is documented separately on the page [drag and drop].
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(1
3) docontent()" coords="5
34,2
39,715,
300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="5
39,1
33,58
3,16
3" href="#stream-converter"> <area alt="(11)" coords="485,1
33,5
37,16
3" href="#contenthandler"> <area alt="(9)" coords="445,1
32,484,165" href="...
...#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,1
33,4
39,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="6
39,129,70
3,129,70
3,165,8
33,165,8
33,204,6
39,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="6
37,121,709,121,709,96,78
3,96,78
3,58,6
37,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="
311,
306,4
32,
371" href="#open"> <area alt="(4)" coords="90,
384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="
37,474,
346,474,
346,505,88,505,88,5
35,
37,5
35" href="#registercontentlistener" shape="poly"> <area alt="(
3) openuri() (nsuriloader)" coords="5,207,
312,269" href="#openuri"> <area alt="(2)" coords="102,114,1
39,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" co...
...ords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,
305,8
39,
339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="68
3,467,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="
371,71,6
35,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,11
3,821,157" href="#necko"> <area alt="nsuriloader" coords="2
3,
335,215,455" href="#nsuriloader"> <area coords="227,515,485,575" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="47,8
3,20
3,15
3" href="#nsdocshell"></map> this block diagram is out of date as of january 2012 with regard to some minor control flow shuffling in nsuriloader.
... original document information author(s): boris zbarsky last updated date: october 24, 200
3 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Downloading Nightly or Trunk Builds - Archive of obsolete content
firefox
3.0 corresponds to mozilla 1.9.0; firefox
3.5 corresponds to mozilla 1.9.1; firefox
3.6 corresponds to mozilla 1.9.2.
...for example "shiretoko" is used for firefox
3.5.
...for firefox
3.5 that would be latest-mozilla-1.9.1 in https://archive.mozilla.org/pub/firefox/nightly/.
...for the trunk and the latest two branches, there are machines at mozilla and maybe elsewhere compiling builds as fast as they can make them for at least all three of firefox, thunderbird and seamonkey on all three of linux-i686, mac-universalbinary and win
32.
Modularization techniques - Archive of obsolete content
for those who like gory details, their structure is this: struct nsid { pruint
32 m0; pruint16 m1, m2; pruint8 m
3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae
3c-11d1-b66c-00805f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae
3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote some...
... #include "nsifactory.h" // {d
3944dd0-ae1a-11d1-b66c-00805f8a2676} #define ns_sample_cid \ {0xd
3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
... file nssample
3.cpp #include <iostream.h> #include "pratom.h" #include "nsrepository.h" #include "nsisample.h" #include "nssample.h" static ns_define_iid(kisupportsiid, ns_isupports_iid); static ns_define_iid(kifactoryiid, ns_ifactory_iid); static ns_define_iid(kisampleiid, ns_isample_iid); static ns_define_cid(ksamplecid, ns_sample_cid); <strong>/* * globals */ static print
32 glockcnt = 0; static print
32 ...
... links the component object model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 1
3, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
Supporting private browsing mode - Archive of obsolete content
firefox
3.5 introduced private browsing mode, in which potentially private information is not recorded.
... detecting whether private browsing mode is permanent requires gecko 2.0(firefox 4 / thunderbird
3.
3 / seamonkey 2.1) firefox 4 added support for having private browsing mode permanently enabled.
... this._os.removeobserver(this, "private-browsing"); } }, get inprivatebrowsing() { return this._inprivatebrowsing; }, get watcher() { return this._watcher; }, set watcher(val) { this._watcher = val; } }; of special note is the fact that this helper object is designed to not break on versions of firefox without private browsing support (those prior to firefox
3.5).
... when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rgba(4
3,8,65,.9); -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(4
3,8,65,.9); -moz-border-right-colors: rgba(255,255,255,.5) rgba(4
3,8,65,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit.
Actionscript Performance Tests - Archive of obsolete content
sunspider) $ ./runtests.py sunspider/*.as sunspider/as
3/*.as test avm metric sunspider/access-binary-trees.as 584 time sunspider/access-fannkuch.as
364 time ...
...# change the iterations $ ./runtests.py --iterations=10 sunspider/*.as test avm 95% conf metric sunspider/access-binary-trees.as 565 1.0% time [565, 586, 57
3, 577, 567, 567, 579, 576, 565, 585] sunspider/access-fannkuch.as
361 0.
3% time [
365,
366,
362,
36
3,
366,
361,
36
3,
36
3,
364,
364] ...
... # compare 2 builds $ ./runtests.py --avm2=build2/avmshell sunspider/*.as test avm avm2 %sp metric sunspider/access-binary-trees.as 565 564 0.2 time sunspider/access-fannkuch.as
366
362 1.1 time ...
...vm2 min : max avg min : max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as [ 567.0 : 585] 575.9 [ 564.0 : 580] 572.0 0.5 time sunspider/access-fannkuch.as [
36
3.0 :
386]
370.0 [
362.0 :
399]
371.8 0.
3 time ...
The new nsString class implementation (1999) - Archive of obsolete content
yle function api to manipulate nsstrimpl offers simple memory allocator api for specialized memory policy shares binary format with bstring coming soon: a new xpcom (nsistring) interface non-templatized; this is a requirement for gecko very efficient buffer manipulation architecture the fundamental data type in the new architecture is struct nsstrimpl, given below: struct nsstrimpl { print
32 mlength; void* mbuffer; print
32 mcapacity; char mcharsize; char munused; // and now for the nsstrimpl api...
... static void ensurecapacity(nsstrimpl& astring,pruint
32 anewlength); static void growcapacity(nsstrimpl& astring,pruint
32 anewlength); static void append(nsstrimpl& adest,const nsstrimpl& asource,pruint
32 anoffset,print
32 acount); static void appendcstring(nsstrimpl& adest,const char* asource,pruint
32 anoffset,print
32 acount); static void assign(nsstrimpl& adest,const nsstrimpl& asource,pruint
32 anoffset,print
32 acount); static void assigncstring(nsstrimpl& adest,const char* asource,pruint
32 anoffset,print
32 acount); // assign a char or a substring into the existing string...
... static void insert(nsstrimpl& adest,pruint
32 adestoffset, const nsstrimpl& asource,pruint
32 asrcoffset,print
32 acount); static void insertcstring(nsstrimpl& adest,pruint
32 adestoffset, const char* asource,pruint
32 asrcoffset,print
32 acount); static void insertchar(nsstrimpl& adest,pruint
32 adestoffset,char thechar); static void insertchar(nsstrimpl& adest,pruint
32 adestoffset,prunichar theunichar); static void insertchar(nsstrimpl& adest,pruint
32 adestoffset,print
32 thequadchar); static void delete(nsstrimpl& adest,pruint
32 adestoffset,pruint
32 acount); static void truncate(nsstrimpl& adest,pruint
32 adestoffset); static print
32 compare(const nsstrimpl& adest,const nsstrimpl& asource, print
32 acoun...
...here's it's api: class nsimemoryagent : nsisupports { void* new(nsint
32 asize)=0; //used for both alloc and realloc void* delete(void* aptr)=0; }; internationalization the new nsstrimpl/nsstring implementation addresses at least two of the primary concerns of our i18n team.
XBL - Archive of obsolete content
xbl bindings have been removed from the firefox codebase and the work was tracked in bug 1
397874 and are we xbl still?.
... xbl 1.0 is a mozilla-specific technology, and not a w
3c standard.
... w
3c sxbl (currently a working draft, 2005) stands for svg's xml binding language.
... xbl 2.0 (w
3c candidate recommendation) was developed to address problems found in xbl 1.0 and to allow for implementations in a broader range of web browsers.
Windows stub installer - Archive of obsolete content
now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win
32_d.obj/install.
... if you need to use vc++ to debug the installer: under project | settings | debug set "executable for debug session" to be the path to mozilla/dist/win
32_d.obj/install/setup.exe set "working directory" to be the path to mozilla/dist/wind
32_d.obj/install press f10 to step into the code how we get setup to debug the xpinstall engine from the windows stub installer?
...the resulting stub installer and packages will be delivered to "mozilla/dist/win
32obj_d/installer".
... original document information author(s): samir gehani other contributors: curt patrick last updated date: march 12, 200
3 copyright information: copyright (c) samir gehani, curt patrick ...
compareTo - Archive of obsolete content
version an installversion object or a string representing version information in the format "4.1.2.12
34".
... -
3 this version object has a smaller (earlier) minor number than version.
...
3 this version object has a larger (newer) minor number than version.
...ompareto: installversion.major_diff installversion.minor_diff installversion.rel_diff installversion.bld_diff installversion.equal installversion.major_diff_minus installversion.minor_diff_minus installversion.rel_diff_minus installversion.bld_diff_minus example this code uses the compareto method to determine whether or not version
3.2.1 of the royal airways software has been previously installed: existingvi = installtrigger.getversion("/royalairways/royalsw"); if ( existingvi.compareto("
3.2.1") <= 0 ) { // ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
this input is defined in line 22, where getfolder() is used to assign a value to the communicatorfolder variable representing the "program" folder on the local system: var communicatorfolder = getfolder("program"); spaceavailable = filegetdiskspaceavailable(dirpath); spacerequired, the other expected input to the verifydiskspace function, is given as 17
311 kilobytes on line 19.
..."program" represents the directory where software itself is installed (e.g., c:\program files\ on win
32 systems), as opposed to supporting directories like "components", "chrome", or "temporary" (see getfolder in the xpinstall api reference for a list of keywords).
... for registering software with the win
32 operating system, the xpinstall api provides two special install objects, winprofile and winreg.
...the browser.xpi install script does not demonstrate the use of these objects, but see the xpinstall api reference for more information about registering software with the win
32 operating systems and other operating systems.
Reading from Files - Archive of obsolete content
read
32 will read four bytes and return this as a single
32-bit integer.
... in this next example, the read
32 method is used to read a
32-bit length from the file.
...var length = stream.read
32(); var data = stream.readstring(length); all values are read in big endian form, which means that integers are stored in the file with their higher bits first.
... for both the read16 and read
32 methods, the values are always interpreted as unsigned values.
Writing to Files - Archive of obsolete content
write
32 will write four bytes.
...the write
32 method performs a similar operation except that the value 1000 is written using four bytes, padding the unused bits with zeroes.
... stream.write16(1000); stream.write
32(1000); all values are read in big endian form, which means that integers are stored in the file with their higher bits first.
... for the write16 and write
32 methods, the values are always interpreted as unsigned values.
SQLite Templates - Archive of obsolete content
<vbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, email from myfriends where age >=
30 </query> <action> <hbox uri="?"> <label value="?name"/> <label value="?email"/> </hbox> </action> </template> </vbox> this template displays the results of two columns.
...note also that the query statement has a where clause which restricts the rows to those with an age greater or equal to
30.
...<listbox id="friends" datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, from myfriends where age >= :minage && age <= :maxage <param id="minage" name="minage" type="integer">
30</param> <param id="maxage" name="maxage" type="integer">40</param> </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> here, the age is an integer number, so the type attribute is set to integer.
... integers are
32-bit values, but you can use the value int64 for 64-bit integers.
The Joy of XUL - Archive of obsolete content
based on existing standards xul is an xml language based on w
3c standard xml 1.0.
... applications written in xul are based on additional w
3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition
3 (ecmascript); xml 1.0.
...however, there was no existing win
32 port available, so developers had to undertake a porting effort to migrate libical to windows.
...designers who are experienced in building web applications using w
3c standard technologies can leverage this experience from the browser directly to the desktop.
Custom toolbar button - Archive of obsolete content
supported applications you can use the steps on this page with any or all of these mozilla applications: firefox 1.5 or a later version seamonkey 2.0 or a later version thunderbird 1.5 or a later version sunbird 0.
3 or a later version pre-release versions of these (alphas, betas and release candidates) are also ok.
...
3.
...paste it into the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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:targetapplication><!-- firefox --> <description em:id="{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}" em:minversion="1.4" e...
...m:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{
3550f70
3-e582-4d05-9a08-45
3d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718e
30fb-e89b-41dd-9da7-e25a456
38b28}" em:minversion="0.2.9" em:maxversion="99" /> </em:targetapplication> <em:file> <description about="urn:mozilla:extension:custombutton" em:package="content/custombutton/" /> </em:file> </description> </rdf> optionally customize the file by changing the name, description and creator.
Element Positioning - Archive of obsolete content
the width of the box will be set to the initial total width of all three buttons (around 4
30 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).
... example
3 the third button is flexible so it will grow based on the size of the box the button is in.
...for example: example
3: source view <box flex="1"> <button label="happy"/> <button label="sad"/> </box> if you resize the window, the box will stretch to fit the window size.
Keyboard Shortcuts - Archive of obsolete content
vk_cancel vk_back vk_tab vk_clear vk_return vk_enter vk_shift vk_control vk_alt vk_pause vk_caps_lock vk_escape vk_space vk_page_up vk_page_down vk_end vk_home vk_left vk_up vk_right vk_down vk_printscreen vk_insert vk_delete vk_0 vk_1 vk_2 vk_
3 vk_4 vk_5 vk_6 vk_7 vk_8 vk_9 vk_semicolon vk_equals vk_a vk_b vk_c vk_d vk_e vk_f vk_g vk_h vk_i vk_j vk_k vk_l vk_m vk_n vk_o vk_p vk_q vk_r vk_s vk_t vk_u vk_v vk_w vk_x vk_y vk_z vk_numpad0 vk_numpad1 vk_numpad2 vk_numpad...
...
3 vk_numpad4 vk_numpad5 vk_numpad6 vk_numpad7 vk_numpad8 vk_numpad9 vk_multiply vk_add vk_separator vk_subtract vk_decimal vk_divide vk_f1 vk_f2 vk_f
3 vk_f4 vk_f5 vk_f6 vk_f7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f1
3 vk_f14 vk_f15 vk_f16 vk_f17 vk_f18 vk_f19 vk_f20 vk_f21 vk_f22 vk_f2
3 vk_f24 vk_num_lock vk_scroll_lock vk_comma vk_period vk_slash vk_back_quote vk_open_bracket vk_back_slash vk_close_bracket vk_quote vk_help for example, to create a shortcut that is activated when the user presses alt and f5, do the following: <keyset> <key id="test-key" modifi...
...ers="alt" keycode="vk_f5"/> </keyset> the example below demonstrates some more keyboard shortcuts: <keyset> <key id="copy-key" modifiers="accel" key="c"/> <key id="find-key" keycode="vk_f
3"/> <key id="switch-key" modifiers="control alt" key="1"/> </keyset> the first key is invoked when the user presses their platform-specific shortcut key and c.
... the second is invoked when the user presses f
3.
Manipulating Lists - Archive of obsolete content
the syntax is as follows: list.insertitemat(
3, "thursday", "thu"); list.removeitemat(
3); the insertitemat() function takes an additional argument, the position to insert the new item.
... 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.
... example
3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to
3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio...
...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"/> <listitem label="11"/> <listitem label="12"/> </listbox> next, we'll look at xul box objects.
Window icons - Archive of obsolete content
see also bug 15
318
36 for more details.
... note: the global icons override does not currently work due to bug bug 54
3490.
... starting with firefox
3.0, xulrunner
3.0, thunderbird
3.0 and seamonkey 2.0 you can now specify png format icons instead of xpm format on linux.
... you can specify up to 4 different sizes of png icons using the suffixes .png, 16.png,
32.png and 48.png.
menuitem - Archive of obsolete content
selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option
3" value="
3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
... note: if the checked attribute is set to true, and you persist its value via the persist attribute, mozilla will fail to persist its value when the menuitem is unchecked because of bug 152
32.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
richlistbox - Archive of obsolete content
note: in versions of firefox prior to firefox
3, rich list boxes support only single selection.
... firefox
3 introduced multiple selection to rich list boxes.
... for richlistbox, this is new in firefox
3.5.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
tree - Archive of obsolete content
tree id="mytree" flex="1" hidecolumnpicker="false" seltype="single" class="tree" rows="5"> <treecols id="mytree2-treecols"> <treecol id="mytree2-treecol0" primary="true" flex="2" label="column a" persist="width" ordinal="1"/> <splitter class="tree-splitter" ordinal="2"/> <treecol id="mytree2-treecol1" flex="1" label="column b" persist="width" ordinal="
3"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set container="true" --> <treeitem container="true" open="true"> <treerow> <treecell label="2"/> <treecell label="b"/> </treerow> <treechildren> <treeitem> <treero...
... for richlistbox, this is new in firefox
3.5.
...cbox-check.gif isn't available in firefox 1, 2, and
3 in mac os x so you should specify a url to an image in your extension or elsewhere.
...cbox-check-dis.gif isn't available in firefox 1, 2, and
3 in mac os x, so you should specify a url to an image in your extension or elsewhere.
XULRunner 2.0 Release Notes - Archive of obsolete content
specific runtimes can be found at: download xulrunner for windows download xulrunner for mac os x download xulrunner for
32-bit linux download xulrunner for 64-bit linux (warning: links may become out-of-date at times).
...xulrunner 2.0 is a universal binary containing i
386 and x86_64 architectures.
... xulrunner 1.9.2 and earlier versions had powerpc (ppc) and i
386 architectures.
... linux (
32-bit) unpack the tarball to a new directory using tar -xjf xulrunner-2.0.en-us.linux-i686.tar.bz2.
Debugging a XULRunner Application - Archive of obsolete content
see bug 124416
3.
... debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version
37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.
... security error: content at x-jsd:source?location=chrome%
3a%2f%2fvenkman%2fcontent%2fvenkman-overlay.js&instance=12 may not load or link to chrome://venkman/skin/venkman-source.css.
... note the "new in firefox
3" attribute "contentaccessible" on https://developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw
3bgqjllv#query:x-jsd+page:1+mid:xvlr7odilbyhn6v7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js...
XULRunner Hall of Fame - Archive of obsolete content
azardi free win/mac/linux epub 2/epub
3 desktop reader using html5 and latest css features of gecko for interactive e-books.
...now available with xulrunner
30 with i18n support.
...latest release december 2007 flickr uploadr
3.0 upload your photos to flickr.
...
30b a xulrunner-based wrapper for
30boxes.com xul explorer "a lightweight xul ide...
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september
30 - october 6, 2006 announcements vista compatibility lab mike schroepfer announced the current work being done testing mozilla products with vista.
...discussion regarding suggestions in the search bar not functioning in the october
3rd nightly build of ff 2.0.
... places in firefox
3 discussion regarding places (a new system for storing bookmarks, histroy and other page info) in firefox
3.
... everyone and his goldfish thinks bug
300198 should be fixed an as-of-yet unreplied to complaint regarding the status of bug
300198 remaining wontfix.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september
30 - october 6, 2006 announcements vista compatibility lab mike schroepfer announced the current work being done testing mozilla products with vista.
...discussion regarding suggestions in the search bar not functioning in the october
3rd nightly build of ff 2.0.
... places in firefox
3 discussion regarding places (a new system for storing bookmarks, histroy and other page info) in firefox
3.
... everyone and his goldfish thinks bug
300198 should be fixed an as-of-yet unreplied to complaint regarding the status of bug
300198 remaining wontfix.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - september
30-october 06, 2006 announcements mac user needed scott macgregor announced that .mac support and a dynamically add isp account feature has been added to the thunderbird account manager, however, testing is required before release can be issued.
... discussions is thunderbird using a valid w
3c coding?
... peter lairo requested someone who are knowledgeable in w
3c standards to confirm if the use of <blockquote type="cite"> is valid w
3c code.
...related: bug
342065 meetings none for 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.
...https://bugzilla.mozilla.org/show_bug.cgi?id=
354866 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.
... ( see bug
355
309.
... he also mentioned that he has filed bug
355606 in order to track the staging server setup.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.builds - november 17th to november 24th 2006 trouble building xulrunner 1.8.4 on winxp using mingw
32 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".
... firefox 1.5 build on windows with gtk2 november 2
3rd: vin is trying to build firefox 1.5.0.
3 on windows xp.
... 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
354866).
2006-10-06 - Archive of obsolete content
test resumt will be found here another lightning localization update with some bad news difference has been located between sunbird_0_
3_branch (for sunbird 0.
3) and mozilla_1_8_branch.
... sunbird/lightning localization update you need to update your localization if you want your locale to ship with lightning 0.
3 or sunbird 0.
3.
... mozillatranslator 5.1
3 rfes new version of mozillatranslator will be relaesed in a few weeks.
... calendar localization update rc1 for sunbird 0.
3 is out now and ready for testing.
NPEvent - Archive of obsolete content
syntax microsoft windows typedef struct _npevent { uint16 event; uint
32 wparam; uint
32 lparam; } npevent; mac os typedef eventrecord npevent; type eventrecord = record { what: integer; message: longint; when: longint; where: point; modifiers: integer; end; xwindows typedef xevent npevent; fields npevent on microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemo...
...wparam
32 bit field for the windows event parameter; parameter value depends upon event type.
... lparam
32 bit field for the windows event parameter; parameter value depends upon event type.
...values: 0 nullevent 1 mousedown 2 mouseup
3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 2
3 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
The Basics of Web Services - Archive of obsolete content
introducing xml-rpc xml-rpc is a type of web service and has been around since 1998, though not an official w
3c standard, it is widely used.
... warning: xml-rpc support was removed from firefox starting with firefox
3.
... introducing soap soap, a web service, is listed as a w
3c standard, and is similar in ways to xml-rpc.
... warning: soap support was removed from firefox starting with firefox
3.
Using Web Standards in your Web Pages - Archive of obsolete content
the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upgrading the content of your web pages to conform to the world wide web consortium (w
3c) web standards.
... the other sections address dom and dhtml coding practices which are at odds with the w
3c web standards and suggest replacements.
... every proposed w
3c web standards replacement in this article is working without a problem in modern browsers like msie 7, firefox 2, opera 9, safari
3, konqueror
3.5+, icab 4, etc.
... contents benefits of using web standards making your page using web standards - how to using the w
3c dom developing cross browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available...
E4X - Archive of obsolete content
e4x is standardized by ecma international in ecma-
357 standard (currently in its second edition, december 2005).
... someone verify the above known bugs and limitations it is not currently possible to access a dom object through e4x (bug 27055
3).
... <?xml version=...?>) (see bug
336551).
... workaround: var response = xmlhttprequest.responsetext; // bug 27055
3 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug
336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-
357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
you can see the latest proposals on the tc
39/ecma262 github repository.
... ecmascript 2016 array.prototype.includes() (firefox 4
3) typedarray.prototype.includes() (firefox 4
3) 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) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 52) ecmascript 2018 spread in object literals and rest parameters (firefox 55)...
... 58) global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet implemented; in other browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 6
3) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox 58) function.tostring() revision (firefox 54) symbol.description (firefox 6
3) well-formed json.stringify() (firefox 64) ecmascript 2020 this is the current es.next version.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=1
336740 and https://bugzilla.mozilla.org/show_bug.cgi?id=578700.
New in JavaScript 1.8 - Archive of obsolete content
this version was included in firefox
3 and is part of gecko 1.9.
... see bug
3802
36 for a tracking development bug for javascript 1.8.
... when using the javascript shell, javascript xpcom components, or xul <script> elements, the latest js version (js1.8 in mozilla 1.9) is used automatically (bug
3810
31, bug
385159).
...(bug
366941).
LiveConnect - Archive of obsolete content
older versions of gecko included special support for the java<->javascript bridge (such as the java and packages global objects), but as of mozilla 16 (firefox 16 / thunderbird 16 / seamonkey 2.1
3) liveconnect functionality is provided solely by the oracle's java plugin.
... removal of java and packages global objects in mozilla 16 see bug 748
34
3 for the rationale and workarounds.
... mailing list newsgroup rss feed related topics javascript, plugins older notes (please update or remove as needed.) while the bloated liveconnect code in the mozilla source was removed in version 1.9.2 of the platform (see bug 442
399), its former api has been restored (see also the specification and this thread) (building on npapi?), and as of java 6 update 12, extensions as well as applets can make use of this restored api.
... old liveconnect documents, broken links: java method overloading and liveconnect
3 the technique that liveconnect uses to invoke overloaded java methods from javascript.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing
3 below details a script used to process an rss feed from the mozilla website.
...getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w
3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.link + "\n" ); print( "date: " + i.dc::date + "\n" ); } the first half of this script is standard java code used to retrieve the feed data.
... the act of creating an e4x object is quite simple, in the case of listing
3, we do this through the line var x = new xml( str ); from here, the xml is accessible via dot notation.
... " + message + "<br/><br/>"; // append the entry to the log file jaxer.file.append( "dump.txt", s ); // add support for management via database jaxer.db.execute( "create table if not exists comments ( id integer primary key auto_increment, " + "name varchar(50) not null, " + "email varchar(255) not null, " + "message varchar(
300) not null )" ); jaxer.db.execute( "insert into comments ( name, email, message ) values ( ?, ?, ?
forEach - Archive of obsolete content
feel free to alter the text as english is not my mother tongue and i'm more concerned with the code quality that the english grammar ;-s dotnetcarpenter
30 june 2012 <hr> the compatibility section goes to extraordinary lengths in providing a foreach implementation.
...dotnetcarpenter
30 june 2012 <hr> i have released the write access restriction, but i will be watching changes closely.
...--gandalf 07:18,
31 may 2005 (pdt) is there a way to make foreach make use of break?
...--bencollver 11:18, 1
3-08-2008 ...
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
see bug 110
360, which explains the problem and shows when the fix was applied.
...see bug 97
351 for more details.
... related links bug 110
360 bug 97
351 original document information author(s): eric a.
... meyer, netscape communications last updated date: published 04 oct 2002; revised 07 mar 200
3 copyright information: copyright © 2001-200
3 netscape.
RDF in Mozilla FAQ - Archive of obsolete content
one alternative to using rdf and xul templates is to use the w
3c dom apis to build up and manipulate a xul (or html) content model.
...in fact, you can change anything about a template using the w
3c dom apis.
... note that the w
3c rdf core wg are registering application/rdf+xml, though this isn't understood by any mozilla code yet.
... notes see also w
3c rdf and semantic web pages for more information on rdf and related technologies.
The Business Benefits of Web Standards - Archive of obsolete content
adding h1, h2, and h
3, tags and so on gives proper structure to hypertext documents.
...using validation tools such as the w
3c validator helps by spotting coding errors and making sure html code is well-formed, which eliminates ambiguity in parsing by browsers.
... more and more browsers, other than internet explorer for windows, are used to surf the web: windows: msie, browsers using mozilla's gecko rendering engine, opera mac: ms-tasman (ie/mac's rendering engine), gecko-based browsers, safari, opera linux: gecko-based browsers, khtml-based browsers, opera overall, 5 different rendering engines are used to surf the web using dozens of browsers on
3 platforms.
... following standards-compliance in requirements documents is a very effective way to ensure measurable quality of the final product, the w
3c being an impartial judge.
Desktop mouse and keyboard controls - Game development
there are no helpers so you have to remember what the given codes are (or look them up);
37 is the left arrow: function keydownhandler(event) { if(event.keycode ==
39) { rightpressed = true; } else if(event.keycode ==
37) { leftpressed = true; } if(event.keycode == 40) { downpressed = true; } else if(event.keycode ==
38) { uppressed = true; } } the keyuphandler looks almost exactly the same as the keydownhandler above, but ins...
...if the left arrow is pressed (⬅︎; key code
37), we can set the leftpressed variable to true and in the draw function perform the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame.
... we could write our own keycode object containing the key codes, for example: var keyboardhelper = { left:
37, up:
38, right:
39, down: 40 }; that way instead of using the codes to compare the input in the handler functions we could do something like this, which is arguably easier to remember: if(event.keycode == keyboardhelper.left) { leftpressed = true; } note: you can also find a list if the different keycodes and what keys they relate to in the keycode reference page.
... you can see this example in action online at end
3r.github.io/javascript-game-controls and the full source code can be found at github.com/end
3r/javascript-game-controls.
Mobile touch controls - Game development
they are assigned dynamically, so if you put three fingers on the screen, then, pointer1pointer2, and pointer
3 will be active.
... moving the player could be managed by creating the four directional buttons, but we can take the advantage of touch screens and drag the player's ship around: var player = this.game.add.sprite(
30,
30, 'ship'); player.inputenabled = true; player.input.enabledrag(); player.events.ondragstart.add(ondragstart, this); player.events.ondragstop.add(ondragstop, this); function ondragstart(sprite, pointer) { // do something when dragging } we can pull the ship around and do something in the meantime, and react when the drag is stopped.
...the initialization of virtual joystick looks like this: this.pad = this.game.plugins.add(phaser.virtualjoystick); this.stick = this.pad.addstick(
30,
30, 80, 'generic'); in the create() function of the game state we're creating a virtual pad and a generic stick that has four directional virtual buttons by default.
... this is placed
30 pixels from the top and left edges of the screen and is 80 pixels wide.
Endianness - MDN Web Docs Glossary: Definitions of Web-related terms
little-endian means storing bytes in order of least-to-most-significant (where the least significant byte takes the first or lowest address), comparable to a common european way of writing dates (e.g.,
31 december 2050).
... naturally, big-endian is the opposite order, comparable to an iso date (2050-12-
31).
... examples with the number 0x12
345678 (i.e.
...
305 419 896 in decimal): little-endian: 0x78 0x56 0x
34 0x12 big-endian: 0x12 0x
34 0x56 0x78 mixed-endian (historic and very rare): 0x
34 0x12 0x78 0x56 ...
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
the ietf began formally specifying html in 199
3, and after several drafts released version 2.0 in 1995.
... in 1994 berners-lee founded the w
3c to develop the web.
... in 1996, the w
3c took over the html work and published the html
3.2 recommendation a year later.
... at that time, the w
3c nearly abandoned html in favor of xhtml, prompting the founding of an independent group called whatwg in 2004.
IMAP - MDN Web Docs Glossary: Definitions of Web-related terms
more recent than pop
3, imap allows folders and rules on the server.
... unlike pop
3, imap allows multiple simultaneous connections to one mailbox.
...imap4 revision 1 is the current version, defined by rfc
3501.
... learn more rfc
3501 pop
3 imap on wikipedia ...
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
web content accessibility guidelines (wcag) are a recommendation published by the web accessibility initiative group at the w
3c.
... wcag 2.0 which superseded wcag 1.0 was published as a w
3c recommendation on 11 december 2008.
... priority
3: web developers may satisfy these requirements, in order to make it easier for some groups to access the web content.
... learn more general knowledge wcag on wikipedia technical knowledge accessibility information on mdn the wcag 2.0 recommendation at the w
3c ...
CSS and JavaScript accessibility best practices - Learn web development
modern javascript is a powerful language, and we can do so much with it these days, from simple content and ui updates to fully-fledged 2d and
3d games.
... complex functionality like
3d games are not so easy to make accessible — a complex
3d game created using webgl will be rendered on a <canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of.
...think carefully about whether you need that shiny javascript-powered
3d information box, or whether plain old text would do.
...e only do the validation when the form is submitted — this is so that we don't update the ui too often and potentially confuse screen reader (and possibly other) users: form.onsubmit = validate; function validate(e) { errorlist.innerhtml = ''; for(let i = 0; i < formitems.length; i++) { const testitem = formitems[i]; if(testitem.input.value === '') { errorfield.style.left = '
360px'; createlink(testitem); } } if(errorlist.innerhtml !== '') { e.preventdefault(); } } note: in this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn't interfere with the screen reader being able to read content from it.
Advanced styling effects - Learn web development
="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black,
3px
3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources.
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px
3px 5px rgba(0,0,0,0.
3), inset -2px -
3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px
3px 5px rgba(0,0,0,0.
3), inset -2px -
3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set ...
...first, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 1
30px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/1
3090/colorful-heart.png) no-repeat center 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the result we get is this — you can see the original on the left, and the multiply blend mode on the right: mix-blend-mode now let's look at mix-blen...
..., to show how the elements will blend together: <article> no mix blend mode <div> </div> <div> </div> </article> <article> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 1
30px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/1
3090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode:...
Styling tables - Learn web development
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 def...
... start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border:
3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
...add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff
33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff
33cc; } 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.
create fancy boxes - Learn web development
as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da
389 95%), linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da
389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), ...
... linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), linear-gradient( 85deg, rgba(0,0,0,0) 8
3%, #9f8fa4 8
3%), linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); } gradients can be used in some very creative ways.
...<i>pierre desproges</i></blockquote> so here comes our style: blockquote { min-height: 5em; padding : 1em 4em; font : 1em/150% sans-serif; position : relative; background-color: lightgoldenrodyellow; } blockquote::before, blockquote::after { position: absolute; height :
3rem; font : 6rem/100% georgia, "times new roman", times, serif; } blockquote::before { content: '“'; top : 0.
3rem; left : 0.9rem; } blockquote::after { content: '”'; bottom : 0.
3rem; right : 0.8rem; } blockquote:lang(fr)::before { content: '«'; top : -1.5rem; left : 0.5rem; } blockquote:lang(fr)::after { content: '»'; bottom : 2.6rem; right : 0.5r...
... .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 1
3px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.
Example 4 - Learn web development
ption">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0
3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding ...
...: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e
3e
3e
3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e
3e
3e
3, #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-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; te...
...: 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.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) retu...
... 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 ...
Example 5 - Learn web development
rry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0
3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding ...
...: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e
3e
3e
3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e
3e
3e
3, #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-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; te...
...: 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.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) retu...
...ist); }); 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 Cheatsheet - Learn web development
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-24" pubdate>published on 2
3-05-2020</time> it is used to format the date legibly for the user, such as: published on 2
3-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 <audio controls="controls" src="https://udn.realityripple.com/samples/b7/19
3cb0
38d0.mp
3">your browser does not support the html5 audio element.</audio> your browser does not support the html5 audio element.
... embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/19
3cb0
38d0.mp
3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your browser does not support audio.
... term</dt> <dd>definition 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> <h
3> this is heading
3 </h
3> <h4> this is heading 4 </h4> <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.
Responsive images - Learn web development
the 800px picture is 128kb on disk, whereas the 480px version is only 6
3kb — a saving of 65kb.
...you can find an example of what this looks like in srcset-resolutions.html (see also the source code): <img srcset="elva-fairy-
320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="elva dressed as a fairy"> in this example, the following css is applied to the image so that it will have a width of
320 pixels on the screen (also called css pixels): img { width:
320px; } in this case, sizes is not needed — the browser simply works out what resolu...
...so if the device accessing the page has a standard/low resolution display, with one device pixel representing each css pixel, the elva-fairy-
320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) if the device has a high resolution of two device pixels per css pixel or more, the elva-fairy-640w.jpg image will be loaded.
... the 640px image is 9
3kb, whereas the
320px image is only
39kb.
HTML table basics - Learn web development
name mass (1024kg) diameter (km) density (kg/m
3) 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 5427
3.7 4222.6 57.9 167 0 closest to the sun venus 4.87 12,104 524
3 8.9 2802.0 108.2 464 0 earth 5.97 12,756 5514 9.8 24.0 14...
...9.6 15 1 our world mars 0.642 6,792
39
33 3.7 24.7 227.9 -65 2 the red planet jovian planets gas giants jupiter 1898 142,984 1
326 2
3.1 9.9 778.6 -110 67 the largest planet saturn 568 120,5
36 687 9.0 10.7 14
33.5 -140 62 ice giants uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27 neptune 102 49,528 16
38 11.0 16.1 4495.1 -200 14 dwarf planets pluto 0.0146 2,
370 2095 0.7 15
3.
3 5906.4 -225 5 declassified as a planet in 2006, but this remains controversial.
... cell
3.
...the values for your style attribute are background-color:#dcc48e; border:4px solid #c14
37a; the last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px; see how you get on with the example.
Storing the information you need — Variables - Learn web development
for example: myname = 'chris'; myage =
37; try going back to the console now and typing in these lines.
... 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).
...so for example, a simple case would be: let iamalive = true; whereas in reality it would be used more like this: let test = 6 <
3; this is using the "less than" operator (<) to test whether 6 is less than
3.
... as you might expect, it returns false, because 6 is not less than
3!
The "why" of web performance - Learn web development
imagine loading that same site on a $
35 huawei device in a rural india with limited coverage or no coverage.
... a 22.6 mb site could take up to 8
3 seconds to load on a
3g network, with domcontentloaded (meaning the site's base html structure) at
31.86 seconds.
...these same site visitors begin abandoning slow sites at
3 seconds.
... here's some real-world examples of performance improvements: tokopedia reduced render time from 14s to 2s for
3g connections and saw a 19% increase in visitors,
35% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user.
Getting started with React - Learn web development
for instance, react native can be used to build mobile applications; react
360 can be used to build virtual reality applications; and there are other possibilities besides.
...the scripts installed by create-react-app will start being served at a local server at localhost:
3000, and open the app in a new browser tab.
...on line
3, the opening <div> tag has a classname attribute.
...you'll notice that this change is immediately rendered in the development server running at http://localhost:
3000 in your browser.
TypeScript support in Svelte - Learn web development
and it is indeed being used by several large-scale projects, like angular 2, vue
3, ionic, visual studio code, jest and even the svelte compiler.
...(ts) change = (message, ms) => { ./svelte-todo-typescript/src/components/alert.svelte:11:
37 warn: parameter 'ms' implicitly has an 'any' type, but a better type may be inferred from usage.
... (ts) (message, ms) => { you can fix these by specifying the corresponding types, like so: export let ms =
3000 let visible: boolean let timeout: number const onmessagechange = (message: string, ms: number) => { cleartimeout(timeout) if (!message) { // hide alert if message is empty note: there's no need to specify the ms type with export let ms:number =
3000 because typescript is already inferring it from its default value.
... 'checked' : 'unchecked'} ${todos.length} todos` } const removecompletedtodos = () => { $alert = `removed ${todos.filter(t => t.completed).length} todos` todos = todos.filter(t => !t.completed) } </script> todosstatus.svelte we are encountering the following errors related to passing todos to the todosstatus.svelte (and todo.svelte) components: ./src/components/todos.svelte:70:
39 error: type 'todotype[]' is not assignable to type 'undefined'.
Links and Resources
wai - web accessibility initiative web content accessibility guidelines (wcag) 1.0 the first set of official guidelines from the w
3c web accessibility initiative (wai).
... wave
3.0 (web accessibility versatile evaluator) from webaim and sponsored by temple university institute on disabilities wave
3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to section 508 standards and/or the wcag guidelines.
... html advanced validator (firefox extension) by marc gueury this advanced html validator (based on w
3c tidy and on opensp for sgml validation - just like w
3c html validator) is a free, powerful, versatile, extended html validator.
...it can also report accessibility errors and warnings according to selectable accessibility guidelines (section 508, wcag priorities 1, 2 or
3).
Cookies Preferences in Mozilla
the default values given are for firefox
3.
... network.cookie.cookiebehavior default value: 0 0 = accept all cookies by default 1 = only accept from the originating site (block third party cookies) 2 = block all cookies by default
3 = use p
3p settings (note: this is only applicable to older mozilla suite and seamonkey versions.) 4 = storage access policy: block cookies from trackers network.cookie.lifetimepolicy default value: 0 0 = accept cookies normally 1 = prompt for each cookie (prompting was removed in firefox 44) 2 = accept for current session only
3 = accept for n days network.cookie.lifetime.days default value: 90 only used if network.cookie.lifetimepolicy is set to
3 sets the number of days that the lifetime of cookies should be limited to.
...policy is set to 1 true = accepts session cookies without prompting false = prompts for session cookies network.cookie.thirdparty.sessiononly default value: false true = restrict third party cookies to the session only false = no restrictions on third party cookies network.cookie.maxnumber default value: 1000 configures the maximum amount of cookies to be stored valid range is from 0-655
35, rfc 2109 and 2965 require this to be at least
300 network.cookie.maxperhost default value: 50 configures the maximum amount of cookies to be stored per host valid range is from 0-655
35, rfc 2109 and 2965 require this to be at least 20 network.cookie.disablecookieformailnews default value: true true = do not accept any cookies from within mailnews or from mail-style uris false = allow co...
... new in thunderbird
3 this preference is applicable to thunderbird
3 and later.
HTTP logging
press the enter key after each one.: for 64-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files\mozilla firefox\firefox.exe" for
32-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files (x86)\mozilla firefox\firefox.exe" (these instructions assume that you installed firefox to the default location, and that drive c: is your windows startup disk.
... 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 64-bit windows: "c:\program files\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt (these in...
... 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.
... logging only http request and response headers there are two ways to do this: replace moz_log=nshttp:5 with moz_log=nshttp:
3 in the commands above.
Old Thunderbird build
the source code requires
3.6gb of free space or more and additionally 5gb or more for default build.
...for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.
3/.
... on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files are not bundled with visual studio 201
3/2015 (windows sdk 8.1/10).
... if on windows you get link errors like "lnk1102: out of memory" or "lnk1
318: unexpected pdb error; ok (0)", try deleting the largest .pdb files before rushing out the door to buy more ram.
mach
mach itself is python
3 compliant, but modules used by mach likely are not python
3 compliant - so stick to python 2.7.
...so this
3rd point does not make much sense, does it?
... there are
3 main components to mach: the mach core.
...mach is also python
3 compliant (at least it should be).
Gecko SDK
get the sdk updates there is no need to download or rebuild the gecko sdk corresponding to security updates of mozilla (e.g., mozilla 1.7.
3) since the headers and glue libs in the gecko sdk are usually not changed as a result of security updates.
... 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_64 download n/a n/a n/a n/a mac i
386 download download download download n/a mac ppc n/a download download download download linux x86_64 ...
... issues with the os x sdk if you need to use the xpidl utility to compile idl files on os x, it'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 #4
30274).
... once that's done, you should perform the following command: ln -s /opt/local/lib/libintl.8.dylib /opt/local/lib/libintl.
3.dylib this should fix the problem.
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 4
3 firefox 4
3, 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
34 firefox
34, seamonkey 2.
31 gecko
33 firefox
33, seamonkey 2.
30 gecko
32 firefox
32, ...
...seamonkey 2.29 gecko 29 firefox 29, seamonkey 2.26 gecko 28 firefox 28, seamonkey 2.25 gecko 27 firefox 27, seamonkey 2.24 gecko 26 firefox 26, seamonkey 2.2
3 gecko 25 firefox 25, seamonkey 2.22 gecko 24 firefox 24, thunderbird 24, seamonkey 2.21 gecko 2
3 firefox 2
3, 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.14 gecko 16 firefox 16, thunderbird 16, seamonkey 2.1
3 gecko 15 firefox 15, thunderbird 15, s...
...eamonkey 2.12 gecko 14 firefox 14, thunderbird 14, seamonkey 2.11 gecko 1
3 firefox 1
3, thunderbird 1
3, seamonkey 2.10 gecko 12 firefox 12, thunderbird 12, seamonkey 2.9 gecko 11 firefox 11, thunderbird 11, seamonkey 2.8 gecko 10 firefox 10, thunderbird 10, seamonkey 2.7 gecko 9 firefox 9, thunderbird 9, seamonkey 2.6 gecko 8 firefox 8, thunderbird 8, seamonkey 2.5 gecko 7 firefox 7, thunderbird 7, seamonkey 2.4 gecko 6 firefox 6, thunderbird 6, seamonkey 2.
3 gecko 5 firefox 5, thunderbird 5, seamonkey 2.2 gecko 2 firefox 4, thunderbird
3.
3, seamonkey 2.1 gecko 1.9.2 firefox
3.6, thunderbird
3.1 gecko 1.9.1 firefox
3.5, thunderbird
3, sea...
...monkey 2.0 gecko 1.9 firefox
3 gecko 1.8.1 firefox 2, thunderbird 2, seamonkey 1.1 gecko 1.8 firefox 1.5, thunderbird 1.5, seamonkey 1.0 gecko 1.7 firefox 1.0, thunderbird 1.0, nvu 1.0, mozilla suite 1.7 older versions of gecko match the mozilla suite versions ...
How to Report a Hung Firefox
this may be because of a code error within firefox itself, such as a deadlock or infinite loop, or it may be caused by
3rd-party software such as a firefox extension, antivirus software, or even malware or a virus on your computer.
...the crash report should look something like this report, which is an example of bug 11
32241.
... then, in a terminal, kill firefox using a command such as this: # replace
31042 with the pid of firefox found above kill -n sigabrt
31042 # on osx kill -s sigabrt
31042 the firefox crash report ui should appear.
...ssagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badptr = ctypes.cast(zero, ctypes.pointertype(ctypes.int
32_t));var crash = badptr.contents;}', true); } other techniques on os x if you use a nightly build (>= firefox 16), you can use activity monitor's "sample process" feature to generate a sample.
Mozilla Content Localized in Your Language
2 or
3 letters and
3).
... example: 1.2
3 (decimal separator) or 1,000 (thousand separator) using comma or period.
... here is the guideline on the naming convention from w
3c.org: new terminology what is your localization team's process for identifying and creating new terminology?
...localizers can assume that source content reaches 2/
3 of the total available line space.
Localizing with Mercurial
mercurial distributed scm (version 1.
3.1)), you have installed mercurial successfully!
...mercurial distributed scm (version 1.
3.1)), you have installed mercurial successfully!
...mercurial distributed scm (version 1.
3.1)), you have installed mercurial successfully!
...the commit message should take the form of "bug 12
3456 - change this thing to work better by doing something; r=reviewers" if you are to fix a bug.
QA phase
to create and configure this file, follow these instructions: until the fix for bug 106
3880 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 ente...
... if you're using koala, this should be located at /path/to/your/koala.project/locale/
3.6/x-testing, otherwise, it should be located at /path/to/your/working_dir/l10n_base/x-testing.
... enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:7c54
3e8f
3a6a tag: tip user: your name <email@example.com> date: mon nov 2
3 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 t...
...you can expect to see output like this: comparing with http://hg.mozilla.org/l10n-central/x-testing searching for changes changeset: 0:7c54
3e8f
3a6a tag: tip user: your name <email@example.com> date: mon nov 2
3 18:08:25 2009 +0100 summary: added search bar strings let's now push this changeset.
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).
...furthermore, in accordance with the w
3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with the assurance that mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system.
...starting in gecko 1
3.0 (firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10), mathjax fonts are used as the default fonts for mathematical text and symbol stretching.
...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/
367848/addon-
367848-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
october 21, 2010 mathml
3.0 is now a w
3c recommendation!
...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 w
3c document object model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m1
3 builds for win
32 september 21, 1999 mathml has landed.
... september 18, 1999 status report - mozillazine annoucement september
3, 1999 xsl coming to mozilla?
... may 2
3, 1999 reader opinion: mathml's viability - talkback may 14, 1999 mozilla mathml project underway may 1999 mozilla mathml project initiation ...
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.
MathML Demo: <msqrt>, <mroot> - radicals
mathml has two root objects, an <msqrt> x and an <mroot> x
3 .
...about all you can do with them is see how the rendering stretches them in various ways: horizontally sin x cos y , vertically 1 2
3 4 and det ( 1 2
3 4 ) 2 , as well as 2 x y z w , 2 1 2
3 4 , and 2 ⌈ det ( 1 2
3 4 ) ⌉ .
... displays mathml has two root objects, an <msqrt> x and an <mroot> x
3 these are pretty simple.
... about all you can do with them is see how the rendering stretches them in various ways: horizontally sin x cos y vertically 1 2
3 4 and det ( 1 2
3 4 ) 2 as well as 2 x y z w 2 1 2
3 4 and 2 ⌈ det ( 1 2
3 4 ) ⌉ the formula of binet shows how the n-th term in the fibonacci series can be expressed using roots f n = 1 5 [ ( 1 + 5 2 ) n - ( 1 - 5 2 ) n ] ...
Using the viewport meta tag to control layout on mobile browsers
on displays with density between 200 and
300dpi, the ratio is 1.5.
... for displays with density over
300dpi, the ratio is the integer floor(density/150dpi).
...for example, the definition "width=
320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode.
... <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=
3.0, minimum-scale=0.86"> common viewport sizes for mobile and tablet devices if you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here.
Leak-hunting strategies and tips
see bug 106860 and bug 841
36 for examples.
...--jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 9
3087 for an example or bug 28555 for a slightly more interesting one.
...(this can happen equally with or without nscomptr.) see bug
38586 and bug 287847 for examples.
... if you really need to debug leaks that involve js objects closely, you can get detailed printouts of the paths js uses to mark objects when it is determining the set of live objects by using the functions added in bug
378261 and bug
378255.
Profiling with the Gecko Profiler and Local Symbols on Windows
it looks like we consume too much memory when creating the symbol table for this to work in
32 bit firefox builds.
... unfortunately,
32 bit is still the default when building firefox locally.
... you need to add the lines ac_add_options --target=x86_64-pc-mingw
32 and ac_add_options --host=x86_64-pc-mingw
32 to your mozconfig in order to build a 64 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-win
32.crashreporter-symbols.zip" point talos to this zipfile by passing its path to the --symbolspath flag.
tools/power/rapl
you must be running linux kernel version
3.14 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.4
3 w = 5.44 ( 1.44 + 1.20 + 2.80) +
3.98 w #0
3 14.26 w = 10.21 ( 5.47 + 0.19 + 4.55) + 4.04 w #04 10.02 w = 6.15 ( 2.62 + 0.4
3 +
3.10) +
3.86 w #05 14.6
3 w = 10.4
3 ( 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.1
3 w = 4.40 ( 1.55 + 0.11 + 2.74) +
3.7
3 w things to note include the following.
... once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.85 w std dev =
3.50 w 0th percentile = 5.17 w (min) 5th percentile = 5.17 w 25th percentile = 5.17 w 50th percentile = 8.1
3 w 75th percentile = 11.16 w 95th percentile = 14.6
3 w 100th percentile = 14.6
3 w (max) the distribution data is omitted if there was zero or one samples taken.
About NSPR
mitchell et al, xerox parc, csl-79-
3 (apr 1979)).
... interval timers are based on a free running,
32-bit, platform dependent resolution timer.
...use of 64 bits allows a representation of times approximately in the range of -
30000 to the year
30000.
...the current implementation supports macintosh (ppc), win-
32 (winnt, win9x) and 20 versions of unix and is still expanding.
PRExplodedTime
syntax #include <prtime.h> typedef struct prexplodedtime { print
32 tm_usec; print
32 tm_sec; print
32 tm_min; print
32 tm_hour; print
32 tm_mday; print
32 tm_month; print16 tm_year; print8 tm_wday; print16 tm_yday; prtimeparameters tm_params; } prexplodedtime; description the prexplodedtime structure represents clock/calendar time.
...the range is [1,
31].
...the range is [0, 2
3].
...the range is [0,
365].
PRIntervalTime
syntax #include <prinrval.h> typedef pruint
32 printervaltime; #define pr_interval_min 1000ul #define pr_interval_max 100000ul #define pr_interval_no_wait 0ul #define pr_interval_no_timeout 0xfffffffful description the units of printervaltime are platform-dependent.
...since the sampling of the counter used to define an arbitrary epoch may have any
32-bit value, some care must be taken in the use of interval times.
...interval has expired ...> as long as the interval and the elapsed time (now - epoch) do not exceed half the namespace allowed by a printervaltime (2
31-1), the expression shown above provides the expected result even if the signs of now and epoch differ.
...at that rate, a
32-bit register will overflow in approximately 28 hours, making the maximum useful interval approximately 6 hours.
PRTimeParameters
syntax #include <prtime.h> typedef struct prtimeparameters { print
32 tp_gmt_offset; print
32 tp_dst_offset; } prtimeparameters; description each geographic location has a standard time zone, and if daylight saving time (dst) is practiced, a daylight time zone.
...this is most commonly 1 hour, but may also be
30 minutes or some other amount.
...this is broken down as -8 + 1 hours, so tp_gmt_offset is -28800 seconds, and tp_dst_offset is
3600 seconds.
...in jst tp_gmt_offset is
32400 seconds, and tp_dst_offset is 0.
PR_Available
determines the number of bytes (expressed as a
32-bit integer) that are available for reading beyond the current read-write pointer in a specified file or socket.
... syntax #include <prio.h> print
32 pr_available(prfiledesc *fd); parameter the function has the following parameter: fd pointer to a prfiledesc object representing a file or socket.
...pr_available does not work with pipes on win
32 platforms.
... see also if the number of bytes available for reading is out of the range of a
32-bit integer, use pr_available64.
PR_dtoa
for example, with ieee 754 arithmetic, mode 0 gives 1e2
3 whereas mode 1 gives 9.999999999999999e22.
...
3 through ndigits past the decimal point.
... 4,5,8,9 same as modes 2 and
3, but usingleft to right digit generation.
... 6-9 same as modes 2 and
3, but do not try fast floating-point estimate (if applicable).
NSS Certificate Download Specification
this document describes the data formats used by nss
3.x for installing certificates.
...in all cases the certificates are x509 version 1, 2, or
3.
...this data must be base64 encoded as described by rfc 111
3.
... object identifiers the base of all netscape object ids is: netscape object identifier ::= { 2 16 840 1 11
37
30 } the hexadecimal byte value of this oid when der encoded is: 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42 the following oids are mentioned in this document: netscape-data-type object identifier :: = { netscape 2 } netscape-cert-sequence object identifier :: = { netscape-data-type 5 } ...
Mozilla-JSS JCA Provider notes
dsakpg.initialize(1024); 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 (des
3) rc2 rc4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs5 padding desede des
3 ecb nopadding cbc nopadding ...
... keygenerator supported algorithms notes aes des desede (des
3) rc4 the securerandom argument passed to init() is ignored, because nss does not support specifying an external source of randomness.
... secretkeyfactory supported algorithms notes aes des desede (des
3) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes
3) pbewithsha1and128rc4 rc4 generatesecret supports the following transformations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekey...
... secretkey supported algorithms notes aes des desede (des
3) hmacsha1 rc2 rc4 secretkey is implemented by the class org.mozilla.jss.crypto.secretkeyfacade, which acts as a wrapper around the jss class symmetrickey.
NSS Sample Code Utilities_1
*/ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column +=
3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(char c) { if (c == 0) { return -1...
...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, prfiledesc *src) { prfileinfo info; print
32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.size)) { numbytes = pr_read(src, dst->data, info.size); if (numbytes == info.size) { return secsuccess; } } secitem_freeitem(dst, pr_false); ...
...in the single password * case a line would just have the password whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ char *filepasswd(pk11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print
32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the file contents will be the same */ } phrases = port_zalloc(maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfil...
... if (c == eof) rv = secfailure; fprintf(stderr, "\n"); /* set back termio the way it was */ tio.c_lflag = orig_lflag; tio.c_cc[vmin] = orig_cc_min; tio.c_cc[vtime] = orig_cc_time; tcsetattr(fd, tcsaflush, &tio); return rv; } /* * seedfromnoisefile */ secstatus seedfromnoisefile(const char *noisefilename) { char buf[2048]; prfiledesc *fd; print
32 count; fd = pr_open(noisefilename, pr_rdonly, 0); if (!fd) { fprintf(stderr, "failed to open noise file."); return secfailure; } do { count = pr_read(fd,buf,sizeof(buf)); if (count > 0) { pk11_randomupdate(buf,count); } } while (count > 0); pr_close(fd); return secsuccess; } /* * filesize */ long filesize(const...
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:
3 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: arg1 = 0xaaaaaaaa ...
... osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: pinitargs = 0x4010c9
38 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: pinfo = 0xbffff
340 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: tokenpresent = 0x0 1024[805ef10]: pslotlist = 0x0 1024[805ef10]: pulcount = 0xbffff
33c 1024[805ef10]: *pulcount = 0x2 1024[805ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argument for which it will set a value (c_getslotlist above), this mode will display the value upon return.
...
3.
...for example, 1024[805ef10]: c_findobjectsinit 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: ptemplate = 0xbffff410 1024[805ef10]: ulcount =
3 1024[805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[805ef10]: cka_token = ck_true [1] 1024[805ef10]: cka_class = cko_certificate [4] 1024[805ef10]: rv = 0x0 1024[805ef10]: c_findobjects 1024[805ef10]: hsession = 0x1000001 1024[805ef10]: phobject = 0x806d810 1024[805ef10]: ulmaxobjectcount = 16 1024[805ef10]: pulobjectcount = 0xbffff
38c 1024[805ef10]: *pulobjectcount = 0x1 1024[805ef10]: p...
PKCS11 FAQ
yes, the token is call softokn
3 (softokn
3.dll on windows, libsoftokn
3.so on most unix platforms).
... the nss softokn
3 is not a complete pkcs #11 module, it was implemented only to support nss, though other products have managed to get it to work in their environment.
...the subjectaltname extension is part of the x.509 v
3 and pkix specifications.
...symmetric operations supported by nss include the following: ckm_aes_xxx, ckm_des
3_xxx, ckm_des_xxx, ckm_rc2_xxx, and ckm_rc4_xxx.
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_pkcs7cont...
...enttype mxr
3.2 and later sec_pkcs7copycontentinfo mxr
3.4 and later sec_pkcs7createcertsonly mxr
3.
3 and later sec_pkcs7createdata mxr
3.2 and later sec_pkcs7createencrypteddata mxr
3.2 and later sec_pkcs7createenvelopeddata mxr
3.2 and later sec_pkcs7createsigneddata mxr
3.2 and later sec_pkcs7decodeitem mxr
3.2 and later sec_pkcs7decoderabort mxr
3.9 and later sec_pkcs7decoderfinish mxr
3.2 and later sec_pkcs7decoderstart mxr
3.2 and later sec_pkcs7decoderupdate mxr
3.2 and...
... later sec_pkcs7decryptcontents mxr
3.2 and later sec_pkcs7destroycontentinfo mxr
3.2 and later sec_pkcs7encode mxr
3.
3 and later sec_pkcs7encodeitem mxr
3.9.
3 and later sec_pkcs7encoderabort mxr
3.9 and later sec_pkcs7encoderfinish mxr
3.2 and later sec_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_pkcs7ge...
...tsignercommonname 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_pkcs7verifydetachedsignature mxr
3.4 and later sec_pkcs7verifysignature mxr
3.2 and later secmime_decryptionallowed mxr
3.4 and later ...
Scripting Java
this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 16:18: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.14159265
358979
3 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and can be evaluated as well as being called.
...bject o) { return "f(object)"; } public string f(string s) { return "f(string)"; } public string f(int i) { return "f(int)"; } public string g(string s, int i) { return "g(string,int)"; } public string g(int i, string s) { return "g(int,string)"; } public static void main(string[] args) { overload o = new overload(); object[] a = new object[] { new integer(
3), "hi", overload.class }; for (int i = 0; i != a.length; ++i) system.out.println(o.f(a[i])); } } when we compile and execute the program, it produces the output f(object) f(object) f(object) however, if we write a similar script var o = new packages.overload(); var a = [
3, "hi", packages.overload ]; for (var i = 0; i != a.length; ++i) print(o.f(a[i])); and exe...
...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.
...if you remember from chapter
3, it is possible to define a javascript object with the {propertyname: value} notation.
Rhino serialization
beginning with rhino 1.5 release
3 it is possible to serialize javascript objects, including functions and scripts.
...they're intended mainly as examples of the use of serialization: $ java org.mozilla.javascript.tools.shell.main js> function f() { return
3; } js> serialize(f, "f.ser") js> quit() $ java org.mozilla.javascript.tools.shell.main js> f = deserialize("f.ser") function f() { return
3;} js> f()
3 js> here we see a simple case of a function being serialized to a file and then read into a new instance of rhino and called.
...however, you can run into problems with serialization of compiled functions and scripts: $ cat test.jsfunction f() { return
3; } serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java org.mozilla.javascript.tools.shell.main -opt -1test.js
3 $ java org.mozilla.javascript.tools.shell.main test.js js: uncaught javascript exception: java.lang.classnotfoundexception:c1 the problem is that java serialization has no built-in way to serialize java classes themselves.
... (it might be possible to save the java bytecodes in an array and then load the class upon deserialization, but at best that would eat up a lot of memory for just this feature.) one way around this is to compile the functions using the jsc tool: $ cat f.js function f() { return
3; } $ java -classpath js.jarorg.mozilla.javascript.tools.jsc.main f.js $ cat test2.js loadclass("f"); serialize(f, "f.ser"); g = deserialize("f.ser"); print(g()); $ java -classpath 'js.jar;.'org.mozilla.javascript.tools.shell.main test2.js
3 now the function f is compiled to a java class, but that class is then made available in the classpath so serialization works.
Property cache
the property cache was introduced in bug
365851.
...see bug 458271 and bug 5072
31 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 5
35416); anything about the values of the object's own properties, beyond what the method guarantee and the branded object guarantee say about functions.
...see bug 4408
34.
Introduction to the JavaScript shell
if value is specified, it must be convertable to a positive uint
32; gcparam() sets gc parameter name to value.
... 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 0000
3: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: 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] pcba...
...if your program includes a function, dostuff(), like this: function dostuff(input) { print("enter a number: "); var n1 = readline(); print("enter another one: "); var n2 = readline(); print("you entered " + n1 + " and " + n2 + "\n"); } calling dissrc(dostuff) function would give this output: ;------------------------- 10: print("enter a number: "); 00000: 10 name "print" 0000
3: 10 pushobj 00004: 10 string "enter a number: " 00007: 10 call 1 00010: 10 pop ;------------------------- 11: var n1 = readline(); 00011: 11 name "readline" 00014: 11 pushobj 00015: 11 call 0 00018: 11 setvar 0 00021: 11 pop ;------------------------- 12: print("enter another one: "); 00022: 12 name "print" 00025: 12 pushobj 00026: 12 string "enter anothe...
...r one: " 00029: 12 call 1 000
32: 12 pop ;------------------------- 1
3: var n2 = readline(); 000
33: 1
3 name "readline" 000
36: 1
3 pushobj 000
37: 1
3 call 0 00040: 1
3 setvar 1 0004
3: 1
3 pop ;------------------------- 14: ;------------------------- 15: print("you entered " + n1 + " and " + n2 + "\n"); 00044: 15 name "print" 00047: 15 pushobj 00048: 15 string "you entered " 00051: 15 getvar 0 00054: 15 add 00055: 15 string " and " 00058: 15 add 00059: 15 getvar 1 00062: 15 add 0006
3: 15 string "\\n" 00066: 15 add 00067: 15 call 1 00070: 15 pop 00071: 15 stop dumpheap(([filename[, start[, tofind[, maxdepth[, toignore]]]]]) dump gc information.
JIT Optimization Strategies
consider the following example: function base() {} base.prototype = { get x() { return
3; } }; function derived1() {} derived1.prototype = object.create(base.prototype); function derived2() {} derived1.prototype = object.create(base.prototype); if a property access for d.x sees only instances of both derived1 and derived2 for d, it can optimize the access to x to a call to the getter function defined on base.
...the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape
3 then obj.slots[2] ...
...the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] = val elif obj.shape == shape2 then obj.slots[5] = val elif obj.shape == shape
3 then obj.slots[2] = val ...
... consider the following: function foo(arg) { return bar(arg,
3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): // inlined call to bar(arg,
3) { return arg +
3; // } getelem_inlinecache this is the worst-case scenario for an element access optimiza...
JS::CompileOptions
constructor js::readonlycompileoptions(); // added in spidermonkey
31 js::owningcompileoptions(jscontext *cx); // added in spidermonkey
31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...s &setnoscriptrval(bool nsr) owningcompileoptions &setselfhostingmode(bool shm) owningcompileoptions &setcanlazilyparse(bool clp) owningcompileoptions &setsourceislazy(bool l) owningcompileoptions &setintroductiontype(const char *t) bool setintroductioninfo(jscontext *cx, const char *introducerfn, const char *intro, unsigned line, jsscript *script, uint
32_t offset) duplicate null-terminated string introducerfn for introducerfilename and set introductiontype, introductionlineno, introductionscriptroot, introductionoffset, and hasintroductioninfo properties.
...eval) compileoptions &setnoscriptrval(bool nsr) compileoptions &setselfhostingmode(bool shm) compileoptions &setcanlazilyparse(bool clp) compileoptions &setsourceislazy(bool l) compileoptions &setintroductiontype(const char *t) compileoptions &setintroductioninfo(const char *introducerfn, const char *intro, unsigned line, jsscript *script, uint
32_t offset) compileoptions &maybemakestrictmode(bool strict) properties properties of js::readonlycompileoptions name type description version jsversion version of the script.
... introductionoffset uint
32_t bytecode offset in the code which introduces this source code.
JS::SetLargeAllocationFailureCallback
this article covers features introduced in spidermonkey
31 specify a new callback function for large memory allocation failure.
...added in spidermonkey
38 callback syntax typedef void (* js::largeallocationfailurecallback)(void *data); name type description data void * data parameter passed to js::setlargeallocationfailurecallback.
... added in spidermonkey
38 description if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc.
... see also mxr id search for js::setlargeallocationfailurecallback mxr id search for js::largeallocationfailurecallback bug 9
362
36 bug 987995 - added data parameter ...
JSConstDoubleSpec
syntax template<typename t> struct jsconstscalarspec { const char *name; t val; /* uint8_t flags; // obsolete from jsapi
35 uint8_t spare[
3]; // obsolete from jsapi
35 */ }; typedef jsconstscalarspec<double> jsconstdoublespec; typedef jsconstscalarspec<int
32_t> jsconstintegerspec; // added in spidermonkey
38 name type description val double or int
32_t value for the double or integer.
...obsolete since jsapi
35 currently these can be 0 or more of the following values or'd: jsprop_enumerate: property is visible in for loops.
... spare uint8_t [
3] reserved for future use.
... obsolete since jsapi
35 description jsconstdoublespecs is used to define a set of double values that are assigned as properties to an object using js_defineconstdoubles.
JSNewResolveOp
obsolete since jsapi
36this feature is obsolete.
... flags uint
32_t obsolete since jsapi
31 flags giving contextual information about the ongoing property access.
... jsresolve_assigning obsolete since jsapi
31 the property appears on the left-hand side of an assignment.
... see also jsclass bug 547140 - removed flags bug 99
3026 - obsoleted ...
JSPropertyOp
syntax typedef bool (* jspropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); typedef bool (* jsstrictpropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // added in spidermonkey 1.9.
3 name type description cx jscontext * the context in which the property access is taking place.
...this is typically the value of the left-hand side after assignment, as opposed to the value of the right-hand side, as required by ecma 262-
3 §11.1
3.
...this incompatibility will be fixed in spidermonkey 1.8; see bug
312
354.
... see also mxr id search for jspropertyop mxr id search for jsstrictpropertyop bug
312
354 bug 5
3787
3 - added jsstrictpropertyop ...
JS_AddFinalizeCallback
syntax bool js_addfinalizecallback(jsruntime *rt, jsfinalizecallback cb, void *data); // added in spidermonkey
38 (jsapi
32) void js_removefinalizecallback(jsruntime *rt, jsfinalizecallback cb); // added in spidermonkey
38 (jsapi
32) void js_setfinalizecallback(jsruntime *rt, jsfinalizecallback cb); // obsolete since jsapi
32 name type description rt jsruntime * the jsruntime for which to set the finalization callback.
...added in spidermonkey
38 name description jsfinalize_group_start called when preparing to sweep a group of compartments, before anything has been swept.
... obsolete since jsapi
32 js_setfinalizecallback sets a new callback function.
... see also mxr id search for js_addfinalizecallback mxr id search for js_removefinalizecallback mxr id search for jsfinalizestatus mxr id search for jsfinalize_group_start mxr id search for jsfinalize_group_end mxr id search for jsfinalize_collection_end mxr id search for jsfinalizecallback jsfreeop js_setgccallback bug 72
3286 - separated from js_setgccallback as js_setfinalizecallback bug 996785 - replaced with js_addfinalizecallback ...
JS_ConvertArgumentsVA
obsolete since jsapi
38this feature is obsolete.
...added in spidermonkey
31 argc unsigned the number of arguments to convert.
... obsolete since jsapi
30 argv jsval * pointer to the vector of arguments to convert.
... obsolete since jsapi
30 format const char * character array containing the recognized format to which to convert.
JS_DeleteElement
syntax bool js_deleteelement(jscontext *cx, js::handleobject obj, uint
32_t index); // added in spidermonkey 45 bool js_deleteelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::objectopresult &result); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... index uint
32_t index number of the element to delete.
...for javascript 1.
3 and later, the attempt is silently ignored.
... see also mxr id search for js_deleteelement bug 111
3369 -- added result parameter ...
JS_DumpHeap
obsolete since jsapi
38this feature is obsolete.
... jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x0
3, // shape details are exposed through js_traceshapecyclecollectorchildren.
... jstrace_base_shape = 0x0f, jstrace_jitcode = 0x1f, jstrace_lazy_script = 0x2f, jstrace_type_object = 0x
3f, jstrace_last = jstrace_type_object }; description see bug
378261 for detail.
... see also bug
378261 bug 1122842 ...
JS_LookupElement
obsolete since jsapi
37this feature is obsolete.
... syntax bool js_lookupelement(jscontext *cx, js::handleobject obj, uint
32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in which to look up the property.
... index uint
32_t the numeric id of the property to look up.
...the ecmascript standard also specifies this behavior: see ecma 262-
3 §11.2.1, step 6.
JS_New
syntax jsobject * js_new(jscontext *cx, js::handleobject ctor, const js::handlevaluearray& args); // added in jsapi
32 jsobject * js_new(jscontext *cx, jsobject *ctor, unsigned argc, jsval *argv); // obsolete since jsapi
32 name type description cx jscontext * the context in which to create the new object.
...added in spidermonkey
38 argc unsigned the number of arguments to pass to the constructor.
... obsolete since jsapi
32 argv jsval * pointer to the element 0 of an array of argument values to pass to the constructor.
...obsolete since jsapi
32 description js_new creates a new object as though by using the new operator, as described in ecma 262-
3 §11.2.2.
JS_NewArrayObject
syntax jsobject * js_newarrayobject(jscontext *cx, const js::handlevaluearray& contents); // added in spidermonkey
31 jsobject * js_newarrayobject(jscontext *cx, size_t length); // added in spidermonkey
31 jsobject * js_newarrayobject(jscontext *cx, int length, jsval *vector); // obsolete since jsapi
30 name type description cx jscontext * the context in which to create the new array.
...added in spidermonkey
31 length size_t or int the length of the new array.
...obsolete since jsapi
30 description js_newarrayobject with contents parameter creates a new array object with the specified contents elements.
... obsolete since jsapi
30.
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.
...obsolete since jsapi
38 js_newobject now always uses a default prototype object.
...obsolete since jsapi
39 description js_newobject creates a new object based on a specified class.
... see also mxr id search for js_newobject mxr id search for js_newobjectwithgivenproto js_newglobalobject js_newarrayobject js_valuetoobject bug 408871 bug 11
36906, bug 11
36
345 -- remove parent parameter bug 1125567 -- change prototype lookup behaviour ...
JS_PreventExtensions
syntax // added in spidermonkey 45 bool js_preventextensions(jscontext *cx, js::handleobject obj, js::objectopresult &result); // obsolete since jsapi
39 bool js_preventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context.
...obsolete since jsapi
39 description all javascript objects recognize the concept of extensibility: whether new properties may be added to the object.
... the failure-mode information below is new as of spidermonkey
36.
... see also mxr id search for js_preventextensions bug 111
3369 -- added result parameter ...
jschar
obsolete since jsapi
35this feature is obsolete.
... jschar, a typedef for the standard c++ type char16_t, will be removed in jsapi
38.
...(see bug 106
3962.) as required by the ecmascript standard, ecma 262-
3 §4.
3.16", javascript strings are arbitrary sequences of 16-bit values.
... see also bug 106
3962 ...
Setting up an update server
for example, if you want the nightly mar from 2019-09-17 for a 64 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-
36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="211810021002
36"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar...
..., since it includes the sha512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-
36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-
36-29-mozilla-central/firefox-71.0a1.en-us.win64.checksums contains the sha512 for that file as well as for all the other win64 files that are part of that nightly release).
...this is the python2 command: python -m simplehttpserver 8000 or, this is the python
3 command: python
3 -m http.server 8000 if you aren't sure that you started the server correctly, try using a web browser to navigate to http://127.0.0.1:8000/update.xml and make sure that you get the xml file you created earlier.
Animated PNG graphics
for purposes of chunk descriptions, an unsigned int shall be a
32-bit unsigned integer in network byte order limited to the range 0 to (2^
32)-1; an unsigned short shall be a 16-bit unsigned integer in network byte order with the range 0 to (2^16)-1; and a byte shall be an 8-bit unsigned integer with the range 0 to (2^8)-1.
... if the default image is the first frame: sequence number chunk (none) 'actl' 0 'fctl' (first frame) (none) 'idat' (first frame -- used as the default image) 1 'fctl' (second frame) 2 'fdat' (first 'fdat' for second frame)
3 'fdat' (second 'fdat' for second frame) ...
... added information for png interaction with other chunks in section
3.2.
... removed num_frames from 'anim' chunk from 0.
3 added 'actl', 'fdat', 'fctl' chunk descriptions as per the latest png-list discussion added section 4, "interactions with other png chunks"; described global and local palettes and transparency changed 'offs' chunk section to refer to more general chunks updated 'adat' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty ...
places.sqlite Database Troubleshooting
download the latest precompiled binary sqlite command-line shell from: https://www.sqlite.org/download.html extract sqlite
3 executable into the work folder.
... then open an sqlite shell: my_work_folder> sqlite
3 places.sqlite-corrupt sqlite> pragma integrity_check; if the result is ok, this guide won't help; stop here and please file a bug.
... sqlite> .exit open a new shell for the new database: my_work_folder> sqlite
3 places.sqlite sqlite> pragma integrity_check; if the result is not ok, the file cannot be recovered; stop here and please file a bug.
... nn must be replaced with the number we had noted previously: sqlite> pragma user_version = nn; let's update the page_size value: sqlite> pragma journal_mode = truncate; sqlite> pragma page_size =
32768; sqlite> vacuum; sqlite> pragma journal_mode = wal; sqlite> .exit copy the new places.sqlite to the profile folder, overwriting the existing one.
How to build an XPCOM component in JavaScript
of the typelib xpidl_module = dom_apps # set to 1 if the module should be part of the gecko runtime common to all applications gre_module = 1 # the idl sources xpidlsrcs = \ helloworld.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_flags += \ -i$(topsrcdir)/dom/interfaces/base \ -i$(topsrcdir)/dom/interfaces/events \ $(null) creating the component using xpcomutils in firefox
3 and later you can use import xpcomutils.jsm using components.utils.import to simplify the process of writing your component slightly.
...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 = { classdescription: "my hello world javascript xpcom component", classid: components.id...
...4.com/helloworld;1", queryinterface: xpcomutils.generateqi([components.interfaces.nsihelloworld]), hello: function() { return "hello world!"; } }; var components = [helloworld]; if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // firefox 4.0 and higher else var nsgetmodule = xpcomutils.generatensgetmodule(components); // firefox
3.x note: starting with firefox 4.0 you will need to declare your component in chrome.manifest; classdescription and contractid properties on the other hand are no longer required.
... .createinstance(components.interfaces.nsihelloworld); alert(mycomponent.hello()); } catch (anerror) { dump("error: " + anerror); } other resources rm lantwo mozillazine forums threads about implementing xpcom components in js with some explanations, example code, and troubleshooting tips: http://forums.mozillazine.org/viewtopic.php?t=
308
369 http://forums.mozillazine.org/viewtopic.php?t=
367298 implementing xpcom components in javascript at kb.mozillazine.org using xpcom in javascript without leaking - a must-read.
XPCOM changes in Gecko 2.0
chrome.manifest: # the {classid} here must match the classid in mycomponent.js component {e6b866e
3-41b2-4f05-a4d2-
3d4bde0f7ef8} components/mycomponent.js contract @foobar/mycomponent;1 {e6b866e
3-41b2-4f05-a4d2-
3d4bde0f7ef8} category profile-after-change mycomponent @foobar/mycomponent;1 the javascript code no longer exports a nsgetmodule() function.
... classid: components.id("{e6b866e
3-41b2-4f05-a4d2-
3d4bde0f7ef8}"), queryinterface: xpcomutils.generateqi([components.interfaces.nsimycomponent]), /* nsimycomponent implementation goes here */ ...
...* xpcomutils.generatensgetmodule was introduced in mozilla 1.9 (firefox
3.0).
...you can use the os and abi chrome registration directives to achieve the same effect: binary-component components/windows/mycomponent.dll abi=winnt_x86-msvc binary-component components/mac/mycomponent.dylib abi=darwin_x86-gcc
3 binary-component components/mac/mycomponent64.dylib abi=darwin_x86_64-gcc
3 binary-component components/linux/mycomponent.so abi=linux_x86-gcc
3 this also means that platform-specific preferences are no longer possible.
An Overview of XPCOM
the cid for nsisupports looks like this: 00000000-0000-0000-c000-000000000046 the length of a cid can make it cumbersome to deal with in the code, so very often you see #defines for cids and other identifiers being used, as in this example: #define sample_cid \ { 0x777f7150, 0x4a2b, 0x4
301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb
3, 0x22, 0xaa}} you also see ns_define_cid used a lot.
...maps to a
32-bit integer.
...maps to a
32-bit integer.
... « previousnext » copyright (c) 200
3 by doug turner and ian oeschger.
Creating the Component Code
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, 0x4a2b, 0x4
301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb
3, 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 ce
32e
3ff-
36f8-425f-94be-d85b26e6
34ee 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.
...ict_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, 0x4a2b, 0x4
301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb
3, 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() { mrefcnt ...
... « previousnext » copyright (c) 200
3 by doug turner and ian oeschger.
Components.utils.Sandbox
example the content principal above can be made expanded/extended like so: var principal = [gbrowser.selectedtab.linkedbrowser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox
37 onwards, you can also specify the null principal by simply passing null as the principal argument.
...as of gecko 1
3 (firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10), if you don't specify a sandbox name it will default to the caller's filename.
...note that "-promise" is removed in firefox
37.
... the following objects are supported: -promise (removed in firefox
37) css indexeddb (web worker only) xmlhttprequest textencoder textdecoder url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxscript = 'var encoded = btoa("hello");' + 'var decoded = atob(encoded);'; var options = { "wantglobalproperties": ["atob", "btoa"] } var sandbox = components.utils.sandbox("https://example.org/", options); components.utils.evalinsandbox(sandboxscript, sandbox); con...
Observer Notifications
starting in firefox
3.5 components can simply register for the profile-after-change notification in nsicategorymanager.
...prior to firefox
3.5, this was available to observers observing the app-startup/xpcom-startup notification.
... http-on-examine-merged-response called instead of http-on-examine-response when a response will be read partially from cache, and partially from the network (http 206 or
304 response).
...the subject will be the download id wrapped in nsisupportspruint
32, for one download removed, or null for multi download remove, for example when the download list is cleared.
amIWebInstallListener
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean onwebinstallblocked(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint
32 acount); void onwebinstalldisabled(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint
32 acount); boolean onwebinstallrequested(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint
32 acount); note: prior to gecko 8.0, all references to nsidomwindow used...
...boolean onwebinstallblocked( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint
32 acount optional ); parameters awindow the window that triggered the installs.
...void onwebinstalldisabled( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint
32 acount optional ); parameters awindow the window that triggered the installs.
...boolean onwebinstallrequested( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint
32 acount optional ); parameters awindow the window that triggered the installs.
mozIStorageAggregateFunction
last changed in gecko 1.9 (firefox
3) inherits from: nsisupports method overview void onstep(in mozistoragevaluearray afunctionarguments); nsivariant onfinal(); methods onstep() this is called for each row of results returned by the query.
...var standarddeviationfunc = { _numbers: [], onstep: function(aarguments) { this._numbers.push(aarguments.getint
32(0)); }, onfinal: function() { let total = 0; let ilength = this._numbers.length; this._numbers.foreach(function(elt) { total += elt }); let mean = total / this._numbers.length; let data = this._numbers.map(function(elt) { let value = elt - mean; return value * value; }); total = 0; data.foreach(function(elt) { total += elt }); this._numbers = [...
...class standarddeviationfunc : public mozistorageaggregatefunction { public: ns_imethod onstep(mozistoragevaluearray *aarguments) { print
32 value; nsresult rv = aarguments->getint
32(&value); ns_ensure_success(rv, rv); mnumbers.appendelement(value); } ns_imethod onfinal(nsivariant **_result) { print64 total = 0; for (pruint
32 i = 0; i < mnumbers.length(); i++) total += mnumbers[i]; print
32 mean = total / mnumbers.length(); nstarray<print64> data(mnumbers); for (pruint
32 i = 0; i < data.l...
...ength(); i++) { print
32 value = data[i] - mean; data[i] = value * value; } total = 0; for (pruint
32 i = 0; i < data.length(); i++) total += data[i]; nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasdouble(sqrt(double(total) / double(data.length()))); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } private: nstarray<print
32> mnumbers; }; // now, register our function with the database connection.
mozIStorageError
last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type description message autf8string a human readable error string with details; this may be null if no details are available.
... full 1
3 an insertion failed because the database is full.
... auth 2
3 authorization denied.
... perm
3 access permission denied.
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.getint
32(0); return value * value; }); // run some query that uses the function.
...var squarefunction = { onfunctioncall: function(aarguments) { let value = aarguments.getint
32(0); return value * value; } }; // now, register our function with the database connection.
...class squarefunction : public mozistoragefunction { public: ns_imethod onfunctioncall(mozistoragevaluearray *aarguments, nsivariant **_result) { print
32 value; nsresult rv = aarguments->getint
32(&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->setasint64(value * value); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } }; // now, register our function...
nsIAccessibleText
inherits from: nsisupports last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long ...
... text boundary constants constant value description boundary_char 0 boundary_word_start 1 boundary_word_end 2 boundary_sentence_start
3 do not use in new code.
... boundary_line_start 5 boundary_line_end 6 boundary_attribute_range 7 coordinate type constants obsolete since gecko 1.9 (firefox
3)this feature is obsolete.
... constant value description coord_type_screen 0 coord_type_window 1 methods addselection() void addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset getattributerange() obsolete since gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) get the accessible and start/end offsets around the given offset.
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.
...method overview void activate(); void addnamespaces(in nsiarray namespaces); void discard(); void gatherentries(in pruint
32 typebits, out unsigned long count, [array, size_is(count)] out string keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring key); unsigned long gettypes(in acstring key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring key, in unsigned long typebits); void unmarkentry(in acstring key, in unsigned long typebits); attributes ...
... item_fallback
32 this item was listed as a fallback entry.
...void gatherentries( in pruint
32 typebits, out unsigned long count, [array, size_is(count)] out string keys ); parameters typebits a bit field indicating the types against which to match.
nsIAuthPrompt2
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) this interface is usually acquired using getinterface on notification callbacks or similar.
...to create an instance, use: var authprompt2 = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt2); method overview nsicancelable asyncpromptauth(in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint
32 level, in nsiauthinformation authinfo); boolean promptauth(in nsichannel achannel, in pruint
32 level, in nsiauthinformation authinfo); constants constant value description level_none 0 the password will be sent unencrypted.
... nsicancelable asyncpromptauth( in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint
32 level, in nsiauthinformation authinfo ); parameters achannel the channel that requires authentication.
... boolean promptauth( in nsichannel achannel, in pruint
32 level, in nsiauthinformation authinfo ); parameters achannel the channel that requires authentication.
nsIBidiKeyboard
(supported on: win
32, mac, gtk2) note: prior to gecko 1.9 this method used a parameter 'out prbool aisrtl' to return the value.
...(supported on: win
32) void setlangfrombidilevel( in pruint8 alevel ); parameters alevel if odd set the keyboard to right-to-left, if even set left-to-right.
... remarks implementation windows this implementation uses win
32 api to get the language of the keyboard layout, and the direction of those languages.
...more info: bug
348724, bug
348724, and gnome bug: 116626 mac only islangrtl is supported on this platform.
nsICachingChannel
inherits from: nsicacheinfochannel last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) this interface provides: support for "stream as file" semantics (for jar and plugins).
... load_only_from_cache 1 <<
30 this load flag inhibits fetching from the net if the data in the cache has been evicted.
... load_only_if_modified 1 <<
31 this load flag controls what happens when a document would be loaded from the cache to satisfy a call to asyncopen.
... methods isfromcache() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) this method finds out whether or not this channel's data is being loaded from the cache.
nsICompositionStringSynthesizer
dom/interfaces/base/nsicompositionstringsynthesizer.idlscriptable this interface is a composition string synthesizer interface that synthesizes composition string with arbitrary clauses and a caret 1.0 66 introduced gecko 26 obsolete gecko
38 inherits from: nsisupports last changed in gecko
38.0 (firefox
38.0 / thunderbird
38.0 / seamonkey 2.
35) this interface is obsoleted in gecko
38.
...lause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.setcaret("foo-bar".length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition string "foo-bar-buzz": // deprecated in
36, first, dispatch commit string without clause information compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.dispatchevent(); // then, dispatch compositionend with the commit string domwindowutils.sendcompositionevent("compositionend", "foo-bar-buzz", ""); starting gecko
36, you can do it simpler: domwindowutils.sendcompositionevent("compositioncommitasis", ...
..."", ""); if you need to commit composition with different commit string gecko
36 or later, you can use "compositioncommit": domwindowutils.sendcompositionevent("compositioncommit", "foo-bar-buzz", ""); method overview void appendclause(in unsigned long alength, in unsigned long aattribute); boolean dispatchevent(); void setcaret(in unsigned long aoffset, in unsigned long alength); void setstring(in astring astring); constants constant value description attr_raw_input 0x02 a clause attribute.
... attr_selectedrawtext 0x0
3 a clause attribute but this is typically not used.
nsIDBFolderInfo
obsolete since gecko 1.8 astring getproperty(in string propertyname); nsidbfolderinfo gettransferinfo(); unsigned long getuint
32property(in string propertyname, in unsigned long defaultvalue); void initfromtransferinfo(in nsidbfolderinfo transferinfo); long orflags(in long flags); void setbooleanproperty(in string propertyname, in boolean apropertyvalue); void setcharacterset(in string charset); void setcharactersetoverride(in boolean characte...
...obsolete since gecko 1.8 void setproperty(in string propertyname, in astring propertystr); void setuint
32property(in string propertyname, in unsigned long propertyvalue); attributes attribute type description charactersetoverride boolean expiredmark nsmsgkey expungedbytes long flags long folderdate unsigned long ...
...return value missing description exceptions thrown missing exception missing description getuint
32property() unsigned long getuint
32property( in string propertyname, in unsigned long defaultvalue ); parameters propertyname missing description defaultvalue missing description return value missing description exceptions thrown missing exception missing description initfromtransferinfo() void initfromtransferinfo( in nsidbfolderinfo transferin...
...rameters newboxname missing description exceptions thrown missing exception missing description setproperty() void setproperty( in string propertyname, in astring propertystr ); parameters propertyname missing description propertystr missing description exceptions thrown missing exception missing description setuint
32property() void setuint
32property( in string propertyname, in unsigned long propertyvalue ); parameters propertyname missing description propertyvalue missing description exceptions thrown missing exception missing description remarks see also ...
nsIFile
inherits from: nsisupports last changed in gecko
30.0 (firefox
30.0 / thunderbird
30.0 / seamonkey 2.27) nsifile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility.
... note: this method does not work on all platforms due to bug
322865.
... files that are exclusively opened on win
32 will return true if they are normally writable, and files that don't have write permissions will return false.
...on win
32 platforms, it is the currently selected ansi codepage (specified by cp_acp).
nsIFocusManager
nsidomelement getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint
32 getlastfocusmethod(in nsidomwindow window); void movecarettofocus(in nsidomwindow awindow); void elementisfocusable(in nsidomelement aelement, in unsigned long aflags); nsidomelement movefocus(in nsidomwindow awindow, in nsidomelement astartelement, in unsigned long atype, in unsigned long aflags); void setfocus(in nsidomelement aelement, in unsigned long afla...
... movefocus_forwarddoc
3 move focus forward to the next frame document, used when pressing f6.
... native code only!contentremoved obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1)this feature is obsolete.
... getlastfocusmethod() pruint
32 getlastfocusmethod( in nsidomwindow window ); parameters window if null, then the current focusedwindow will be used by default.
nsIMemoryReporter
kind print
32 the memory kind, one of the memory reporter kind constants below.
... units print
32 the units used by the amount attribute; this will be one of the unit type constants.
... units_percentage
3 the amount contains a fraction that should be expressed as a percentage.
...for example if the actual percentage is 12.
34%, amount should be 12
34.
nsIMsgHeaderParser
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheaderaddressmailboxes(in string line); void extractheaderaddressname(in string line, out string name); void extractheaderaddressnames(in string line, out string usernames); astring makefulladdress(in astring aname, in astring aaddress); string makefulladdres...
...sstring(in string aname, in string aaddress); wstring makefulladdresswstring(in wstring name, in wstring addr); obsolete since gecko 1.9 void parseheaderaddresses(in string line, out string names, out string addresses, out pruint
32 numaddresses); void parseheaderswitharray(in wstring aline, [array, size_is(count)] out wstring aemailaddresses, [array, size_is(count)] out wstring anames, [array, size_is(count)] out wstring afullnames, [retval] out unsigned long count); void reformatheaderaddresses(in string line, out string reformattedaddress); wstring reformatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquot...
... exceptions thrown missing exception missing description makefulladdresswstring() obsolete since gecko 1.9 (firefox
3) wstring makefulladdresswstring( in wstring name, in wstring addr ); parameters name the name of the sender.
... void parseheaderaddresses( in string line, out string names, out string addresses, out pruint
32 numaddresses ); parameters line the header line to parse.
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.
...ve code only!getplugin nsiplugin getplugin( in string amimetype ); parameters amimetype return value getplugincount() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void getplugincount( out unsigned long aplugincount ); parameters aplugincount native code only!getpluginfactory obsolete since gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0)this feature is obsolete.
... native code only!setisscriptableinstance obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1)this feature is obsolete.
nsIPrincipal
inherits from: nsiserializable last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) for details on principals, how they work, and how to get the appropriate one, see security check basics.
... constant value description enable_denied 1 enable_unknown 2 enable_with_user_permission
3 enable_granted 4 methods native code only!canenablecapability short canenablecapability( in string capability ); parameters capability missing description return value missing description exceptions thrown missing exception missing description checkmayload() checks whether this principal is allowed to load the network resource located at the give...
... note: prior to gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1), this was not available to scripts.
... note: prior to gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1), this was not available to scripts.
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.
... note: starting with firefox
3, one of uri_loadable_by_anyone, uri_dangerous_to_load, uri_is_ui_resource, or uri_is_local_file must be set on every protocol handler.
... uri_opening_executes_script 1<<1
3 uris for this protocol execute script when they are opened.
... allows_proxy_http 1<<
3 the protocol handler can be proxied using an http proxy (for example, http and ftp).
nsIScreen
inherits from: nsisupports last changed in gecko 1
3.0 (firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10) use nsiscreenmanager to obtain references to screens.
... gecko 1.9.2 note starting in gecko 1.9.2, gecko running on microsoft windows reports 24 bits per pixel instead of
32 bits per pixel on 8-bits per color component displays, since this is typically what the caller is actually looking for.
... screen rotation constants requires gecko 1
3.0(firefox 1
3.0 / thunderbird 1
3.0 / seamonkey 2.10) constant value description rotation_0_deg 0 0° of rotation (that is, no rotation, or default orientation).
... rotation_270_deg
3 270° of rotation.
nsISelection2
1.0 66 introduced gecko 1.8 obsolete gecko 8.0 inherits from: nsiselection last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface.
... method overview void getrangesforinterval(in nsidomnode beginnode, in print
32 beginoffset, in nsidomnode endnode, in print
32 endoffset, in prbool allowadjacent, out pruint
32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void getrangesforintervalcomarray(in nsidomnode beginnode, in print
32 beginoffset, in nsidomnode endnode, in print
32 endoffset, in prbool allowadjacent, in rangearray results); native code only!
... void getrangesforinterval( in nsidomnode beginnode, in print
32 beginoffset, in nsidomnode endnode, in print
32 endoffset, in prbool allowadjacent, out pruint
32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
... native code only!getrangesforintervalcomarray void getrangesforintervalcomarray( in nsidomnode beginnode, in print
32 beginoffset, in nsidomnode endnode, in print
32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
nsISelectionController
inherits from: nsiselectiondisplay last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview void characterextendforbackspace(); native code only!
....9.2 2.0 selection_none 0 selection_normal 1 selection_spellcheck 2 selection_ime_rawinput 4 selection_ime_selectedrawtext 8 selection_ime_convertedtext 16 selection_ime_selectedconvertedtext
32 selection_accessibility 64 for accessibility api usage.
... selection_find 128 num_selectiontypes 8 9 selection_anchor_region 0 selection_focus_region 1 selection_whole_selection 2 num_selection_regions 2
3 selection_off 0 selection_hidden 1 hidden displays selection.
... selection_on 2 selection_disabled
3 selection_attention 4 scroll constants constant value description scroll_synchronous 1<<1 if set scrolls the selection into view before returning.
nsISocketTransport
inherits from: nsitransport last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) note: connection setup is triggered by opening an input or output stream, it does not start on its own.
... constant value description status_resolving 0x804b000
3 transport is resolving the host.
...a value of pr_uint
32_max is equivalent to no timeout.
... avalue defines the timeout in seconds, pass pr_uint
32_max to specify no timeout.
nsMsgSearchAttrib
*/ [scriptable, uuid(a8
3ca7e8-4591-4111-8fb8-fd76ac7
3c866)] interface nsmsgsearchattrib { const nsmsgsearchattribvalue custom = -2; /* a custom term, see nsimsgsearchcustomterm */ const nsmsgsearchattribvalue default = -1; const nsmsgsearchattribvalue subject = 0; /* mail and news */ const nsmsgsearchattribvalue sender = 1; const nsmsgsearchattribvalue body = 2; const nsmsgsearchattribvalue date =
3; const nsmsgsearchattribvalue priority = 4; /* mail only */ ...
... const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 1
3; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representation of tags.
... const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue additionalemail = 22; const nsmsgsearchattribvalue phonenumber = 2
3; const nsmsgsearchattribvalue workphone = 24; 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 nsmsgsea...
...rchattribvalue department =
33; //
34 - 4
3, 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 uint
32hdrproperty = 51; // uses nsimsgsearchterm::hdrproperty // 52 is for showing customize - in ui headers start from 5
3 onwards up until 99.
NS_CStringCutData
#include "nsstringapi.h" nsresult ns_cstringcutdata( nsacstring& astring, pruint
32 acutstart, pruint
32 acutlength ); parameters astring [in] a nsacstring instance to be modified.
...pass pr_uint
32_max to specify the length from acutstart to the end of the string.
... example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello world"); // remove " world" portion of string ns_cstringcutdata(str, 5, pr_uint
32_max); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7.
... see bug 2
3912
3 for details.
NS_CStringSetDataRange
#include "nsstringapi.h" nsresult ns_cstringsetdatarange( nsacstring& astring, pruint
32 acutstart, pruint
32 acutlength, const char* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsacstring instance to modify.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
... example // replace all occurances of |matchval| with |newval| void replacesubstring(nsacstring& str, const nsacstring& matchval, const nsacstring& newval) { const char* sp, *mp, *np; pruint
32 sl, ml, nl; sl = ns_cstringgetdata(str, &sp); ml = ns_cstringgetdata(matchval, &mp); nl = ns_cstringgetdata(newval, &np); for (const char* iter = sp; iter <= sp + sl - ml; ++iter) { if (memcmp(iter, mp, ml) == 0) { pruint
32 offset = iter - sp; ns_cstringsetdatarange(str, offset, ml, np, nl); sl = ns_cstringgetdata(str, &sp); iter = sp + offset + nl ...
...see bug 2
3912
3 for details.
NS_StringCutData
#include "nsstringapi.h" nsresult ns_stringcutdata( nsastring& astring, pruint
32 acutstart, pruint
32 acutlength ); parameters astring [in] a nsastring instance to be modified.
...pass pr_uint
32_max to specify the length from acutstart to the end of the string.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello world"); // remove " world" portion of string ns_stringcutdata(str, 5, pr_uint
32_max); const prunichar* data; ns_stringgetdata(str, &data); // data now ponts to the string: l"hello" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7.
... see bug 2
3912
3 for details.
NS_StringSetDataRange
#include "nsstringapi.h" nsresult ns_stringsetdatarange( nsastring& astring, pruint
32 acutstart, pruint
32 acutlength, const prunichar* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsastring instance to modify.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
... example code // replace all occurances of |matchval| with |newval| void replacesubstring(nsastring& str, const nsastring& matchval, const nsastring& newval) { const prunichar* sp, *mp, *np; pruint
32 sl, ml, nl; sl = ns_stringgetdata(str, &sp); ml = ns_stringgetdata(matchval, &mp); nl = ns_stringgetdata(newval, &np); for (const prunichar* iter = sp; iter <= sp + sl - ml; ++iter) { if (memcmp(iter, mp, ml) == 0) { pruint
32 offset = iter - sp; ns_stringsetdatarange(str, offset, ml, np, nl); sl = ns_stringgetdata(str, &sp); it...
...see bug 2
3912
3 for details.
Getting Started Guide
comparison
3.
... assigning into another |nscomptr| nscomptr<nsifoo> foo2 = foo; //
3.
...setfoo, from case
3, would have to be written two different ways when given an nscomptr, it would know the value was already addrefed, and when given a raw pointer it would assume the value was not addrefed.
... nsifoo* myfoo1 = createfoo(); // doesn't dangle nscomptr<nsifoo> myfoo2( createfoo() ); // doesn't leak nscomptr<nsifoo> myfoo
3( dont_addref(createfoo()) ); // redundant, but legal and correct compare this to the most frequent leaks caused by returning a raw pointer you have already addrefed: // don't return raw pointers; that incites leaks...
Address book sync client design
// // step
3: // get the response back from the server.
...this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d
3-8f97-00007
3757
374)] interface nsiabsyncdriver : nsiabsynclistener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
...this method is * called only once, at the beginning of a sync transaction * */ void onstartoperation(in print
32 atransactionid, in pruint
32 amsgsize); /** * notify the observer that progress as occurred for the ab sync operation */ void onprogress(in print
32 atransactionid, in pruint
32 aprogress, in pruint
32 aprogressmax); /** * notify the observer with a status message for sync operation */ void onstatus(in print
32 atransactionid, in wstring amsg); /** ...
... */ void onstopoperation(in print
32 atransactionid, in nsresult astatus, in wstring amsg); }; ...
nsIMsgCloudFileProvider
uploaderr 0x8055
311a returned when uploading has failed for an unknown reason.
... uploadwouldexceedquota 0x8055
311b returned when uploading has failed because the user has exceeded their storage quota.
... uploadexceedsfilelimit 0x8055
311c returned when uploading has failed because the file being uploaded is larger than the file size limit.
... uploadcanceled 0x8055
311d returned when uploading has stopped because it was cancelled by the user.
MailNews fakeserver
alternatively, one can wait for the timeout, which occurs after
3 minutes, so not closing connections would make the tests take unbearably long.
...to enable/disable debugging, call setdebuglevel on your nsmailserver instance with one of the following options: const fsdebugnone = 0; // dump nothing const fsdebugrecv = 1; // dump just the received commands const fsdebugrecvsend = 2; // dump received + sent commands, no data const fsdebugall =
3; // dump everything debugging is set to "none" by default.
... specific fakeserver guidelines pop imap smtp nntp nntpd.js defines a few different classes of nntp servers: compliance for rfc 977, rfc 2980, and rfc
3977, as well as a giganews and an inn server.
... (full 2980 and
3977 compliance as well as inn is not yet written).
Thunderbird Binaries
you should see a string that looks something like this: comm-central-1.9.2 branch: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9.2.2pre) gecko/20100
308 lanikai/
3.1b1pre comm-central-trunk: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9.
3a1pre) gecko/20090826 shredder/
3.1a1pre the part that you want to note is the gecko revision number (rv) and the thunderbird version string.
... rv:1.9.1.x and thunderbird (or shredder)
3.0.x = gecko 1.9.1 (thunderbird
3.0) branch.
... rv:1.9.2.x and thunderbird (or lanikai)
3.1.x = gecko 1.9.2 (thunderbird
3.1) branch.
... rv:2.0.0.x and thunderbird (or shredder/miramar)
3.
3a1pre and on = gecko 2.0.0 (towards thunderbird
3.
3) ...
Drawing and Event Handling - Plugins
note: windowless plug-ins were not supported on the x window system platform prior to gecko 1.9 alpha 7 (bug 1
37189).
... //the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ uint
32 x; /* position of top-left corner */ uint
32 y; /* relative to a netscape page */ uint
32 width; /* maximum window size */ uint
32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable...
...for example, a
3d application could use the contents of a plug-in as a texture map.
... this code shows the specific data passed through this method for each platform: #ifdef xp_mac typedef eventrecord npevent; #elif defined(xp_win) typedef struct _npevent { int16 event; int16 wparam; int
32 lparam; } npevent; #elif defined(xp_unix) typedef xevent npevent; #else typedef void npevent; #endif /* xp_mac */ int16 npp_handleevent(npp instance, npevent* event); on mac os, when npp_handleevent is called, the current port is set up correctly so that its origin matches the upper-left corner of the plug-in.
Streams - Plugins
int
32 npp_writeready(npp instance, npstream *stream); the instance parameter is the current plug-in instance; the stream parameter specifies the current stream.
... int
32 npp_write(npp instance, npstream *stream, int
32 offset, int
32 len, void *buf); the instance parameter is the current plug-in instance; the stream parameter specifies the current stream.
... int
32 npn_write(npp instance, npstream *stream, int
32 len, void *buf); the plug-in should terminate the stream by calling npn_destroystream, when all data has been written to the stream, or in the event of an error.
... npstream* stream; char* mydata = "<html><head><title>this is a message from my plug-in!</title></head><body><p><strong>this is a message from my plug-in!</strong></p></body>/html>"; int
32 mylength = strlen(mydata) + 1; /* create the stream.
Call Tree - Firefox Developer Tools
we have about six times as many samples in bubble sort as in selection sort, and 1
3 times as many as in quicksort.
...let's expand the entry for swap(): there were 25
3 samples taken inside swap().
...we can also see that 252 of the 25
3 samples in swap() were taken in the bubblesort() branch, and only one in the selectionsort() branch.
... with this kind of digging, we can figure out the whole call graph, with associated sample count: sortall() // 8 -> sort() //
37 -> bubblesort() // 1
345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 10
3 -> partition() // 12 platform data you'll also see some rows labeled gecko, input & events, and so on.
Style Editor - Firefox Developer Tools
this means that if you use, for example, sass, then the style editor will show you, and allow you to edit, sass files, rather than the css that is generated from them: for this to work, you must: use a css preprocessor that understands the source map revision
3 proposal.
... currently this means sass
3.
3.0 or above or the 1.5.0 version of less.
... from firefox
35 onwards original sources are displayed by default.
... from firefox
33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config.
AnalyserNode.getFloatFrequencyData() - Web APIs
the getfloatfrequencydata() method of the analysernode interface copies the current frequency data into a float
32array array passed into it.
... syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float
32array(analyser.frequencybincount); // float
32array should be the same length as the frequencybincount void analyser.getfloatfrequencydata(dataarray); // fill the float
32array with data returned from getfloatfrequencydata() parameters array the float
32array that the frequency domain data will be copied to.
... example const audioctx = new audiocontext(); const analyser = audioctx.createanalyser(); // float
32array should be the same length as the frequencybincount const mydataarray = new float
32array(analyser.frequencybincount); // fill the float
32array with data returned from getfloatfrequencydata() analyser.getfloatfrequencydata(mydataarray); drawing a spectrum the following example shows basic usage of an audiocontext to connect a mediaelementaudiosourcenode to an analysernode.
...microphone input const audioele = new audio(); audioele.src = 'my-audio.mp
3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float
32array(bufferlength); //set up audio node network audiosourcenode.conn...
AnalyserNode.getFloatTimeDomainData() - Web APIs
the getfloattimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a float
32array array passed into it.
... syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float
32array(analyser.fftsize); // float
32array needs to be the same length as the fftsize analyser.getfloattimedomaindata(dataarray); // fill the float
32array with data returned from getfloattimedomaindata() parameters array the float
32array that the time domain data will be copied to.
... analyser.fftsize = 1024; var bufferlength = analyser.fftsize; console.log(bufferlength); var dataarray = new float
32array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getfloattimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / bufferle...
...ngth; var x = 0; for(var i = 0; i < bufferlength; i++) { var v = dataarray[i] * 200.0; var y = height/2 + v; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); parameters array the float
32array that the time domain data will be copied to.
AnalyserNode - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#...
...fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,
30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
341" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates...
... analysernode.getfloatfrequencydata() copies the current frequency data into a float
32array array passed into it.
... analysernode.getfloattimedomaindata() copies the current waveform, or time-domain, data into a float
32array array passed into it.
Attr - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0...
... note: dom level
3 defined namespaceuri, localname and prefix on the node interface.
... document object model (dom) level
3 core specificationthe definition of 'attr' in that specification.
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,
30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y...
...="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 5
31,20 5
31,
30 521,25" stroke="#d4dde4" fill="none"/><line x1="5
31" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095d...
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate *
3, audioctx.samplerate); // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < myarraybuffer.length; i++) { // math.random() is in [0; 1.0] // ...
AudioListener.positionX - Web APIs
the positionx read-only property of the audiolistener interface is an audioparam representing the x position of the listener in
3d cartesian space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.positionY - Web APIs
the positiony read-only property of the audiolistener interface is an audioparam representing the y position of the listener in
3d cartesian space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.positionZ - Web APIs
the positionz read-only property of the audiolistener interface is an audioparam representing the z position of the listener in
3d cartesian space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
BaseAudioContext.createPanner() - Web APIs
the createpanner() method of the baseaudiocontext interface is used to create a new pannernode, which is used to spatialize an incoming audio stream in
3d space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
BaseAudioContext.createScriptProcessor() - Web APIs
if specified, the buffersize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16
384.
...values of up to
32 are supported.
...values of up to
32 are supported.
... important: webkit currently (version
31) requires that a valid buffersize be passed when calling this method.
BaseAudioContext - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
... baseaudiocontext.listener read only returns the audiolistener object, used for
3d spatialization.
... baseaudiocontext.createpanner() creates a pannernode, which is used to spatialise an incoming audio stream in
3d space.
BiquadFilterNode.getFrequencyResponse() - Web APIs
syntax biquadfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float
32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseoutput a float
32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray.
... phaseresponseoutput a float
32array to receive the computed phase response values in radians for each frequency value in the input frequencyarray.
...we first create the float
32arrays we need, one containing the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float
32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] =
3000; myfrequencyarray[
3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float
32array(5); var phaseresponseoutput = new float
32array(5); next we ...
CSSRule - Web APIs
the relationships between these constants and the interfaces are: type value rule-specific interface comments and examples cssrule.style_rule 1 cssstylerule the most common kind of rule: selector { prop1: val1; prop2: val2; } cssrule.import_rule
3 cssimportrule an @import rule.
...ule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 1
3 cssdocumentrule cssrule.font_feature_values_rule 14 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-da...
... css counter styles level
3the definition of 'cssrule' in that specification.
... css conditional rules module level
3the definition of 'cssrule' in that specification.
Basic usage of canvas - Web APIs
when no width and height attributes are specified, the canvas will initially be
300 pixels wide and 150 pixels high.
...this can look something like this: <canvas id="stockgraph" width="150" height="150"> current stock price: $
3.15 + 0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.
...other contexts may provide different types of rendering; for example, webgl uses a
3d context based on opengl es.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 50, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(
30,
30, 50, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> this example looks like this: screenshotlive sample « previousnext » ...
Comment - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1
30" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
331" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="
396,25 406,20 406,
30
396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="4
36" y2="25" st...
...roke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="4
36" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="47
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
... document object model (dom) level
3 core specificationthe definition of 'comment' in that specification.
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: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function...
... this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitgetasentrychrome full support 1
3edge full support 14firefox full support 50ie no support noopera no support nosafari full support 11.1webview android no support n...
...ochrome android full support yesfirefox android full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yeslegend full support full support no support no support ...
Document.getElementsByTagNameNS() - Web APIs
note: while the w
3c specification says elements is a nodelist, this method returns a htmlcollection both in gecko and internet explorer.
... note: currently parameters in this method are case-sensitive, but they were case-insensitive in firefox
3.5 and before.
... <html xmlns="http://www.w
3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w
3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " <p> elements in this document"); } function div1paraelems() { var div1 = document.getelementbyid("div1") ...
... var div1paras = div1.getelementsbytagnamens("http://www.w
3.org/1999/xhtml", "p"); var num = div1paras.length; alert("there are " + num + " <p> elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyid("div2") var div2paras = div2.getelementsbytagnamens("http://www.w
3.org/1999/xhtml", "p"); var num = div2paras.length; alert("there are " + num + " <p> elements in div2 element"); } </script> </head> <body style="border: solid green
3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue
3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red
3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div...
DynamicsCompressorNode() - Web APIs
its default value is 0.00
3.
...its default value is
30.
...fari on iossamsung internetdynamicscompressornode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie no support noopera full support 42safari ?
... full support 55notes notes before version 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 5
3opera android full support 42safari ios ?
EXT_float_blend - Web APIs
the webgl api's ext_float_blend extension allows blending and draw buffers with
32-bit floating-point components.
...however, to use it, you need to enable the use of
32-bit floating-point draw buffers by enabling the extension webgl_color_buffer_float (for webgl1) or ext_color_buffer_float (for webgl2).
... with this extension enabled, calling drawarrays() or drawelements() with blending enabled and a draw buffer with
32-bit floating-point components will no longer result in an invalid_operation error.
... examples const gl = canvas.getcontext('webgl2'); // enable necessary extensions gl.getextension('ext_color_buffer_float'); gl.getextension('ext_float_blend'); const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); // use floating point format gl.teximage2d(gl.texture_2d, 0, gl.rgba
32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, tex, 0); // enable blending gl.enable(gl.blend); gl.drawarrays(gl.points, 0, 1); // won't throw gl.invalid_operation with the extension enabled specifications specification status ex...
Event.eventPhase - Web APIs
event.bubbling_phase
3 the event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing window.
... for more details, see section
3.1, event dispatch and dom event flow, of the dom level
3 events specification.
... example html <h4>event propagation chain</h4> <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="d
3">d
3 <div id="d4">d4</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...
..."target" : e.eventphase ==
3 ?
ExtendableEvent - Web APIs
note: the behaviour described in the above paragraph was fixed in firefox 4
3 (see bug 1180274.) this interface inherits from the event interface.
...ock; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fi...
...ll="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1
302286216006/config/customlogo.gif' ]; console.log('handling install event.
FileSystem - Web APIs
no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤
37alternate name full support ≤
37alternate name alternate name uses the non-standard name: domfilesystemchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: domfilesystemfirefox android ...
... full support 50opera android full support 14prefixed full support 14prefixed 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 vendor prefix: webkitnamechrome full support 7edge full support ≤18firefox full support 50ie no support ...
... noopera full support 15safari full support 11.1webview android full support ≤
37chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.
3samsung internet android full support 1.0rootchrome full support 7edge full support ≤18firefox full support ...
... 50ie no support noopera full support 15safari full support 11.1webview android full support ≤
37chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.
3samsung internet android full support 1.0legend full support full support ...
FileSystemDirectoryReader - Web APIs
specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w
3c or whatwg specification.
... no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ≤
37alternate name full support ≤
37alternate name alternate name uses the non-standard name: directoryreaderchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryreaderfirefox android ...
... full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitreadentries deprecatednon-standardchrome full support 8edge ?
... safari full support 11.1webview android full support ≤
37chrome android full support 18firefox android full support yesopera android no support nosafari ios full support 11.
3samsung internet android ?
FileSystemFileEntry - Web APIs
9prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤
37alternate name full support ≤
37alternate name alternate name uses the non-standard name: fileentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: fileentryfirefox android ful...
...l support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err e...
...rror.ie no support noopera no support nosafari no support nowebview android full support ≤
37chrome android full support 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support ...
... full support 79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤
37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yeslegend ...
FontFaceSetLoadEvent.fontfaces - Web APIs
specifications specification status comment css font loading module level
3the definition of 'fontfaces' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfaces experimentalchrome full support
35edge full support ≤79firefox full support yesie ?
... webview android no support nochrome android full support
35firefox android full support yesopera android full support 22safari ios ?
... samsung internet android full support
3.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
HTMLAreaElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="
331,89
321,84
321,94
331,89" stroke="#d4dde4" fill="none"/><line x1="
321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="1
31" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an aud...
HTMLBRElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="
361" y="65" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="
351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="
361" y="65" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="
311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="co...
...nsolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.sizes - Web APIs
award-winning stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg
3724w, /files/16869/new-york-skyline-4by
3.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.
...: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.
3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsizes experimentalchrome full support 45edge full support 1
3firefox full support
38 full support
38 no support
33 — 52disabled disabled from version
33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true).
... no support noopera full support yessafari no support nowebview android full support 45chrome android full support 45firefox android full support
38 full support
38 no support
33 — 52disabled disabled from version
33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true).
HTMLImageElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.webkitEntries - Web APIs
the read-only webkitentries property of the htmlinputelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <input> element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug 1
3260
31).
... this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitentries non-standardchrome full support 1
3edge full support ≤18firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ...
... ≤
37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.
3samsung internet android full support yeslegend full support full support no support no supportnon-standard.
HTMLInputElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="
361" y="65" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
HTMLMapElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="
351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" 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.onwaitingforkey - Web APIs
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLMenuElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="
351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
HTMLOptGroupElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="
311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="co...
...nsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="
351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSelectElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node.
HTMLShadowElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="
321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="2
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
376" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="...
...consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="2
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
376" y="94" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="
301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="
341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
HTMLUListElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="
331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,
30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="
311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="co...
...nsolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
IDBCursorWithValue - Web APIs
n: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,
30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="1
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="1
31" y="1" width="180" height="50" f...
...ill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
... full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitvaluechrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // request version
3 of the database.
... var request = window.indexeddb.open("library",
3); // this event handles the event whereby a new version of the // database needs to be created.
... var bookstore = request.transaction.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion <
3) { // version
3 introduces a new object store for magazines with two indexes.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneededchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
Transcoding assets for Media Source Extensions - Web APIs
big buck bunny is licensed under the creative commons attribution
3.0 license.
... to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp
3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
... run the following commands (shown with sample output): $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4 encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0 media source: video: resolution=640x
360 encoding bitrate: 500, resolution: 256x144 encoding bitrate: 875, resolution:
384x216 encoding bitrate: 1250, resolution: 480x270 encoding bitrate: 1625, resolution: 560x
316 encoding bitrate: 2000, resolution: 640x
360 $ python mp4-dash.py video_0* parsing media file 1: video_00500.mp4 parsing media file 2: video_00875.mp4 parsing media file
3: video_01250.mp4 parsing media file 4: video_01625.
...file (audio) video_00500.mp4 splitting media file (video) video_00500.mp4 splitting media file (video) video_00875.mp4 splitting media file (video) video_01250.mp4 splitting media file (video) video_01625.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├──
3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages.
Metadata - Web APIs
specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmetadata experimentalnon-standardchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie ...
... nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitmodificationtime experimentalnon-standardchrome full support 1
3edge full support ≤79firefox no support noie no support noopera no support nosafari no support nowebview android no support noch...
... yesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yessize experimentalnon-standardchrome full support 1
3edge full support ≤79firefox no support noie no support noopera no support nosafari no support nowebview android no support noch...
Web-based protocol handlers - Web APIs
example <!doctype html public "-//w
3c//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...
... example <!doctype html public "-//w
3c//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 "-//w
3c//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.
... the data sent:</p> <textarea> <?php echo(htmlspecialchars($value, ent_quotes, 'utf-8')); ?> </textarea> </body> </html> references http://www.w
3.org/tr/2011/wd-html5-20110525/timers.html#custom-handlers see also window.navigator.registercontenthandler nsiprotocolhandler (xul only) registerprotocolhandler enhancing the federated web at mozilla webdev register a custom protocolhandler at google developers.
PannerNode.panningModel - Web APIs
the panningmodel property of the pannernode interface is an enumerated value determining which spatialisation algorithm to use to position the audio in
3d space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
PannerNode.positionX - Web APIs
the positionx property of the pannernode interface specifies the x coordinate of the audio source's position in
3d cartesian coordinates, corresponding to the horizontal axis (left-right).
... syntax var positionx = pannernode.positionx; pannernode.positionx.value = newpositionx; value an audioparam whose value is the x coordinate of the audio source's position, in
3d cartesian coordinates.
... example the following example starts an oscillator, and pans it to the left after 1 second, to the right after 2 seconds, and back to the center after
3 seconds.
... const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.positionx.setvalueattime(-1, context.currenttime + 1); panner.positionx.setvalueattime(1, context.currenttime + 2); panner.positionx.setvalueattime(0, context.currenttime +
3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positionx' in that specification.
PannerNode.positionY - Web APIs
the positiony property of the pannernode interface specifies the y coordinate of the audio source's position in
3d cartesian coordinates, corresponding to the vertical axis (top-bottom).
... syntax var positiony = pannernode.positiony; pannernode.positiony.value = newpositiony; value an audioparam whose value is the y coordinate of the audio source's position, in
3d cartesian coordinates.
... example the following example starts an oscillator and pans it above the listener after 1 second, below the listener after 2 seconds, and back to the center after
3 seconds.
... const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positiony.setvalueattime(1, context.currenttime + 1); panner.positiony.setvalueattime(-1, context.currenttime + 2); panner.positiony.setvalueattime(0, context.currenttime +
3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positiony' in that specification.
PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in
3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener).
... syntax var positionz = pannernode.positionz; pannernode.positionz.value = newpositionz; value an audioparam whose value is the z coordinate of the audio source's position, in
3d cartesian coordinates.
... example the following example starts an oscillator and moves it in front of the listener after 1 second, behind the listener after 2 seconds, and back to the listener's position after
3 seconds.
... const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positionz.setvalueattime(1, context.currenttime + 1); panner.positionz.setvalueattime(-1, context.currenttime + 2); panner.positionz.setvalueattime(0, context.currenttime +
3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positionz' in that specification.
PannerNode - Web APIs
pannernode.panningmodel an enumerated value determining which spatialisation algorithm to use to position the audio in
3d space.
...generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
Using the Payment Request API - Web APIs
r simply return the required object parameters: function buildsupportedpaymentmethoddata() { // example supported payment methods: return [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supportedtypes: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-12
3', displayitems: [ { label: 'example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the paymentrequest.show() method on it to initiate the payment request.
... in the following snippet we do just this — depending on whether the user can make a fast payment or needs to add payment credentials first, the title of the checkout button changes between "fast checkout with w
3c" and "setup w
3c checkout".
... const checkoutbutton = document.getelementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w
3c"; } else { checkoutbutton.innertext = "setup w
3c checkout"; } }).catch(function(error) { // the user may have turned off the querying functionality in their // privacy settings.
... checkoutbutton.innertext = "checkout with w
3c"; }); } note: see our customizing the payment button demo for the full code.
PerformanceLongTaskTiming - Web APIs
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="25...
...0" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
326" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
...or androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full support 58edge full support ≤79firefox no support nonotes no support nonotes notes see bug 1
348405.ie ?
... webview android full support 58chrome android full support 58firefox android no support nonotes no support nonotes notes see bug 1
348405.opera android full support yessafari ios ?
Pointer Lock API - Web APIs
it is ideal for first person
3d games, for example.
...for example, your users can continue to rotate or manipulate a
3d model by moving the mouse without end.
...(from https://w
3c.github.io/pointerlock/#extensions-to-the-element-interface) pointerlockelement and exitpointerlock() the pointer lock api also extends the document interface, adding both a new property and a new method.
...n: " + y; if (!animation) { animation = requestanimationframe(function() { animation = null; canvasdraw(); }); } } the canvasdraw() function draws the ball in the current x and y positions: function canvasdraw() { ctx.fillstyle = "black"; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = "#f00"; ctx.beginpath(); ctx.arc(x, y, radius, 0, degtorad(
360), true); ctx.fill(); } iframe limitations pointer lock can only lock one iframe at a time.
RTCDataChannel: bufferedamountlow event - Web APIs
bubbles no cancelable no interface event event handler property onbufferedamountlow examples this example sets up a handler for bufferedamountlow to request more data any time the data channel's buffer falls below the number of bytes specified by bufferedamountlowthreshold, which we have set to 655
36.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 655
36; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(655
36)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... then a listener is created for bufferedamountlow to refill the incoming data buffer any time its contents fall below 655
36 bytes.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(655
36)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="...
...291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_to...
...p"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="2
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="1
36" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" targe...
...t="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" ali...
...gnment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y=...
..."
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stro...
...ke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,...
...
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...="/docs/web/api/svgclippathelement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 ...
...111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgcursorelement" target="_top"><rect x="
321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y=...
..."65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="
341" y="65"...
... width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="n...
...one"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-b...
...aseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransf...
...erelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelem...
...ent" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" targ...
...et="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="
31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="1
31" y="65" width="
350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="1
31,89 121,84 121,94 1
31,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="1
31" y="65" width="
350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="1
31,89 121,84 121,94 1
31,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="1
31" y="65" width="
350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="1
31,89 121,84 121,94 1
31,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
..."_top"><rect x="1
31" y="65" width="
350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="1
31,89 121,84 121,94 1
31,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:h...
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="
31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="
31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x=...
..."
301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="non...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-bas...
...eline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightinge...
...lement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"...
...><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="
321" ...
...y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_t...
...op"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 ...
...111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgfilterelement" target="_top"><rect x="
321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 12...
...1,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a ...
...xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="
31" y="65" width="2
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgf...
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><...
...polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" w...
...idth="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline...
...="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size=...
..."12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><...
...line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3...
SVGGraphicsElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" ...
...y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="
331" y="...
...65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,...
...25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...web/api/svgmaskelement" target="_top"><rect x="
341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x=...
..."
301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
methods none 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_re...
...l = 1
3 pathseg_lineto_vertical_abs = 14 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_moveto_rel
3 corresponds to a "relative moveto" (m) path data command.
... pathseg_lineto_horizontal_rel 1
3 corresponds to a "relative horizontal lineto" (h) path data command.
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="
31...
...1" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...op"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover...
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="
3...
...21" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
..."151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="...
...65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="
341" y="65"...
... width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none...
..."/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-base...
...line="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target...
...="_top"><rect x="
331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301...
..." y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="
321" ...
...y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ock; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consola...
...s,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some other value.
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
... x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="
331" y="...
...65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><li...
...ne x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="...
...middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,
30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_...
...top"><rect x="
301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="
301,89 291,84 291,94
301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="1
31" y="65" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095d...
Storage Access API - Web APIs
access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party context recently (in firefox, "recently" is "within
30 days").
...design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from tracker.example again in less than
30 days, the embedded origin will have storage access immediately when loading.
... in firefox, the storage access grants are phased out after
30 calendar days passing, whereas in safari the storage access grants are phased out after
30 days of browser usage passed without user interaction.
...you can currently find specification details of the api at apple's introducing storage access api blog post, and whatwg html issue
3338 — proposal: storage access api.
SubtleCrypto.sign() - Web APIs
rsassa-pkcs1-v1_5 the rsassa-pkcs1-v1_5 algorithm is specified in rfc
3447.
... rsa-pss the rsa-pss algorithm is specified in rfc
3447.
...*/ function getmessageencoding() { const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "rsa-pss", saltlength:
32, }, privatekey, encoded ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ 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-
384"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key.
Text - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1
30" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
331" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="
396,25 406,20 406,
30
396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="4
36" y2="25" st...
...roke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="4
36" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="47
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
... document object model (dom) level
3 core specificationthe definition of 'text' in that specification.
WEBGL_compressed_texture_astc - Web APIs
constants blocks bits per pixel arraybuffer bytelength bytes if height and width are 512 ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr 4x4 8.00 floor((width +
3) / 4) * floor((height +
3) / 4) * 16 262144 ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr 5x4 6.40 floor((width + 4) / 5) * floor((height +
3) / 4) * 16 210944 ext.compressed_rgba_astc_5x5_khr ext.compressed_srgb8_alpha8_astc_5x5_khr 5x5 5.12 floor((width + 4) / 5) * floor((height + 4) / 5) * 16 169744 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 141728 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 118
336 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 105472 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 88064 ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor...
...((height + 7) / 8) * 16 655
36 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.1
3 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 5
3248 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 4
3264 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_al...
...pha8_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 29584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
syntax void gl.vertexattribi4i(index, v0, v1, v2, v
3); void gl.vertexattribi4ui(index, v0, v1, v2, v
3); void gl.vertexattribi4iv(index, value); void gl.vertexattribi4uiv(index, value); parameters index a gluint specifying the position of the vertex attribute to be modified.
... v0, v1, v2, v
3 an integer number for the vertex attribute value.
... value a uint
32array/int
32array or sequences of gluint/ glint for integer vector vertex attribute values.
... opengl es
3.0the definition of 'glvertexattribi' in that specification.
WebGLRenderingContext.bindTexture() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.texture_
3d: a three-dimensional texture.
... exceptions a gl.invalid_enum error is thrown if target is not gl.texture_2d, gl.texture_cube_map, gl.texture_
3d, or gl.texture_2d_array.
... adds: gl.texture_
3d and gl.texture_2d_array opengl es
3.0the definition of 'glbindtexture' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment
3 gl.color_attachment4 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_attachment1
3 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachmen...
...t0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl renderbuffertarget a glenum specifying the binding point (target) for the render buffer.
... opengl es
3.0the definition of 'glframebufferrenderbuffer' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment
3 gl.color_attachment4 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_attachment1
3 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachmen...
...t0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: gl.depth_stencil_attachment: depth and stencil buffer data storage.
... opengl es
3.0the definition of 'glframebuffertexture2d' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGLRenderingContext.generateMipmap() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.texture_
3d: a three-dimensional texture.
... opengl es
3.0the definition of 'glgeneratemipmap' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
... adds: gl.texture_
3d and gl.texture_2d_array ...
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment
3 gl.color_attachment4 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_attachment1
3 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachmen...
...t0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl pname a glenum specifying information to query.
... opengl es
3.0the definition of 'glgetframebufferattachmentparameteriv' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGLRenderingContext.getUniform() - Web APIs
return value the returned type depends on the uniform type: uniform type returned type webgl 1 only boolean glboolean int glint float glfloat vec2 float
32array (with 2 elements) ivec2 int
32array (with 2 elements) bvec2 array of glboolean (with 2 elements) vec
3 float
32array (with
3 elements) ivec
3 int
32array (with
3 elements) bvec
3 array of glboolean (with
3 elements) vec4 float
32array (with 4 elements) ivec4 int
32array (with 4 elements) bvec4 array of g...
...lboolean (with 4 elements) mat2 float
32array (with 4 elements) mat
3 float
32array (with 9 elements) mat4 float
32array (with 16 elements) sampler2d glint samplercube glint additionally available in webgl 2 uint gluint uvec2 uint
32array (with 2 elements) uvec
3 uint
32array (with
3 elements) uvec4 uint
32array (with 4 elements) mat2x
3 float
32array (with 6 elements) mat2x4 float
32array (with 8 elements) mat
3x2 float
32array (with 6 elements) mat
3x4 float
32array (with 12 elements) mat4x2 float
32array (with 8 elements) mat4x
3 float
32array (with 12 elements) any sampler type glint examples var lo...
... opengl es
3.0the definition of 'glgetuniform' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGLRenderingContext.texSubImage2D() - Web APIs
s_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_24_8 gl.float_
32_unsigned_int_24_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 float
32array must be used if type is gl.float.
... opengl es
3.0the definition of 'gltexsubimage2d' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and
3d rendering in an html canvas in browsers that support it without the use of plug-ins.
...it's assumed that you already have an understanding of the mathematics involved in
3d graphics, and this article doesn't pretend to try to teach you
3d graphics concepts itself.
... it's worth noting here that this series of articles introduces webgl itself; however, there are a number of frameworks available that encapsulate webgl's capabilities, making it easier to build
3d applications and games, such as three.js and babylon.js.
... preparing to render in
3d the first thing you need in order to use webgl for rendering is a canvas.
WebGL types - Web APIs
glint long
32-bit twos complement signed integer.
... gluint unsigned long
32-bit twos complement unsigned integer.
... glfloat unrestricted float
32-bit ieee floating point number.
... glclampf unrestricted float clamped
32-bit ieee floating point number.
Background audio processing using AudioWorklet - Web APIs
fundamentally, the audio for a single audio channel (such as the left speaker or the subwoofer, for example) is represented as a float
32array whose values are the individual audio samples.
...that is, an array of float
32array objects.
... then, there can be multiple inputs, so the inputlist is an array of arrays of float
32array objects.
...ount = firstinput.length; const firstinputfirstchannel = firstinput[0]; // (or inputlist[0][0]) const firstchannelbytecount = firstinputfirstchannel.length; const firstbyteoffirstchannel = firstinputfirstchannel[0]; // (or inputlist[0][0][0]) the output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is an array of float
32array objects, which contain the samples for that channel.
Using IIR filters - Web APIs
it includes some different coefficient values for different lowpass frequencies — you can change the value of the filternumber constant to a value between 0 and
3 to check out the different available effects.
...something like this is acceptable: let feedforward = [0.00020298, 0.0004059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964558, -1.9991880801, 0.987
30
35442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
...all three of these have to be of type float
32array and all be of the same size.
... // arrays for our frequency response const totalarrayitems =
30; let myfrequencyarray = new float
32array(totalarrayitems); let magresponseoutput = new float
32array(totalarrayitems); let phaseresponseoutput = new float
32array(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
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="2
31" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="
331,25
341,20
341,
30
331,25" stroke="#d4dde4" fill="none"/><line x1="
341" y1="25" x2="
371" y2="25" stro...
...ke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="
371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
... working draft document object model (dom) level
3 events specificationthe definition of 'wheelevent' in that specification.
Synchronous and asynchronous requests - Web APIs
line
3 creates an event handler function object and assigns it to the request's onload attribute.
...this is done by setting 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.o...
... synchronous request note: starting with gecko
30.0 (firefox
30.0 / thunderbird
30.0 / seamonkey 2.27), blink
39.0, and edge 1
3, synchronous requests on the main thread have been deprecated due to their negative impact on the user experience.
... var request = new xmlhttprequest(); request.open('get', '/bar/foo.txt', false); // `false` makes the request synchronous request.send(null); if (request.status === 200) { console.log(request.responsetext); } line
3 sends the request.
XRRigidTransform.matrix - Web APIs
the returned matrix can then be premultiplied with a column vector to rotate the vector by the
3d rotation specified by the orientation, then translate it by the position.
... syntax let matrix = xrrigidtransform.matrix; value a float
32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties.
... usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float
32arrays.
...thus, for an array [a0, a1, a2, ..., a1
3, a14, a15], the matrix looks like this: [a[0]a[4]a[8]a[12]a[1]a[5]a[9]a[1
3]a[2]a[6]a[10]a[14]a[
3]a[7]a[11]a[15]]\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[1
3]\\ a[2] & a[6] & a[10] & a[14]\\ a[
3] & a[7] & a[11] & a[15]\\ \end{bmatrix} the first time matrix is requested, it gets computed; after that, it's should be cached to avoid slowing down to compute it every time you need it.
Generating HTML - Web APIs
figure
3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w
3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ...
... <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #6
39ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> </br> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-templates select="//myns:body"/> ...
... figure 5 : final
3 templates xsl stylesheet(example2.xsl): ...
... the final xslt stylesheet looks as follows: figure 6 : final xslt stylesheetview example | view source xsl stylesheet: <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w
3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #6
39a...
XSL Transformations in Mozilla FAQ - Web APIs
the xslt namespace is http://www.w
3.org/1999/xsl/transform.
...see the discussion on bug #
338621 for more information.
... <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=
3"> <!-- msxml
3 specific markup --> </xsl:if> what about media="print"?
... ie up to version 6 required a deprecated namespace of a xslt working draft, please update to mozilla ;-), ie6+ or msxml
3+, as it is fixed there.
Using the alert role - Accessibility
<h2 role="alert">your form could not be submitted because of
3 validation errors.</h2> example 2: dynamically adding an element with the alert role this snippet dynamically creates an element with an alert role and adds it to the document structure.
... let myalerttext = document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext); document.body.appendchild(myalert); note: the same result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(document.body); example
3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element.
...the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least
3 options</p> // when the user tries to submit the form with less than
3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
... aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices - alert role: http://www.w
3.org/tr/wai-aria-practices/#alert ...
ARIA: tab role - Accessibility
<div class="tabs"> <div role="tablist" aria-label="sample tabs"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> first tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> second tab </button> <button role="tab" aria-selected="false" aria-controls="panel-
3" id="tab-
3" tabindex="-1"> third tab </button> </div> <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-
3" role="tabpanel" tabindex="0" aria-labelledby="tab-
3" ...
...hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index:
3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpane...
...if the event's keycode is
39 for right arrow or
37 for the left arrow, we react to the event.
...t tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right if (e.keycode ===
39 || e.keycode ===
37) { tabs[tabfocus].setattribute("tabindex", -1); if (e.keycode ===
39) { tabfocus++; // if we're at the end, go to the start if (tabfocus >= tabs.length) { tabfocus = 0; } // move left } else if (e.keycode ===
37) { tabfocus--; // if we're at the start, move to the end if (tabfocus < 0)...
Basic form hints - Accessibility
<form> <ul> <li> <input id="wine-1" type="checkbox" value="riesling"/> <label for="wine-1">berg rottland riesling</label> </li> <li> <input id="wine-2" type="checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <input id="wine-
3" type="checkbox" value="pinot-grigio"/> <label for="wine-
3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript...
...wai-aria, the accessible rich internet applications specification from the w
3c's web accessibility initiative, provides the aria-labelledby attribute for these cases.
...note that on line
3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h
3> element on line 1, which is the label for the radio group.
... <h
3 id="rg1_label">lunch options</h
3> <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r
3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> describing with aria form controls sometimes have a description associated with them, in addition to the label.
-webkit-line-clamp - CSS: Cascading Style Sheets
the css overflow module level
3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.
... syntax /* keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp:
3; -webkit-line-clamp: 10; /* global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; none this value specifies that the content wonʼt be clamped.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax none | <integer> examples truncating a paragraph html <p> in this example the <code>-webkit-line-clamp</code> property is set to <code>
3</code>, which means the text is clamped after three lines.
...</p> css p { width:
300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:
3; overflow: hidden; } result specifications specification status comment css overflow module level
3the definition of '-webkit-line-clamp' in that specification.
::first-line (:first-line) - CSS: Cascading Style Sheets
/* selects the first line of a <p> */ p::first-line { color: red; } css
3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
... syntax /* css
3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph.
... css text decoration module level
3the definition of 'text-shadow with ::first-line' in that specification.
... selectors level
3the definition of '::first-line' in that specification.
@media - CSS: Cascading Style Sheets
/* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem
3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries.
... 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.
...<mf-value>where <mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio> examples testing for print and screen media types @media print { body { font-size: 10pt; } } @media screen { body { font-size: 1
3px; } } @media screen, print { body { line-height: 1.2; } } @media only screen and (min-width:
320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } } introduced in media queries level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: @media (height > 600p...
... css working group drafts github issues css conditional rules module level
3the definition of '@media' in that specification.
size - CSS: Cascading Style Sheets
(most frequently used dimensions for personal printing.) a
3 this matches the standard, iso dimensions: 297mm x 420mm.
... b4 this matches the standard, iso dimensions: 250mm x
35
3mm.
... jis-b4 this correspond to the jis standard dimensions: 257mm x
364mm.
...elative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment css paged media module level
3the definition of 'size' in that specification.
Using URL values for the cursor property - CSS: Cascading Style Sheets
support for the css
3 syntax for cursor values got added in gecko 1.8 (firefox 1.5): cursor: [ <uri> [ <x> <y> ]?
...an example of the css
3 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.
...however, you should limit yourself to the size
32×
32 for maximum compatibility with operating systems and platforms.
... (due to a bug in gecko 1.9.2-1.9.2.6, firefox
3.6-
3.6.6 on windows limits to
32×
32px.
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 #wid { column-width: 100px; } result the exact details are described in the css
3 specification.
... example
3 html <div id="col_short"> 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_12 { columns: 12 8em; } result height balancing the css
3 column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
... conclusion css
3 columns are a layout primitive that will help web developers make the best use of screen real estate.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
d-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"><img src="https://udn.realityripple.com/samples/89/f99
3f27
3dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
...olid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(
33.
333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>three</h2> <p>we can use css grid to ...
...olid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(
33.
333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(
3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; min-height: auto; margin: 0; } } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can...
... border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(
33.
333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(
3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; margin: 0; } } <div class="wrapper"> <ul> <li class="card"> <h2>one</h2> <p>we can use css grid...
Using CSS counters - CSS: Cascading Style Sheets
*/ } h
3::before { counter-increment: section; /* increment the value of section counter by 1 */ content: "section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h
3 */ } html <h
3>introduction</h
3> <h...
...
3>body</h
3> <h
3>conclusion</h
3> result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
..." "; /* combines the values of all instances of the section counter, separated by a period */ } html <ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-- 2.
3 --> <ol> <li>item</li> <!-- 2.
3.1 --> <li>item</li> <!-- 2.
3.2 --> </ol> <ol> <li>item</li> <!-- 2.
3.1 --> <li>item</li> <!-- 2.
3.2 --> <li>item</li> <!-- 2.
3.
3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!--
3 --> <li>item</li> <!--...
... 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol> result specifications specification status comment css lists module level
3the definition of 'css counters' in that specification.
Using CSS transitions - CSS: Cascading Style Sheets
n: <property> <duration> <timing-function> <delay>; } examples simple example this example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect: #delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size:
36px; } multiple animated properties example html content <body> <p>the box below combines transitions for: width, height, background-color, transform.
...for example: div { transition-property: opacity, left, top, height; transition-duration:
3s, 5s; } this is treated as if it were: div { transition-property: opacity, left, top, height; transition-duration:
3s, 5s,
3s, 5s; } similarly, if any property's value list is longer than that for transition-property, it's truncated, so if you have the following css: div { transition-property: opacity, left; transition-duration:
3s, 5s, 2s, 1s; } this gets interpreted as: div { t...
...ransition-property: opacity, left; transition-duration:
3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them.
...the relevant portions are shown here: a { color: #fff; background-color: #
333; transition: all 1s ease-out; } a:hover, a:focus { color: #
333; background-color: #fff; } this css establishes the look of the menu, with the background and text colors both changing when the element is in its :hover and :focus states.
Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: inline; background: lightgray; } p { width: 50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */ background: cyan; } example
3 in this example, the paragraph's containing block is <section> because the latter's position is absolute.
... <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 paragraph's position is fixed, so its contain...
... <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 is <section>, which is the nearest ancesto...
... <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; } ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
me [prefixed version still accepted] -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-clipobsolete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko
32 [superseded by the standard version box-decoration-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standa...
....2 p -moz-padding-end [superseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 5
3 -moz-text-decoration-colorobsolete since gecko
39 -moz-text-decoration-lineobsolete since gecko
39 -moz-text-decoration-styleobsolete since gecko
39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] ...
...bar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1
306214); use currentcolor instead.
... -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-center -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug
3314
32 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-i...
CSS Tutorials - CSS: Cascading Style Sheets
css animations css
3 animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation.
... css transitions css
3 transitions allow you to define an animation between several styles and to control the way this transition happens.
... css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or
3d spaces.
... css multi-column layouts css
3 introduces a new layout allowing you to easily define multiple columns in an element.
backface-visibility - CSS: Cascading Style Sheets
though invisible in 2d, the back face can become visible when a transformation causes the element to be rotated in
3d space.
... 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.
...ck faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-
3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.
3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform...
border-image - CSS: Cascading Style Sheets
his property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 /
35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 2
3 / 50px
30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
...the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the size of a single diamond, we will use a value of 81 divided by
3, or 27, for slicing the image into corner and edge regions.
... #bitmap { width: 200px; background-color: #ffa; border:
36px solid orange; margin:
30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */
36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border:
30px solid; b...
...order-image: repeating-linear-gradient(45deg, #f
33, #
3bf, #f
33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level
3the definition of 'border-image' in that specification.
box-sizing - CSS: Cascading Style Sheets
for example, .box {width:
350px; border: 10px solid black;} renders a box that is
370px wide.
...for example, .box {width:
350px; border: 10px solid black;} renders a box that is
350px wide, with the area for content being
330px wide.
... html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height: 80px + (2 * 20px) + (2 * 8px) = 1
36px content box width: 160px content box height: 80px */ } .border-box { box-sizing: border-box; /* total width: 160px total height: 80px content box width: 160px - (2 * 20px) - (2 * 8px) = 104px content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ } result specifications specification status comment css basic user interface mo...
...dule level
3the definition of 'box-sizing' in that specification.
calc() - CSS: Cascading Style Sheets
)where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.5rem +
3vw); } this ensures that text size will scale if the page is zoomed.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w
3c 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.
... for example: .modal { z-index: calc(
3 / 2); } this will give .modal a final z-index value of 2.
... specifications specification status comment css values and units module level
3the definition of 'calc()' in that specification.
display - CSS: Cascading Style Sheets
please note that the css display level
3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements.
... the level
3 specification details two values for the display property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.
... short note on what css display properties do to table semantics — the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 1.
3 explanations understanding success criterion 1.
3.1 | w
3c understanding wcag 2.0 formal definition initial valueinlineapplies toall elementsinheritednocomputed valueas the specified value, except for positioned and floating elements and the root element.
... specifications specification status comment css display module level
3the definition of 'display' in that specification.
font-variant-caps - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations w
3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements.
...les setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level
3the definition of 'font-variant-caps' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-capschrome full support 52edge full support 79firefox full support
34 full support
34 no support 24 —
34disabled disabled from version 24 until version
34 (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.ie no support noopera full support
39safari no support nowebview android full support 52chrome android full support 52firefox android full support
34 full support
34 no support 24 —
34disabled disabled from version 24 until version
34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
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.
...l syntax 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.o...
...tf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level
3the definition of 'font-variant-numeric' in that specification.
gap (grid-gap) - CSS: Cascading Style Sheets
syntax /* one <length> value */ gap: 20px; gap: 1em; gap:
3vmin; gap: 0.5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20px 10px; gap: 1em 0.5em; gap:
3vmin 2vmax; gap: 0.5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* global values */ gap: inherit; gap: initial; gap: unset; this property is specifi...
... examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width:
300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; he...
...ight: 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.
<image> - CSS: Cascading Style Sheets
css determines an object's concrete size using (1) its intrinsic dimensions; (2) its specified size, defined by css properties like width, height, or background-size; and (
3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size background-image the size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the browser-defined...
...if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a
300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these values are used as the concrete object size.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 examples valid images url(test.jpg) /* a <url>, as long as test.jpg is an actual image */ linear-gradient(blue, red) /* a <gradient> */ element(#realid) /* a part of the webpage, referenced with the element() function, if "realid" is an existing id on the page */ image(ltr 'arrow.png#xywh=0,0,16,16', red) ...
... css images module level
3the definition of '<image>' in that specification.
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.
...le_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this div is the main window, so it positions itself in relation to it.</p> </div> <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...
...in: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; } #example_
3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification sta...
...tus comment css positioned layout module level
3the definition of 'left' in that specification.
list-style-type - CSS: Cascading Style Sheets
01, 02, 0
3, … 98, 99 lower-roman lowercase roman numerals e.g.
... ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.
3 explanations understanding success criterion 1.
3.1 | w
3c understanding wcag 2.0 formal definition initial valuediscapplies tolist itemsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1...
...llo</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status comment css counter styles level
3the definition of 'list-style-type' in that specification.
... css lists module level
3the definition of 'list-style-type' in that specification.
mask-border - CSS: Cascading Style Sheets
this property is a shorthand for the following css properties: mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 /
35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 /
35px / 12px space alpha; values <'mask-border-source'> the source image.
...pretty neat, isn't it?</div> css to match the size of a single diamond, we will use a value of 90 divided by
3, or
30, for slicing the image into corner and edge regions.
... 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/fd08a
31
34c.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/fd08a
31
34c.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/fd08a
31
34c.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.
offset-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right
3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position.
...note that the
3-value position syntax does not work for any usage of <position>, except for in background(-position).
... html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor
3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move
3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan...
...; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor
3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-anchor' in that specification.
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(
30% 0%, 70% 0%, 100% 50%,
30% 100%, 0% 70%, 0%
30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q
300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position ...
... <svg xmlns="http://www.w
3.org/2000/svg" width="700" height="450" viewbox="
350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="42
3" width="610" height="
377" fill="blue" /> <polygon points="506,42
3 900,190 1294,42
3" fill="yellow" /> <polygon points="99
3,245 99
3,190 1086,190 1086,
300" fill="red" /> <path id="house" d="m900,190 l99
3...
...,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v
300 l1294,42
3 h1216 a11,11 0 0,0 1205,4
34 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v4
34 a11,11 0 0,0 584,42
3 h506 l900,190" fill="none" stroke="black" stroke-width="1
3" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m
30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1
30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m
30,0 h-10 a10,10 0 0...
...,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0
30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> </svg> css .scissorhalf { offset-path: path('m900,190 l99
3,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v
300 l1294,42
3 h1216 a11,11 0 0,0 1205,4
34 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v4
34 a11,11 0 0,0 584,42
3 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status co...
<resolution> - CSS: Cascading Style Sheets
as 1 inch is 2.54 cm, 1dpi ≈ 0.
39dpcm.
... examples use in a media query @media print and (min-resolution:
300dpi) { ...
... } valid resolutions 96dpi 50.82dpcm
3dppx invalid resolutions 72 dpi spaces are not allowed between the number and the unit.
... css values and units module level
3the definition of '<resolution>' in that specification.
revert - CSS: Cascading Style Sheets
h
3 { font-weight: normal; color: blue; } <h
3 style="font-weight: unset; color: unset;">this will still have font-weight: normal, but color: black</h
3> <p>just some text</p> <h
3 style="font-weight: revert; color: revert;">this should have its original font-weight (bold) and color: black</h
3> <p>just some text</p> revert all reverting all values is useful when you did heavy modifications for ...
... h
3 { font-weight: normal; color: blue; border-bottom: 1px solid grey; } <h
3>this will have custom styles</h
3> <p>just some text</p> <h
3 style="all: revert">this should be reverted to browser/user defaults</h
3> <p>just some text</p> revert on a parent reverting effectively removes the value for the element you select with some rule and only for that element.
... section { color: darkgreen } p { color: red } section.with-revert { color: revert } <section> <h
3>this will be dark green</h
3> <p>text in paragraph will be red.</p> this will also be dark green.
... </section> <section class="with-revert"> <h
3>this will be black</h
3> <p>text in paragraph will be red.</p> this will also be black.
text-transform - CSS: Cascading Style Sheets
internet explorer 9 was the closest to the css 2 definition, but with some weird cases.) by precisely defining the correct behavior, css text level
3 cleans this mess up.
... mdn understanding wcag, guideline 1.4 explanations w
3c understanding wcag 2.1 formal definition initial valuenoneapplies toall elements.
... full-width (general) <p>initial string <strong>012
3456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>012
3456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!"#$%&()*+,-./:;<=>?@{|}~</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...
... full-size-kana <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> </p> p:nth-of-type(2) { text-transform: full-size-kana; } specifications specification status comment css text module level
3the definition of 'text-transform' in that specification.
scaleZ() - CSS: Cascading Style Sheets
in the above interactive examples, perspective: 550px; (to create a
3d space) and transform-style: preserve-
3d; (so the children, the 6 sides of the cube, are also positioned in the
3d space), have been set on the cube.
... note: scalez(sz) is equivalent to to scale
3d(1, 1, sz).
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
... 10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a
3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a
3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification.
vertical-align - CSS: Cascading Style Sheets
for example, it could be used to vertically position an <img> in a line of text: <p> top:<img style="vertical-align:top" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> middle:<img style="vertical-align:middle" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> bottom:<img style="vertical-align:bottom" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> super:<img style="vertical-align:super" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> sub:<img style="vertical-align:sub" src="https://udn.realityripple.com/sam...
...ples/16/ed9c61c
3b6.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c
3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height:
3em; padding: 0 .5em; font-family: ...
...e 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/b4/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/b4/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/b4/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/b4/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.
writing-mode - CSS: Cascading Style Sheets
�</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>1994年に至っては</span></td> </tr> <tr> <td>vertical-rl</td> <td class="example text
3"><span>我家没有电脑。</span></td> <td class="example text
3"><span>example text</span></td> <td class="example text
3"><span>מלל ארוך לדוגמא</span></td> <td class="example text
3"><span>1994年に至っては</span></td> </tr> <tr> <td>sideways-lr</td> <td class="example text4"><span>我家没有电脑。</span></td> <td class="example text4"><span>exa...
...脑。</span></td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</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: ve...
...rtical-lr; -ms-writing-mode: vertical-lr; } .example.text
3 span, .example.text
3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { 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.
... candidate recommendation add sideways-lr and sideways-rl css writing modes module level
3the definition of 'writing-mode' in that specification.
Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp
3"> </audio> we can access these attributes like so: var myaudio = document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
...ject would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp
3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="
300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycan...
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp
3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width:
300px; } #buffered-amount { display: block; height: 100%; background-color: #777; wid...
...th: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width:
300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } ...
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>enter your phone number in the format (12
3)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="tel
3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="
3"/> </label> </p> here we have
3 sections for a north ame...
...rican 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.
... input:invalid { border: red solid
3px; } had we used minlength and maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true.
...="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, must describe the pattern.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
defaults to
300.
...stack overflow): browser maximum height maximum width maximum area chrome
32,767 pixels
32,767 pixels 268,4
35,456 pixels (i.e., 16,
384 x 16,
384) firefox
32,767 pixels
32,767 pixels 472,907,776 pixels (i.e., 22,528 x 20,992) safari
32,767 pixels
32,767 pixels 268,4
35,456 pixels (i.e., 16,
384 x 16,
384) ie 8,192 pixels 8,192 pixels ?
... <canvas width="
300" height="
300"> an alternative text describing what your canvas displays.
... mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html5 canvas accessibility in firefox 1
3 – by steve faulkner best practices for interactive canvas elements specifications specification status comment html living standardthe definition of '<canvas>' in that specification.
<input type="hidden"> - HTML: Hypertext Markup Language
<input id="prodid" name="prodid" type="hidden" value="xm2
34jq"> value a domstring representing the value of the hidden data you want to pass back to the server.
...when the form is submitted in step
3, the id is automatically sent back to the server with the record content.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="
34657"> </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 valu...
... 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=
34657 even though the hidden input cannot be seen at all, its data is still submitted.
<input type="number"> - HTML: Hypertext Markup Language
there seems to be some disagreement about this among browsers; see bug 1
398528.
...ut to be only as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far: <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> then we add some css to narrow the width of the element with the id selector #number: #number { width:
3em; } the result looks like this: offering suggested values you can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value.
... <input id="ticketnum" type="number" name="ticketnum" list="defaultnumbers"> <span class="validity"></span> <datalist id="defaultnumbers"> <option value="10045678"> <option value="10
3421"> <option value="11111111"> <option value="12
345678"> <option value="12999922"> </datalist> use of the list attribute with number inputs is not supported in all browsers.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } 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; } and finally, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'...
<input type="week"> - HTML: Hypertext Markup Language
<input> elements of type week create input fields allowing easy entry of a year plus the iso 8601 week number during that year (i.e., week 1 to 52 or 5
3).
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } 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; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } 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; } the other part of the code that may be of interest is the feature detection code.
...("0" + i) : i; weekselect.appendchild(option); } } note: remember that some years have 5
3 weeks in them (see weeks per year)!
<link>: The External Resource Link element - HTML: Hypertext Markup Language
browsers not supporting css
3 media queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in html 4.
...however, it's worth noting that rev is not considered obsolete in the w
3c specification.
...ina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> <!-- basic favicon --> <link rel="icon" href="favicon
32.png"> conditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true.
... for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution:
300dpi)"> stylesheet load events you can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event: <script> var mystylesheet = document.queryselector('#my-stylesheet'); mystylesheet.onload = function() { // do something interesting; the sheet has been loaded } mystylesheet.onerror = function() { console.log("an error occurred loading the stylesheet!"); } </scrip...
itemprop - HTML: Hypertext Markup Language
a meter element <div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=
3.5 max=5>rated
3.5/5</meter> (based on <span itemprop="reviewcount">11</span> customer reviews) </div> </div> similarly, for date- and time-related data, the time element and its datetime attribute can be used.
...one not defined in a public specification), or if the item is not a typed item it must be: a string that contains no "." (u+002e full stop) characters and no ":" characters (u+00
3a colon) and is used as a proprietary item property name (again, one not defined in a public specification).
.../p> <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-
340
32-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-
340
32-8 itemprop title the reality dysfunction itemprop author peter f.
lang - HTML: Hypertext Markup Language
the
3 most common subtags are: language subtag required.
... a 2-or-
3-character code that defines the basic language, typically written in all lowercase.
...this subtag defines a dialect of the base language from a particular location, and is either 2 letters in allcaps matching a country code, or
3 numbers matching a non-country area.
... for example, es-es is for spanish as spoken in spain, and es-01
3 is spanish as spoken in central america.
Data URLs - HTTP
data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-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.
... data:text/html,lots of text...<p><a name%
3d"bottom">bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format.
...for example, the opera 11 browser limited urls to 655
35 characters long which limits data urls to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime type).
... specifications specification title rfc 2
397 the "data" url scheme ...
Configuring servers for Ogg media - HTTP
by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at
30 frames per second), which works pretty well.
... for example, if the video is 1 minute and
32.6 seconds long, this header would be: x-content-duration: 92.6 if your server provides the x-content-duration header when serving ogg media, gecko doesn't have to do any extra http requests to seek to the end of the file to calculate its duration.
...the output from oggz-info looks like this: $ oggz-info /g/media/bruce_vs_ironman.ogv content-duration: 00:01:00.046 skeleton: serialno 197622
34
38 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.049% ogg overhead video-framerate: 29.98
3 fps video-width: 640 video-height:
360 vorbis: serialno 0708996688 45
31 packets in 167 pages, 27.1 p...
...just parse out the hh, mm, and ss into numbers, then do (hh*
3600)+(mm*60)+ss to get the value you should report.
CSP: base-uri - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
... <meta http-equiv="content-security-policy" content="base-uri 'self'"> <base href="https://example.com/"> // error: refused to set the document's base uri to 'https://example.com/' // because it violates the following content security policy // directive: "base-uri 'self'" specifications specification status comment content security policy level
3the definition of 'base-uri' in that specification.
CSP: child-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
... examples violation cases given this csp header: content-security-policy: child-src https://example.com/ this <iframe> and worker are blocked and won't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status comment content security policy level
3the definition of 'child-src' in that specification.
CSP: default-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
... img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src https://example.com; style-src 'self'; worker-src 'self' specifications specification status comment content security policy level
3the definition of 'default-src' in that specification.
CSP: font-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
...cases given this csp header: content-security-policy: font-src https://example.com/ the following font resource loading is blocked and won't load: <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status comment content security policy level
3the definition of 'font-src' in that specification.
CSP: frame-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
... examples violation cases given this csp header: content-security-policy: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status comment content security policy level
3the definition of 'frame-src' in that specification.
CSP: img-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
... examples violation cases given this csp header: content-security-policy: img-src https://example.com/ the following <img> is blocked and won't load: <img src="https://not-example.com/foo.jpg" alt="example picture"> specifications specification status comment content security policy level
3the definition of 'img-src' in that specification.
CSP: media-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
...y-policy: media-src https://example.com/ the following <audio>, <video> and <track> elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <track kind="subtitles" src="https://not-example.com/subtitles"> </video> specifications specification status comment content security policy level
3the definition of 'media-src' in that specification.
CSP: object-src - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... '<hash-algorithm>-<base64-value>' a sha256, sha
384 or sha512 hash of scripts or styles.
...csp
3.0 allows it in the case of script-src for external scripts.
...urity-policy: object-src https://example.com/ the following <object>, <embed>, and <applet> elements are blocked and won't load: <embed src="https://not-example.com/flash"></embed> <object data="https://not-example.com/plugin"></object> <applet archive="https://not-example.com/java"></applet> specifications specification status comment content security policy level
3the definition of 'object-src' in that specification.
Digest - HTTP
in rfc 72
31 terms this is the selected representation of a resource.
... 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
32
30 and rfc 584
3, and include sha-256 and sha-512.
... examples digest: sha-256=x48e9qookqqrvdts8nojrjn
3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn
3owduoywxbf7kbu9dbpe=,unixsum=
306
37 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc
32
30, but the definition of "selected representation" in rfc 72
31 made the original definition inconsistent with c...
...when released, the "resource digests for http" draft therefore will obsolete rfc
32
30 and will update the standard to be consistent.
If-Modified-Since - HTTP
if the request has not been modified since, the response will be a
304 without any body; the last-modified response header of a previous request will contain the date of last modification.
..."04" or "2
3".
..."09" or "2
3".
... examples if-modified-since: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 72
32, section
3.
3: if-modified-since hypertext transfer protocol (http/1.1): conditional requests ...
If-None-Match - HTTP
when the condition fails for get and head methods, then the server must return http status code
304 (not modified).
...note that the server generating a
304 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.
...they are a string of ascii characters placed between double quotes (like "675af
3456
3dc-tr
34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used (this is useless with if-none-match as it only uses that algorithm).
... examples if-none-match: "bfc1
3a64729c4290ef5b2c27
30249c88ca92d82d" if-none-match: w/"67ab4
3", "54ed21", "7892dd" if-none-match: * specifications specification title rfc 72
32, section
3.2: if-none-match hypertext transfer protocol (http/1.1): conditional requests ...
If-Range - HTTP
it is a string of ascii characters placed between double quotes (like "675af
3456
3dc-tr
34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
..."04" or "2
3".
..."09" or "2
3".
... examples if-range: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 72
33, section
3.2: if-range hypertext transfer protocol (http/1.1): range requests ...
Retry-After - HTTP
there are three main cases this header is used: when sent with a 50
3 (service unavailable) response, this indicates how long the service is expected to be unavailable.
... when sent with a redirect response, such as
301 (moved permanently), this indicates the minimum time that the user agent is asked to wait before issuing the redirected request.
...it is useful to send it along with a 50
3 (service unavailable) response, so that search engines will keep indexing your site when the downtime is over.
... retry-after: wed, 21 oct 2015 07:28:00 gmt retry-after: 120 specifications specification title rfc 72
31, section 7.1.
3: retry-after hypertext transfer protocol (http/1.1): semantics and content ...
Set-Cookie - HTTP
set-cookie: sessionid=
38afes7a8 permanent cookie instead of expiring when the client is closed, permanent cookies expire at a specific date (expires) or after a specific length of time (max-age).
... set-cookie: id=a
3fwa; expires=wed, 21 oct 2015 07:28:00 gmt set-cookie: id=a
3fwa; max-age=2592000 invalid domains a cookie for a domain that does not include the server that set it should be rejected by the user agent.
... the following cookie will be rejected if set by a server hosted on example.com: set-cookie: sessionid=e8bb4
3229de9; domain=foo.example.com cookie prefixes cookies names prefixed with __secure- or __host- can be used only if they are set with the secure attribute from a secure (https) origin.
... // both accepted when from a secure origin (https) set-cookie: __secure-id=12
3; secure; domain=example.com set-cookie: __host-id=12
3; secure; path=/ // rejected due to missing secure attribute set-cookie: __secure-id=1 // rejected due to the missing path=/ attribute set-cookie: __host-id=1; secure // rejected due to setting a domain set-cookie: __host-id=1; secure; path=/; domain=example.com specifications specification title rfc 6265, section 4.1: set-cookie http state manag...
Want-Digest - HTTP
header type general header forbidden header name no syntax want-digest: <digest-algorithm> // multiple algorithms, weighted with the quality value syntax: want-digest: <digest-algorithm><q-value>,<digest-algorithm><q-value> directives <digest-algorithm> supported digest algorithms are defined in rfc
32
30 and rfc 584
3, and include sha-256 and sha-512.
... examples want-digest: sha-256 want-digest: sha-512;q=0.
3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.
3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn
3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=...
...x48e9qookqqrvdts8nojrjn
3owduoywxbf7kbu9dbpe= the server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc
32
30, but the definition of "selected representation" in rfc 72
31 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc
32
30 and will update the standard to be consistent.
A typical HTTP session - HTTP
example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 5574
3 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: "2e77ad1dc6ab0b5
3a2996dfd465
3c1c
3" server: meinheld/0.6.1 strict-transport-security: max-age=6
3072000 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"> <hea...
...d> <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...
... (contains a site-customized page helping the user to find the missing resource) notification that the requested resource doesn't exist: http/1.1 404 not found content-type: text/html; charset=utf-8 content-length:
38217 connection: keep-alive cache-control: no-cache, no-store, must-revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:
35:1
3 gmt expires: thu, 06 dec 2018 17:
35:1
3 gmt server: meinheld/0.6.1 strict-transport-security: max-age=6
3072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html...
...
301: moved permanently.
412 Precondition Failed - HTTP
status 412 precondition failed examples etag: "
33a64df551425fcc55e4d42a148795d9f25f89d4" 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: "
33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... if-match: "
33a64df551425fcc55e4d42a148795d9f25f89d4" if the hashes don't match, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
... specifications specification title rfc 72
32, section 4.2: 412 precondition failed hypertext transfer protocol (http/1.1): conditional requests ...
Equality comparisons and sameness - JavaScript
abstract equality, strict equality, and same value in the specification in es5, the comparison performed by == is described in section 11.9.
3, the abstract equality algorithm.
... we can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the strict equality algorithm is a subset of the abstract equality algorithm, because 11.9.6.2–7 correspond to 11.9.
3.1.a–f.
... ~ << >> each of these operators uses the toint
32 algorithm internally.
... since there is only one representation for 0 in the internal
32-bit integer type, -0 will not survive a round trip after an inverse operation.
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.
... function checkdata() { if (document.form1.threechar.value.length ==
3) { return true; } else { alert( 'enter exactly three characters.
... 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 ${fruitty...
... value of the entire try…catch…finally production, regardless of any return 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) { c...
Working with objects - JavaScript
now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 199
3); this statement creates mycar and assigns it the specified values for its properties.
... then the value of mycar.make is the string "eagle", mycar.year is the integer 199
3, and so on.
...for example, var kenscar = new car('nissan', '
300zx', 1992); var vpgscar = new car('mazda', 'miata', 1990); an object can have a property that is itself another object.
... for example, suppose you define an object called person as follows: function person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } and then instantiate two new person objects as follows: var rand = new person('rand mckinnon',
33, 'm'); var ken = new person('ken jones',
39, 'm'); then, you can rewrite the definition of car to include an owner property that takes a person object, as follows: function car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; } to instantiate the new objects, you then use the following: var car1 = new car('eagle', 'talon tsi', 199
3, rand); var car2 = new car('nissan', '
300zx', 1992, ken); notice that instead of passing a literal string or integer value when creat...
JavaScript language resources - JavaScript
ecma-262
3rd edition pdf december 1999 ecmascript language specification.
... see also the es5 errata and ecmascript 5 support in mozilla ecma-
357 pdf june 2004 ecmascript for xml (e4x).
... ecma-262 5.1 edition pdf, html june 2011 this version is fully aligned with the
3rd edition of the international standard iso/iec 16262:2011.
... pdf, html december 2012 ecmascript internationalization api specification ecma-262 6th edition pdf, html june 2015 ecmascript 2015 language specification ecma-402 2nd edition pdf june 2015 ecmascript 2015 internationalization api specification ecma-262 7th edition html june 2016 ecmascript 2016 language specification ecma-402
3rd edition html june 2016 ecmascript 2016 internationalization api specification ecma-262 8th edition html june 2017 ecmascript 2017 language specification ecma-402 4th edition html june 2017 ecmascript 2017 internationalization api specification es.next is a dynamic name that refers to whatever the next version is at the time of writing.
SyntaxError: illegal character - JavaScript
famous examples of this are quotes, the minus or semicolon (greek questionmark (u+
37e) looks same).
... “this looks like a string”; // syntaxerror: illegal character // “ and ” are not " but look like this 42 – 1
3; // syntaxerror: illegal character // – is not - but looks like this var foo = 'bar'; // syntaxerror: illegal character // <
37e> is not ; but looks like this this should work: "this is actually a string"; 42 - 1
3; var foo = 'bar'; some editors and ides will notify you or at least use a slightly different highlighting for it, but not all.
... var colors = ['#000', #
333', '#666']; // syntaxerror: illegal character add the missing quote for '#
333'.
... var colors = ['#000', '#
333', '#666']; hidden characters when copy pasting code from external sources, there might be invalid characters.
Rest parameters - JavaScript
however, the third argument, manymoreargs, will be an array that contains the
3rd, 4th, 5th, 6th ...
... // using the same function definition from example above myfun("one", "two") // a, one // b, two // manymoreargs, [] argument length since theargs is an array, a count of its elements is given by the length property: function fun1(...theargs) { console.log(theargs.length) } fun1() // 0 fun1(5) // 1 fun1(5, 6, 7) //
3 ordinary parameter and rest parameters in the next example, a rest parameter is used to collect all parameters after the first into an array.
... each one of them is then multiplied by the first parameter, and the array is returned: function multiply(multiplier, ...theargs) { return theargs.map(element => { return multiplier * element }) } let arr = multiply(2, 1, 2,
3) console.log(arr) // [2, 4, 6] use with the arguments object array methods can be used on rest parameters, but not on the arguments object: function sortrestargs(...theargs) { let sortedargs = theargs.sort() return sortedargs } console.log(sortrestargs(5,
3, 7, 1)) // 1,
3, 5, 7 function sortarguments() { let sortedargs = arguments.sort() return sortedargs // this will never happen } console.log(sortarguments(5,
3, 7, 1)) // throws a typeerror (arguments.sort is not a function) to use array methods on the arguments object, it must be conv...
... function sortarguments() { let args = array.from(arguments) let sortedargs = args.sort() return sortedargs } console.log(sortarguments(5,
3, 7, 1)) // 1,
3, 5, 7 specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
Array.prototype.fill() - JavaScript
if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps
3-5.
... while (k < finalvalue) { o[k] = value; k++; } // step 1
3.
... 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.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...
...flatdeep(val, d - 1) : val), []) : arr.slice(); }; flatdeep(arr, infinity); // [1, 2,
3, 4, 5, 6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res...
....reverse(); } const arr = [1, 2, [
3, 4, [5, 6]]]; flatten(arr); // [1, 2,
3, 4, 5, 6] use generator function function* flatten(array, depth) { if(depth === undefined) { depth = 1; } for(const item of array) { if(array.isarray(item) && depth > 0) { yield* flatten(item, depth - 1); } else { yield item; } } } const arr = [1, 2, [
3, 4, [5, 6]]]; const flattened = [...flatten(arr, infinity)]; // [1, 2,
3, 4, 5, 6] please do not add polyfills on this article.
... for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples flattening nested arrays const arr1 = [1, 2, [
3, 4]]; arr1.flat(); // [1, 2,
3, 4] const arr2 = [1, 2, [
3, 4, [5, 6]]]; arr2.flat(); // [1, 2,
3, 4, [5, 6]] const arr
3 = [1, 2, [
3, 4, [5, 6]]]; arr
3.flat(2); // [1, 2,
3, 4, 5, 6] const arr4 = [1, 2, [
3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(infinity); // [1, 2,
3, 4, 5, 6, 7, 8, 9, 10] flattening and array holes the flat method removes empty slots in arrays: const arr5 = [1, 2, , 4, 5]; arr5.flat(); // [1, 2, 4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flat' in that specification.
Array.prototype.forEach() - JavaScript
example code let ratings = [5, 4, 5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,
3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 //
3 // 7 // numcallbackruns:
3 // comment: as you can see the missing value between
3 and 7 didn't invoke callback function.
... converting a for loop to foreach const items = ['item1', 'item2', 'item
3'] const copyitems = [] // before for (let i = 0; i < items.length; i++) { copyitems.push(items[i]) } // after items.foreach(function(item){ copyitems.push(item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.table(), which prints a formatted version of the array.
...[2, 5, , 9].foreach(logarrayelements) // logs: // a[0] = 2 // a[1] = 5 // a[
3] = 9 using thisarg the following (contrived) example updates an object's properties from each entry in the array: function counter() { this.sum = 0 this.count = 0 } counter.prototype.add = function(array) { array.foreach((entry) => { this.sum += entry ++this.count }, this) // ^---- note } const obj = new counter() obj.add([2, 5, 9]) obj.count //
3 obj.sum // 16 since the ...
... 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.slice() - JavaScript
for example, slice(1,4) extracts the second element through the fourth element (elements indexed 1, 2, and
3).
... examples return a portion of an existing array let fruits = ['banana', 'orange', 'lemon', 'apple', 'mango'] let citrus = fruits.slice(1,
3) // fruits contains ['banana', 'orange', 'lemon', 'apple', 'mango'] // citrus contains ['orange','lemon'] using slice> in the following example, slice creates a new array, newcar, from mycar.
... function list() { return array.prototype.slice.call(arguments) } let list1 = list(1, 2,
3) // [1, 2,
3] binding can be done with the call() method of function.prototype and it can also be reduced using [].slice.call(arguments) instead of array.prototype.slice.call.
... let unboundslice = array.prototype.slice let slice = function.prototype.call.bind(unboundslice) function list() { return slice(arguments) } let list1 = list(1, 2,
3) // [1, 2,
3] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.slice' in that specification.
Array - JavaScript
for example, if you had an object with a property named
3d, it can only be referenced using bracket notation.
... let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] console.log(years.0) // a syntax error console.log(years[0]) // works properly renderer.
3d.settexture(model, 'character.png') // a syntax error renderer['
3d'].settexture(model, 'character.png') // works properly in the
3d example, '
3d' had to be quoted (because it begins with a digit).
... const fruits = [] fruits.push('banana', 'apple', 'peach') console.log(fruits.length) //
3 when setting a property on a javascript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly: fruits[5] = 'mango' console.log(fruits[5]) // 'mango' console.log(object.keys(fruits)) // ['0', '1', '2', '5'] console.log(fruits.length) // 6 increasing the length.
..., , , , , , , , , , , , p,p,p,p,p,p,p,p r,n,b,q,k,b,n,r r,n,b,q,k,b,n,r p,p,p,p,p,p,p,p , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r using an array to tabulate a set of values values = [] for (let x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) } console.table(values) results in // the first column is the index 0 1 0 1 2 2 2 4 8
3 8 18 4 16
32 5
32 50 6 64 72 7 128 98 8 256 128 9 512 162 specifications specification initial publication ecmascript (ecma-262)the definition of 'array' in that specification.
BigInt.prototype.toLocaleString() - JavaScript
var bigint =
3500n; bigint.tolocalestring(); // displays "
3,500" if in u.s.
...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 = 12
345678912
3456789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 12
3.456.789.12
3.456.789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(bigint.tolocalestring('ar-eg')); // → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ // india uses thousands/lakh/crore separators console.log(bigint.tolocalestring('en-in')); // → 1,2
3,45,67,89,12,
34,56,789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 12
3.456.789.12
3.456.789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 12
345678912
3456789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 12
3.456.789.12
3.456.789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ￥12
3,456,78...
...9,12
3,456,789 // limit to three significant digits console.log(bigint.tolocalestring('en-in', { maximumsignificantdigits:
3 })); // → 1,2
3,00,00,00,00,00,00,000 specifications specification ecmascript (ecma-262)the definition of 'bigint.prototype.tolocalestring()' in that specification.
Date.prototype.getYear() - JavaScript
var xmas = new date('december 25, 1995 2
3:15:00'); var year = xmas.getyear(); // returns 95 years above 1999 the second statement assigns the value 100 to the variable year.
... var xmas = new date('december 25, 2000 2
3:15:00'); var year = xmas.getyear(); // returns 100 years below 1900 the second statement assigns the value -100 to the variable year.
... var xmas = new date('december 25, 1800 2
3:15:00'); var year = xmas.getyear(); // returns -100 setting and getting a year between 1900 and 1999 the third statement assigns the value 95 to the variable year, representing the year 1995.
... var xmas = new date('december 25, 2015 2
3:15:00'); xmas.setyear(95); var year = xmas.getyear(); // returns 95 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getyear' in that specification.
Function.prototype.apply() - JavaScript
// min/max number in an array const numbers = [5, 6, 2,
3, 7]; // using math.min/math.max apply let max = math.max.apply(null, numbers); // this about equal to math.max(numbers[0], ...) // or math.max(5, 6, ...) let min = math.min.apply(null, numbers); // vs.
...(the javascriptcore engine has hard-coded argument limit of 655
36.
...to illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments 5, 6, 2,
3 had been passed to apply in the examples above, rather than the full array.
... if your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time: function minofarray(arr) { let min = infinity; let quantum =
32768; for (var i = 0, len = arr.length; i < len; i += quantum) { var submin = math.min.apply(null, arr.slice(i, math.min(i+quantum, len))); min = math.min(submin, min); } return min; } let min = minofarray([5, 6, 2,
3, 7]); using apply to chain constructors you can use apply to chain constructors for an object (similar to java).
Intl.DateTimeFormat - JavaScript
var date = new date(date.utc(2012, 11, 20,
3, 0, 0)); // tolocalestring without arguments depends on the implementation, // the default locale, and the default time zone console.log(new intl.datetimeformat().format(date)); // → "12/19/2012" if run with en-us locale (language) and time zone america/los_angeles (utc-0800) using locales this example shows some of the variations in localized date and time formats.
... 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 date = new date(date.utc(2012, 11, 20,
3, 0, 0)); // results below use the time zone of america/los_angeles (utc-0800, pacific standard time) // us english uses month-day-year order console.log(new intl.datetimeformat('en-us').format(date)); // → "12/19/2012" // british english uses day-month-year order console.log(new intl.datetimeformat('en-gb').format(date)); // → "19/12/2012" // korean uses year-month-day order console.log(new intl.datetimeformat('ko-kr').format(date)); // → "2012.
...u-ca-japanese').format(date)); // → "24/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 options argument: var date = new date(date.utc(2012, 11, 20,
3, 0, 0, 200)); // request a weekday along with a long date var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(new intl.datetimeformat('de-de', options).format(date)); // → "donnerstag, 20.
...ns).format(date)); // → "thursday, december 20, 2012, gmt" // sometimes you want to be more precise options = { hour: 'numeric', minute: '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 24-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)); // → "1...
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 m49 geographic regions.
... if the type is "language", code should be a languagecode ["-" scriptcode] ["-" regioncode ] *("-" variant ) subsequence of the unicode_language_id grammar in uts
35's unicode language and locale identifiers grammar.
... languagecode is either a two letters iso 6
39-1 language code or a three letters iso 6
39-2 language code.
... if the type is "currency", code should be a
3-letter iso 4217 currency code.
Intl.NumberFormat.prototype.formatToParts() - JavaScript
the structure the formattoparts() method returns, looks like this: [ { type: "integer", value: "
3" }, { type: "group", value: "." }, { type: "integer", value: "500" } ] possible types are the following: currency the currency string, such as the symbols "$" and "€" or the name "dollar", "euro" depending on how currencydisplay is specified.
... examples comparing format and formattoparts numberformat outputs localized, opaque strings that cannot be manipulated directly: var number =
3500; var formatter = new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }); formatter.format(number); // "
3.500,00 €" however, in many user interfaces there is a desire to customize the formatting of this string.
... the formattoparts method enables locale-aware formatting of strings produced by numberformat formatters by providing you the string in parts: formatter.formattoparts(number); // return value: [ { type: "integer", value: "
3" }, { type: "group", value: "." }, { type: "integer", value: "500" }, { type: "decimal", value: "," }, { type: "fraction", value: "00" }, { type: "literal", value: " " }, { type: "currency", value: "€" } ] now the information is available separately and it can be formatted and concatenated again in a customized way.
... console.log(numberstring); // "
3.500,00 <strong>€</strong>" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.formattoparts' in that specification.
Intl.NumberFormat - JavaScript
var number =
3500; console.log(new intl.numberformat().format(number)); // → '
3,500' if in us english locale using locales this example shows some of the variations in localized number formats.
... 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 = 12
3456.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 12
3.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,2
3,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)); // → 12
3.456,789 using options the results can be customized using the options argument: var number = 12
3456.789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 12
3.456,79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ￥12
3,457 // limit to three significant digi...
...ts console.log(new intl.numberformat('en-in', { maximumsignificantdigits:
3 }).format(number)); // → 1,2
3,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.PluralRules() constructor - JavaScript
"1st", "2nd", "
3rd" in english).
...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.
..."1st", "2nd", "
3rd", "4th", "42nd" and so forth.
... var pr = new intl.pluralrules('en-us', { type: 'ordinal' }); pr.select(0); // → 'other' pr.select(1); // → 'one' pr.select(2); // → 'two' pr.select(
3); // → 'few' pr.select(4); // → 'other' pr.select(42); // → 'two' specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules() constructor' in that specification.
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 + v
3*v
3 + v4*v4).
... this function makes this calculation easier and faster; you simply call math.hypot(v1, v2) , or math.hypot(v1, v2, v
3, v4, ...).
...the largest number you can represent in js is number.max_value, which is around 10
308.
...1 / 0 : max * math.sqrt(s)); }; examples using math.hypot() math.hypot(
3, 4); // 5 math.hypot(
3, 4, 5); // 7.0710678118654755 math.hypot(); // 0 math.hypot(nan); // nan math.hypot(nan, infinity); // infinity math.hypot(
3, 4, 'foo'); // nan, since +'foo' => nan math.hypot(
3, 4, '5'); // 7.0710678118654755, +'5' => 5 math.hypot(-
3); //
3, the same as math.abs(-
3) specifications specification ecm...
Number.isSafeInteger() - JavaScript
for example, 25
3 - 1 is a safe integer: it can be exactly represented, and no other integer rounds to it under any ieee-754 rounding mode.
... in contrast, 25
3 is not a safe integer: it can be exactly represented in ieee-754, but the integer 25
3 + 1 can't be directly represented in ieee-754 but instead rounds to 25
3 under round-to-nearest and round-to-zero rounding.
... the safe integers consist of all integers from -(25
3 - 1) inclusive to 25
3 - 1 inclusive (± 9007199254740991 or ± 9,007,199,254,740,991).
... polyfill number.issafeinteger = number.issafeinteger || function (value) { return number.isinteger(value) && math.abs(value) <= number.max_safe_integer; }; examples using issafeinteger number.issafeinteger(
3); // true number.issafeinteger(math.pow(2, 5
3)); // false number.issafeinteger(math.pow(2, 5
3) - 1); // true number.issafeinteger(nan); // false number.issafeinteger(infinity); // false number.issafeinteger('
3'); // false number.issafeinteger(
3.1); // false number.issafeinteger(
3.0); // true ...
Number.prototype.toLocaleString() - JavaScript
var number =
3500; console.log(number.tolocalestring()); // displays "
3,500" if in u.s.
...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 = 12
3456.789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 12
3.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,2
3,456.789 /...
...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'])); // → 12
3.456,789 using options the results provided by tolocalestring can be customized using the options argument: var number = 12
3456.789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 12
3.456,79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ￥12
3,457 // limit to ...
...three significant digits console.log(number.tolocalestring('en-in', { maximumsignificantdigits:
3 })); // → 1,2
3,000 // use the host default language with options for number formatting var num =
30000.65; console.log(num.tolocalestring(undefined, {minimumfractiondigits: 2, maximumfractiondigits: 2})); // → "
30,000.65" where english is the default language, or // → "
30.000,65" where german is the default language, or // → "
30 000,65" where french is the default language specifications specification ecmascript (ecma-262)the definition of 'number.prototype.tolocalestring' in that specification.
Promise.prototype.then() - JavaScript
// using a resolved promise, the 'then' block will be triggered instantly, // but its handlers will be triggered asynchronously as demonstrated by the console.logs const resolvedprom = promise.resolve(
33); let thenprom = resolvedprom.then(value => { console.log("this gets called after the end of the main stack.
...the value received and returned is:
33" // promise {[[promisestatus]]: "resolved", [[promisevalue]]:
33} description as the then and promise.prototype.catch() methods return promises, they can be chained — an operation called composition.
...receive "foobar", register a callback function to work on that string // and print it to the console, but not before returning the unworked on // string to the next then .then(function(string) { settimeout(function() { string += 'baz'; console.log(string); // foobarbaz }, 1) return string; }) //
3.
...eject) { settimeout(function() { reject(new error('error')); }, 1000); } var p1 = promise.resolve('foo'); var p2 = p1.then(function() { // return promise here, that will be resolved to 10 after 1 second return new promise(resolvelater); }); p2.then(function(v) { console.log('resolved', v); // "resolved", 10 }, function(e) { // not called console.error('rejected', e); }); var p
3 = p1.then(function() { // return promise here, that will be rejected with 'error' after 1 second return new promise(rejectlater); }); p
3.then(function(v) { // not called console.log('resolved', v); }, function(e) { console.error('rejected', e); // "rejected", 'error' }); window.setimmediate style promise-based polyfill using a function.prototype.bind() reflect.apply (reflect.apply())...
Set - JavaScript
examples using the set object let myset = new set() myset.add(1) // set [ 1 ] myset.add(5) // set [ 1, 5 ] myset.add(5) // set [ 1, 5 ] myset.add('some text') // set [ 1, 5, 'some text' ] let o = {a: 1, b: 2} myset.add(o) myset.add({a: 1, b: 2}) // o is referencing a different object, so this 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) ...
...for (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...
...) 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', 'value
3']...
...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...
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)*)'.
...infinity contains -infinity and +infinity in javascript.", str2 = "my grandfather is 65 years old and my grandmother is 6
3 years old.", str
3 = "the contract was declared null and void."; str1.match("number"); // "number" is a string.
...returns ["65"] str
3.match(null); // returns ["null"] specifications specification ecmascript (ecma-262)the definition of 'string.prototype.match' in that specification.
WebAssembly.Global - JavaScript
it is being defined as a mutable i
32 type, with a value of 0.
... the value of the global is then changed, first to 42 using the global.value property, and then to 4
3 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:'i
32', 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", g...
...lobal.value, 4
3); }); note: you can see the example running live on github; see also the source code.
encodeURI() - JavaScript
note how certain characters are used to signify special meaning: http://username:password@www.example.com:80/path/to/file.php?foo=
316&bar=this+has+spaces#anchor hence encodeuri() does not encode characters that are necessary to formulate a complete uri.
...(see rfc2
396) encodeuri() escapes all characters except: not escaped: a-z a-z 0-9 ; , / ?
...~ * ' ( ) # examples encodeuri vs encodeuricomponent encodeuri() differs from encodeuricomponent() as follows: var set1 = ";,/?:@&=+$#"; // reserved characters var set2 = "-_.!~*'()"; // unreserved marks var set
3 = "abc abc 12
3"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$# console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set
3)); // abc%20abc%2012
3 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %
3b%2c%2f%
3f%
3a%40%26%
3d%2b%24%2
3 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set
3)); // abc%20abc%2012
3 (the space gets encoded as %20) note that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "...
...e attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuri('\ud800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\udfff')); encoding for ipv6 if one wishes to follow the more recent rfc
3986 for urls, which makes square brackets reserved (for ipv6) and thus not encoded when forming something which could be part of a url (such as a host), the following code snippet may help: function fixedencodeuri(str) { return encodeuri(str).replace(/%5b/g, '[').replace(/%5d/g, ']'); } specifications specification ecmascript (ecma-262)the definition of 'encodeuri' in ...
Iteration protocols - JavaScript
user-defined iterables you can make your own iterables like this: let myiterable = {}; myiterable[symbol.iterator] = function* () { yield 1; yield 2; yield
3; }; console.log([...myiterable]); // [1, 2,
3] built-in apis accepting iterables there are many apis that accept iterables.
... some examples include: new map([iterable]) new weakmap([iterable]) new set([iterable]) new weakset([iterable]) new map([[1, 'a'], [2, 'b'], [
3, 'c']]).get(2); // "b" let myobj = {}; new weakmap([ [{}, 'a'], [myobj, 'b'], [{}, 'c'] ]).get(myobj); // "b" new set([1, 2,
3]).has(
3); // true new set('12
3').has('2'); // true new weakset(function* () { yield {} yield myobj yield {} }()).has(myobj); // true see also promise.all(iterable) promise.race(iterable) array.from(iterable) syntaxes expecting iterables some statements and expressions expect iterables, for example the for...of loops, the spread operator), yield*, and destructuring assignment: for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // ...
... let index = 0; return { next: () => { if (index < this.data.length) { return {value: this.data[index++], done: false} } else { return {done: true} } } } } } const simple = new simpleclass([1,2,
3,4,5]); for (const val of simple) { console.log(val); // '1' '2' '
3' '4' '5' } is a generator object an iterator or an iterable?
... a generator object is both iterator and iterable: let ageneratorobject = function* () { yield 1; yield 2; yield
3; }(); console.log(typeof ageneratorobject.next); // "function", because it has a next method, so it's an iterator console.log(typeof ageneratorobject[symbol.iterator]); // "function", because it has an @@iterator method, so it's an iterable console.log(ageneratorobject[symbol.iterator]() === ageneratorobject); // true, because its @@iterator method returns itself (an iterator), so it's an well-formed iterable console.log([...ageneratorobject]); // [1, 2,
3] console.log(symbol.iterator in ageneratorobject) // true, because @@iterator method is a property of ageneratorobject specifications specification ecmascript (ecma-262)the definitio...
Bitwise NOT (~) - JavaScript
syntax ~a description the operands are converted to
32-bit integers and expressed by a series of bits (zeroes and ones).
... numbers with more than
32 bits get their most significant bits discarded.
... for example, the following integer with more than
32 bits will be converted to a
32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
... note that due to using
32-bit representation for numbers both ~-1 and ~4294967295 (2
32-1) results in 0.
Comma operator (,) - JavaScript
syntax expr1, expr2, expr
3...
... parameters expr1, expr2, expr
3...
...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.
Left shift (<<) - JavaScript
for example, 9 << 2 yields
36: .
... 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) =
36 (base 10) bitwise shifting any number x to the left by y bits yields x * 2 ** y.
... so e.g.: 9 <<
3 translates to: 9 * (2 **
3) = 9 * (8) = 72.
... examples using left shift 9 <<
3; // 72 // 9 * (2 **
3) = 9 * (8) = 72 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
Object initializer - JavaScript
now you can use a similar syntax in object literals, too: // computed property names (es2015) let i = 0 let a = { ['foo' + ++i]: i, ['foo' + ++i]: i, ['foo' + ++i]: i } console.log(a.foo1) // 1 console.log(a.foo2) // 2 console.log(a.foo
3) //
3 let param = 'size' let config = { [param]: 12, ['mobile' + param.charat(0).touppercase() + param.slice(1)]: 4 } console.log(config) // {size: 12, mobilesize: 4} spread properties the rest/spread properties for ecmascript proposal (stage 4) adds spread properties to object literals.
... let obj1 = { foo: 'bar', x: 42 } let obj2 = { foo: 'baz', y: 1
3 } let clonedobj = { ...obj1 } // object { foo: "bar", x: 42 } let mergedobj = { ...obj1, ...obj2 } // object { foo: "baz", x: 42, y: 1
3 } note that object.assign() triggers setters, whereas the spread operator doesn't!
... (if the value is not an object or null, the object is not changed.) let obj1 = {} assert(object.getprototypeof(obj1) === object.prototype) let obj2 = {__proto__: null} assert(object.getprototypeof(obj2) === null) let protoobj = {} let obj
3 = {'__proto__': protoobj} assert(object.getprototypeof(obj
3) === protoobj) let obj4 = {__proto__: 'not an object or null'} assert(object.getprototypeof(obj4) === object.prototype) assert(!obj4.hasownproperty('__proto__')) only a single prototype mutation is permitted in an object literal.
... let __proto__ = 'variable' let obj1 = {__proto__} assert(object.getprototypeof(obj1) === object.prototype) assert(obj1.hasownproperty('__proto__')) assert(obj1.__proto__ === 'variable') let obj2 = {__proto__() { return 'hello'; }} assert(obj2.__proto__() === 'hello') let obj
3 = {['__prot' + 'o__']: 17} assert(obj
3.__proto__ === 17) specifications specification ecmascript (ecma-262)the definition of 'object initializer' in that specification.
Unsigned right shift (>>>) - JavaScript
unlike the other bitwise operators, zero-fill right shift returns an unsigned
32-bit integer.
...unlike the other bitwise operators, zero-fill right shift returns an unsigned
32-bit integer.
...for example, -9 >>> 2 yields 107
3741821, which is different than -9 >> 2 (which yields -
3): .
... -9 (base 10): 11111111111111111111111111110111 (base 2) -------------------------------- -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 107
3741821 (base 10) examples using unsigned right shift 9 >>> 2; // 2 -9 >>> 2; // 107
3741821 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
continue - JavaScript
examples using continue with while the following example shows a while loop that has a continue statement that executes when the value of i is
3.
... thus, n takes on the values 1,
3, 7, and 12.
... var i = 0; var n = 0; while (i < 5) { i++; if (i ===
3) { continue; } n += i; } using continue with a label in the following example, a statement labeled checkiandj contains a statement labeled checkj.
...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.
return - JavaScript
function square(x) { return x * x; } var demo = square(
3); // demo will equal 9 if the value is omitted, undefined is returned instead.
... the following return statements all break the function execution: return; return true; return false; return x; return x + y /
3; automatic semicolon insertion the return statement is affected by automatic semicolon insertion (asi).
... 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(1
337); // 56154 specifications specification ecmascript (ecma-262)the definition of 'return statement' in that specification.
Transitioning to strict mode - JavaScript
differences from non-strict to strict syntax errors when adding 'use strict';, the following cases will throw a syntaxerror before the script is executing: octal syntax var n = 02
3; with statement using delete on a variable name delete myvariable; using eval or arguments as variable or function argument 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 sam...
...e 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 1041128).
... setting a value to an undeclared variable function f(x) { 'use strict'; var a = 12; b = a + x *
35; // error!
...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!
Trailing commas - JavaScript
syntax , examples trailing commas in literals arrays javascript ignores trailing commas in arrays: var arr = [ 1, 2,
3, ]; arr; // [1, 2,
3] arr.length; //
3 if more than one trailing comma is used, an elision (or hole) is produced.
... 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.
...ng 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 14 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) ...
<mtable> - MathML
align="center
3").
...starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 6014
36).
... examples alignment with row number rendering: <math> <mi>x</mi> <mo>=</mo> <mtable frame="solid" rowlines="solid" align="axis
3"> <mtr> <mtd><mi>a</mi></mtd> <mtd><mi>b</mi></mtd> </mtr> <mtr> <mtd><mi>c</mi></mtd> <mtd><mi>d</mi></mtd> </mtr> <mtr> <mtd><mi>e</mi></mtd> <mtd><mi>f</mi></mtd> </mtr> </mtable> </math> specifications specification status comment ma...
...thml
3.0the definition of 'mtable' in that specification.
Web media technologies
positional audio in a
3d environment in
3d environments, which may either be
3d scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source.
... playing video in a
3d environment in this guide, we examine how to play video into a
3d scene.
... webgl webgl provides an opengl es compatible api on top of the existing canvas api, making it possible to do powerful
3d graphics on the web.
... through a canvas, this can be used to add
3d imagery to media content.
Progressive loading - Progressive web apps (PWAs)
previous overview: progressive web apps in previous articles we covered apis that help us make our js1
3kpwa example a progressive web app: service workers, web manifests, notifications and push.
... in our js1
3kpwa demo app, the css is simple enough to leave it all in a single file with no specific rules as to how to load them.
...the js1
3kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure.
... final thoughts that's all for this tutorial series — we went through the source code of the js1
3kpwa example app and learned about the use of progressive web apps features including an introduction, pwa structure, offline availability with service workers, installable pwas, and finally notifications.
opacity - SVG: Scalable Vector Graphics
it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w
3.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="b...
...lack" 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>.
... css color module level
3the definition of 'opacity' in that specification.
... candidate recommendation references the specification in css color
3 and notes that there are some related attributes.
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w
3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="
33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="
33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop...
...-color="orange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="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="
340" height="120" xmlns="http://www.w
3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="
33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" cx="75%" cy="25%" r="
33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradie...
...nt" spreadmethod="repeat" cx="75%" cy="25%" r="
33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> </defs> <rect fill="url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="url(#radialrepeatgradient)" x="2
30" 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.
<marker> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker>...
... </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 4
3,60 57,
30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
... value type: <length> ; default value:
3; animatable: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>.
... value type: <length> ; default value:
3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to.
Modules - Archive of obsolete content
any property defined on the global object will be accessible from both scripts: // index.js: loadscript("www.foo.com/a.js"); foo; // =>
3 // a.js: foo =
3; exporting names the script loader we obtained from the components object allows us load scripts from other locations, but its api is rather limited.
...this becomes a problem when two scripts try to define the same property: // index.js: loadscript("www.foo.com/a.js"); loadscript("www.foo.com/b.js"); foo; // => 5 // a.js: foo =
3; // b.js: foo = 5; in the above example, the value of foo depends on the order in which the subscripts are loaded: there is no way to access the property foo defined by "a.js", since it is overwritten by "b.js".
...using this new version of loadscript, we can now rewrite our earlier example as follows: // index.js: let a = loadscript("www.foo.com/a.js"); let b = loadscript("www.foo.com/b.js"); a.foo // =>
3 b.foo; // => 5 // a.js: foo =
3; // b.js: foo = 5; importing names in addition to exporting properties from the script being loaded to the loading script, we can also import properties from the loading script to the script being loaded: function loadscript(url, imports) { let global = { imports: imports, exports: {} }; loader.loadsubscript(url, global); return...
system - Archive of obsolete content
this will be one of: "arm"``,"ia
32", or"x64"`.
...for example: "msvc", "n
32", "gcc2", "gcc
3", "sunc", "ibmc" var system = require("sdk/system"); console.log("compiler = " + system.compiler); build an identifier for the specific build, derived from the build date.
...for example, "{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}" for firefox.
tabs - Archive of obsolete content
attaching stylesheets new in firefox
34.
... you can't attach style sheets to a tab using tab.attach(), but from firefox
34 onwards you can attach and detach them using the low-level stylesheet/style and content/mod apis.
... readystate new in firefox
33.
ui - Archive of obsolete content
attaching panels to buttons is only supported from firefox
30 onwards.
... from firefox
30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and javascript.
... toolbar the ability to add buttons to toolbars is new in firefox
30.
core/heritage - Archive of obsolete content
ion 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() // => 20
3 // cmyk pink.magenta() // => 0.2471 pink.yellow() // => 0.20
39 pink.cyan() // => 0.0000 pink instanceof color // => true be aware though that it's not multiple inheritance and ancestors prototypes of the classes passed under implements option are ignored.
...tring() { return this.x + ':' + this.y; } }) var pixel = class({ extends: point, implements: [ color ], initialize: function initialize(x, y, color) { color.prototype.initialize.call(this, color); point.prototype.initialize.call(this, x, y); }, tostring: function tostring() { return this.hex() + '@' + point.prototype.tostring.call(this) } }); var pixel = pixel(11, 2
3, 'cc
3399'); pixel.tostring(); // => #cc
3399@11:2
3 pixel instanceof pixel // => true pixel instanceof point // => true extend module exports extend utility function, that is useful for creating objects that inherit from other objects, without associated classes.
... var { mix } = require('sdk/core/heritage'); var object = mix({ a: 1, b: 1 }, { b: 2 }, { c:
3 }); json.stringify(object) // => { "a": 1, "b": 2, "c":
3 } obscure module exports obscure utility function that is useful for defining non-enumerable properties.
Creating annotations - Archive of obsolete content
deprecated in firefox 29 and removed in firefox
38.
... annotation editor html the html is very simple: <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </sty...
... here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 1
3) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.focus(); }); save this inside data/editor as annotation-editor.js.
Displaying annotations - Archive of obsolete content
deprecated in firefox 29 and removed in firefox
38.
... the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid
3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(an...
... annotation panel html <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annot...
Creating Reusable Modules - Archive of obsolete content
h); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint
32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint
32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary hash data to a hex string.
...h); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint
32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint
32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary hash data to a hex string.
...h); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint
32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint
32_max); // pass false here to get binary data back var hash = ch.finish(false); // convert the binary hash data to a hex string.
Modifying Web Pages Based on URL - Archive of obsolete content
from firefox
34 onwards, you can just use "./my-script.js" instead.
...ry 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
34 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 ...
... var pagemod = require("sdk/page-mod").pagemod({ include: "*", contentstylefile: require("sdk/self").data.url("my-style.css") }); or, from firefox
34, 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.
Canvas code snippets - Archive of obsolete content
function getpixelcolour(canvas, x, y) { var cx = canvas.getcontext('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[
3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties.
...uments); }; } for (let p of 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.
... remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width =
300; remotecanvas.canvas_height =
300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
Embedding SVG - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml" xmlns:svg="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w
3.org/1999/xht...
...ml" xmlns:svg="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="
30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-styleshee...
...t href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="
30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
JavaScript Debugger Service - Archive of obsolete content
obsolete since gecko
33 (firefox
33 / thunderbird
33 / seamonkey 2.
30) this feature is obsolete.
... in firefox versions prior to gecko
33 (firefox
33 / thunderbird
33 / seamonkey 2.
30), the javascript debugger service (or simply jsd) used to be an xpcom component that allows the tracking of javascript while it was being executed in the browser.
... var jsd = components.classes["@mozilla.org/js/jsd/debugger-service;1"] .getservice(components.interfaces.jsdidebuggerservice); jsd.on(); // enables the service till firefox
3.6, for 4.x use asyncon if (jsd.ison) jsd.off(); // disables the service hooks jsd operates using the events hook mechanism.
LookupNamespaceURI - Archive of obsolete content
however, due to bug
312019, this method does not work with dynamically assigned namespaces (e.g., those set with node.prefix).
...aceuri(doc); addlookupnamespaceuri(element); function addlookupnamespaceuri (type) { if (!type.prototype.lookupnamespaceuri) { type.prototype.lookupnamespaceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w
3.org/tr/dom-level-
3-core/namespaces-algorithms.html#lookupnamespaceurialgo var i, att, htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && n...
...e case 10: // document_type_node case 11: // document_fragment_node return null; // unknown case 2: // attribute_node if (node.ownerelement) { return lookupnamespaceurihelper(node.ownerelement, prefix); } return null; // unknown default: // text_node (
3), cdata_section_node (4), entity_reference_node (5), // processing_instruction_node (7), comment_node (8) if (node.parentnode) { // entityreferences may have to be skipped to get to it return lookupnamespaceurihelper(node.parentnode, prefix); } return null; // unknown } }; } }()); ...
Preferences - Archive of obsolete content
eference with getcomplexvalue, passing nsipreflocalizedstring as atype: var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var branch = prefs.getbranch("extensions.myext."); var value = branch.getcomplexvalue("welcomemessage", components.interfaces.nsipreflocalizedstring).data; the code in step
3 will read the default value from chrome://myext/locale/defaults.properties when no user value is set, and will behave exactly the same as if nsisupportsstring was passed as atype otherwise.
... note: during gecko 1
3 development, nsiprefbranch2 was deprecated, and its methods moved to nsiprefbranch.
...this interface is described as: // "nsiprefbranch2 allows clients to observe changes to pref values." // this is only necessary prior to gecko 1
3 if (!("addobserver" in this.branch)) this.branch.queryinterface(components.interfaces.nsiprefbranch2); // finally add the observer.
xml:base support in old browsers - Archive of obsolete content
var scheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2
396.txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } // ...
... // var ns = 'http://www.w
3.org/xml/1998/namespace'; var att, protocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!thisitem || !thisitem.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#...
...
3 : 2; // if the file protocol has an extra slashe, prepare to also skip it in the separator search var att2 = att.indexof('/', protocolpos+skipfile); // find first path separator ('/') after protocol if (att2 !== -1) { att = att.substring(0, att2 - 1); // don't want any trailing slash, as the absolute path to be added already has one } } else if (!att.match(/\/$/)) { // if no trailing slash, add one, since it is being attached to a relative p...
getAttributeNS - Archive of obsolete content
function getattributenswrapper (thisitem, ns, nsatt) { if (thisitem === null) { return false; } if (thisitem.getattributens) { return thisitem.getattributens(ns, nsatt); } else if (ns === null) { return thisitem.getattribute(nsatt); } else if (ns === 'http://www.w
3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being sear...
...me !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w
3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(getattributenswrapper (someelement, 'http://www.w
3.org/1999/xlink', 'href')); // gets xlink:href, xl:href, etc.
... on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w
3.org/tr/dom-level-
3-cor...mespaceurialgo ...
Inline options - Archive of obsolete content
several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #12
3456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
... some examples: <!-- boolean examples --> <setting pref="extensions.myaddon.bool1" type="bool" title="boolean 1"/> <setting pref="extensions.myaddon.bool2" type="bool" title="boolean 2"> description of boolean 2 </setting> <!-- boolean stored as an integer --> <setting pref="extensions.myaddon.boolint" type="boolint" title="boolean
3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.myaddon.int" type="integer" title="integer"/> <!-- string examples --> <setting pref="extensions.myaddon.text" type="string" title="text"/> <setting pref="extensions.myaddon.password" type="string" title="password" inputtype="password"/> <!-- color example --> <setting pref="extensions.myaddon.color" type="color" title="color...
... note: starting in gecko 1
3.0, you can also listen for the addon-options-hidden notification, which has the same subject and data as above, to find out when the ui is about to be removed.
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:28857e60d04
3447c5f455085
3f2d40770b
326a1
3" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...the icon can be any image format supported by firefox, and should be
32x
32 pixels in size.
...the hash is specified as hash function:hash value, for example, sha1:28857e60d04
3447c5f455085
3f2d40770b
326a1
3.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
extension code using internal linkage will need to migrate to use frozen linkage because internal linkage will not be available in firefox
3.
...- #include "nscrt.h" + #include <string.h> const char *str = "foo"; - pruint
32 len = nscrt::strlen(str); + pruint
32 len = strlen(str); - #include "nscrt.h" + #include "nscrtglue.h" const prunichar str[] = {'f','o','o','\0'}; - pruint
32 len = nscrt::strlen(str); + pruint
32 len = ns_strlen(str); - #include "nscrt.h" + #include "nsmemory.h" + #include "nscrtglue.h" prunichar* anotherstr = (prunichar*) ns_alloc(100 * sizeof(prunichar)); - prunichar *str = nscrt::strdup...
...#define tointeger(prv, radix) tointeger(reinterpret_cast<print
32*>(prv), radix) this allows you to pass a pointer to an nsresult to the tointeger method, when it normally accepts a print
32.
Introduction - Archive of obsolete content
version 1.0 of firefox was released in november 2004, version 2.0 in october 2006, and version
3.0 in june 2008.
... this tutorial was written after firefox
3 was released, and has been updated with time.
... while most of it should still work for creating extensions in firefox
3 (and even firefox 2), it is strongly recommended that you aim to support modern firefox versions, to encourage users to stay up to date with security fixes.
Local Storage - Archive of obsolete content
the structure could be something like this: s4
35l.default (your profile directory) xulschool log.txt somedbfile.sqlite the directory service and the nsifile interface are used to create the local directory.
...the logger is called log4moz and it is implemented as a javascript code module, so it only works on firefox
3 and above.
...they were designed with rdf datasources in mind, but since firefox
3 they have been extended to support sqlite datasources as well.
Setting Up a Development Environment - Archive of obsolete content
« previousnext » getting the right tools there are
3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.
...for instance, you may want to test your extension in firefox
3.5 and firefox
3.6, or test it in a localized version of firefox.
... dom inspector the dom inspector used to be part of firefox as an installer option, but since firefox
3 it has been separated as another add-on you can add and remove.
Firefox addons developer guide - Archive of obsolete content
the stuff about installing the dom inspector (https://developer.mozilla.org/en/firefox_addons_developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox
3 or later, since it's no longer included in the firefox installer and must be downloaded from amo.
... these articles are all tagged as covering firefox
3.1 using the fx_minversion_header template, but i don't think that's the case.
... links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter
3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.
Using the Stylesheet Service - Archive of obsolete content
the stylesheets registered with this api apply to all documents; firefox 18 extended nsidomwindowutils with loadadditionalstylesheet() and removeadditionalstylesheet() to manage stylesheets for a specific document (bug 7
3700
3).
...in firefox
3, the changes take effect immediately, though some declarations (especially those affecting xul) won't work until a reload.
... backwards compatibility you can check for the availability and the functionality of the stylesheet service: if("@mozilla.org/content/style-sheet-service;1" in components.classes) { if(components.id('{41d979dc-ea0
3-42
35-86ff-1e
3c090c56
30}') .equals(components.interfaces.nsistylesheetservice)) { // stylesheet service is available, but changes won't apply until reload // (firefox 1.5 and 2 behaviour) } else { // stylesheet service is available and changes will apply immediately // (firefox
3 behaviour) } } else { // stylesheet service is not available (pre-firefox 1.5 behaviour) } ...
XML data - Archive of obsolete content
this is the
3rd section of part ii of the css tutorial.
...copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <!-- xml demonstration --> <?xml-stylesheet type="text/css" href="style9.css"?> <!doctype planet> <planet> <ocean> <name>arctic</name> <area>1
3,000</area> <depth>1,200</depth> </ocean> <ocean> <name>atlantic</name> <area>87,000</area> <depth>
3,900</depth> </ocean> <ocean> <name>pacific</name> <area>180,000</area> <depth>4,000</depth> </ocean> <ocean> <name>indian</name> <area>75,000</area> <depth>
3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, st...
... 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your browser: oceans arctic area: 1
3,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth:
3,900 m .
Case Sensitivity in class and id Names - Archive of obsolete content
an "illegal" example is given in the specification, preceded by the text: "the following example is illegal with respect to uniqueness since the two names are the same except for case." <p><a name="xxx">...</a> <p><a name="xxx">...</a> we could freely substitute id for name and the point would be the same, since name and id share the same name space (see section 12.2.
3).
... related links html 4.01, section 7.5.2 html 4.01, section 12.2.
3 original document information author(s): eric a.
... meyer, netscape communications last updated date: published 05 mar 2001 copyright information: copyright © 2001-200
3 netscape.
Creating a status bar extension - Archive of obsolete content
<?xml version="1.0"?> <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/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:creat...
...or>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}</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.
..."{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}" is a guid that uniquely identifies firefox as the target.
MozOrientation - Archive of obsolete content
warning: this experimental api was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3), when support for the standard deviceorientationevent was implemented.
... in firefox versions
3.6, 4, and 5 gecko utilized mozorientation which was also built to support orientation data but with different apis from the specified deviceorientationevent.
... to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff
3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w
3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya
3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new be...
... joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need reference for that) miro (formerly democracy player) video switched from xulrunner to webkit in version
3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code since version 2.0 raptr client gaming client was a xulrunner app initially but now uses adobe air rift technologies software installation over internet no longer using mozilla technolo...
... pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media player last project update on
3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down.
Visualizing an audio spectrum - Archive of obsolete content
dedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new float
32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } fft.forward(signal); // clear the canvas before drawing spectrum ctx.clearr...
...ect(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height,
3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float
32array(buffersize/2); this.real = new float
32ar...
...ray(buffersize); this.imag = new float
32array(buffersize); this.reversetable = new uint
32array(buffersize); this.sintable = new float
32array(buffersize); this.costable = new float
32array(buffersize); var limit = 1, bit = buffersize >> 1; while ( limit < buffersize ) { for ( var i = 0; i < limit; i++ ) { this.reversetable[i + limit] = this.reversetable[i] + bit; } limit = limit << 1; bit = bit >> 1; } for ( var i = 0; i < buffersize; i++ ) { this.sintable[i] = math.sin(-math.pi/i); this.costable[i] = math.cos(-math.pi/i); } }; fft.prototype.forward = function(buffer) { var buffersize = this.buffe...
Locked config settings - Archive of obsolete content
the encoding is a simple "byte-shifting" with an offset of 1
3 (netscape 4 used a similar encoding, but with a of 7 instead).
... this file also needs to be "called" from c:\program files\mozilla.org\mozilla\defaults\pref\all.js by appending the following line at the end: pref("general.config.filename", "mozilla.cfg"); note: newer versions of mozilla or firefox store the all.js file in greprefs rather than defaults\pref the moz-byteshift.pl script allows to encode...: moz-byteshift.pl -s 1
3 <mozilla.cfg.txt >mozilla.cfg ...
... and to decode mozilla.cfg files: moz-byteshift.pl -s -1
3 <mozilla.cfg >mozilla.cfg.txt example of an unencoded file: mozilla.cfg.txt.
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
the valid values are: 0x5 automatically ignore 0x4 automatically retry 0x
3 automatically abort note that you can also force windbgdlg to prompt, by setting a value of 0xfffffffe.
...as an example, consider the following failed assertion: assertion: no document: 'mdocument != nsnull', file d:/cvs-1.11.4/mozilla/content/xul/content/src/nsxulelement.cpp, line
317
3 (note that i have my source tree in d:/cvs-1.11.4/mozilla) if you have a dword in hkcu\software\mozilla.org\windbgdlg\ named "d:/cvs-1.11.5/mozilla/content/xul/content/src/nsxulelement.cpp," (with the comma - matches are whole-word only) and value 0x5, the assert would automatically be ignored.
... if you also had a dword named "
317
3", it would have no effect here because the handler stops comparing values at the first match.
Bookmark Keywords - Archive of obsolete content
however, the two should not be a case-sensitive match-- that is, if your keyword is av, then your title should be "av" or "av" or anything besides "av." (see bugzilla entry 119201 for details.) since this bookmark is intended to look up bugzilla entries, we'll call it "bz," as shown in figure
3.
...replace the bug's number (828
39) with the string %s.
...meyer, netscape communications last updated date: published 15 mar 2002 copyright information: copyright © 2001-200
3 netscape.
Download Manager preferences - Archive of obsolete content
browser.download.manager.usewindow note: in gecko 1.9.1 in bug 4
39495 a boolean value indicating whether or not to use the downloads window (true) or display download status in the status bar (false) in the browser window.
... in firefox
3 and earlier, the default is 0 (except on windows vista, where it's toggled to 1 on initial launch).
... in firefox
3.5 and seamonkey, the default is 1 on all platforms.
Drag and Drop Example - Archive of obsolete content
« previous gecko 1.9.1 (firefox
3.5) and later supports a newer and simpler api.
...<stack id="board" style="width:
300px; height:
300px; max-width:
300px; max-height:
300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events.
...the final code is shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:
300px; height:
300px; max-width:
300px; max-height:
300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ...
Repackaging Firefox - Archive of obsolete content
notice: the article is about repackaging firefox 2.0 and is obsolete when working on
3.x repackaging.
... the reason is that if you create and ship a dex that supports 2 locales (for example), and later decide to ship on a
3rd locale, you will need to re-create the dex to support it.
... when repacking firefox 2.0.0.
3 or lower, be sure to download the latest version of the repackager, which has an additional checkbox in this section to disable the migration wizard at startup.
Style System Overview - Archive of obsolete content
/quote> </para> </doc> example document tree doc ↙ ↓ ↘ title para class="emph" para ↓ ↓ quote quote ↓ span class="emph" example stylesheet doc { display: block; text-indent: 1em; } title { display: block; font-size:
3em; } para { display: block; } [class="emph"] { font-style: italic; } css style rule representation each declaration block is represented by an nscssdeclaration an cssstyleruleimpl contains each selector associated with that declaration, and the declaration, and is the most important implementation of nsistylerule.
... the rule tree rules: /* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-size:
3em; } /* rule
3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; } rule tree: a: null ↙ ↓ ↓ ↘ b: 1 c: 2 d:
3 e: 4 ↓ f: 4 style context tree: doc: b ↙ ↓ ↘ title: c ...
...(but beware didsetstylecontext) the style system style sheets & rules ↓ rule tree ↓ style context interface original document information author(s): david baron last updated date: june 6, 200
3 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Using microformats - Archive of obsolete content
firefox
3 implements a global microformats object that provides access to microformats.
... loading the microformats api the microformats object is created using the new javascript script loader added to firefox
3.
... predefined microformats firefox
3 provides definitions implementing several common microformats: adr represents an address (such as a street or mailing address).
Creating a Help Content Pack - Archive of obsolete content
insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document.
...(the index, table of contents, and search data sources are more likely to be nested, complicating their formats.) create a new rdf file (for now let's name it glossary.rdf), and add the following lines to it: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf> this forms the outer framework of a glossary description file.
...let's start with a brief sample rdf file with a single level: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> <rdf:li><rdf:description nc:link="foo.html" nc:title="foo"/></rdf:li> <rdf:li><rdf:description nc:link="baz.html" nc:title="baz"/></rdf:li> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf> there'...
Menu - Archive of obsolete content
see bug 5
34014 for details and a workaround.
...features meant for wide release should prefer jetpack.menu to the jetpack.menu.* menus because: firefox's menus are subject to change and in fact will be changing in firefox
3.7.
... see bug 526
382 for more information.
Makefile.mozextension.2 - Archive of obsolete content
real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/
32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.ma...
...nifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384} #thunderbird {
3550f70
3-e582-4d05-9a08-45
3d09bdfdc6} #nvu {1
36c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b6
3a} #sunbird {718e
30fb-e89b-41dd-9da7-e25a456
38b28} #netscape browser {
3db10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creat...
...ou who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gat...
Reading textual data - Archive of obsolete content
it can be used like nsilineinputstream, except that it supports non-ascii characters, and has no problems with charsets with embedded nulls (like utf-16 and utf-
32).
...asses["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptablestream.init(istream); var chunk = scriptablestream.read(4096); var text = converter.converttounicode(chunk); however, you must be aware that this method will not work for character encodings that have embedded null bytes, such as utf-16 or utf-
32.
...this code will not work for character encodings that contain embedded nulls such as utf-16 and utf-
32 // first, get and initialize the converter var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = /* the character encoding you want, using utf-8 here */ "utf-8"; // this assumes that 'file' is a variable that contains the file you want to read, as an nsifile var fis = components.classes["@mozilla.org/network/file-input-stream;1"] ...
Remote debugging - Archive of obsolete content
examples:
367650,
374
356,
39
3325, 4181
39 debugging over irc find the developer on irc and explain that you've caught the bug in a debugger.
...examples:
391851 share your computer with remote desktop offer to let a developer control your computer using remote desktop software such as vnc or fog creek copilot.
...examples: 496
391, 476241 ...
Static Analysis for Windows Code under Linux - Archive of obsolete content
dehydra requires patching gcc such that it can load plugins as shared libraries: # prepare a directory mkdir $home/dehydra cd $home/dehydra #obtain gcc 4.
3 sources wget ftp://mirrors.kernel.org/gnu/gcc/gcc...-4.
3.0.tar.bz2 tar jxvf gcc-4.
3.0.tar.bz2 # get the patches which enable plugins cd gcc-4.
3.0/ # create an hg repository.
...you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --target=i686-mingw
32 ac_add_options --enable-default-toolkit=cairo-windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw
32.
...host_libidl_config=/usr/bin/libidl-config #config your moztools position glib_prefix=$home/moztools libidl_prefix=$home/moztools #disable xpcom stdcall calling convention because of gcc 4.
3.0 bug cppflags="-dmoz_disable_xpcom_stdcall" #specify the cxx and static analysis #point cxx to the cross compile g++ with plugin support cxx=$home/mingw-install/bin/i686-mingw
32-g++ ac_add_options --with-static-checking=$home/dehydra/dehydra-gcc/gcc_dehydra.so then, you can start building your mozilla.
Abc Assembler Tests - Archive of obsolete content
* * contributor(s): * adobe as
3 team * * alternatively, the contents of this file may be used under the terms of * either the gnu general public license version 2 or later (the "gpl"), or * the gnu lesser general public license version 2.1 or later (the "lgpl"), * in which case the provisions of the gpl or the lgpl are applicable instead * of those above.
..." callpropvoid start 1 newfunction .function_id(runtest) getlocal0 call 0 findproperty end callpropvoid end 0 returnvoid } function runtest() { // test null <= null == true findproperty compare_stricteq pushstring "null lessequals null" // testname pushtrue // expected pushnull pushnull lessequals // actual callpropvoid compare_stricteq
3 // use .try / .catch to catch typeerror // convert_o null .try { pushnull convert_o pop findproperty fail pushstring "convert_o null" pushstring "exception should have been thrown: typeerror: error #1009: cannot access a property or method of a null object reference." getlocal1 callpropvoid fail
3 jump finished...
..._convert_o_null } .catch { getlocal0 pushscope setlocal2 // save typeerror findproperty compare_typeerror pushstring "convert_o null" // test name pushstring "typeerror: error #1009" // expected getlocal2 // actual callpropvoid compare_typeerror
3 } finished_convert_o_null: } ...
Running Tamarin performance tests - Archive of obsolete content
$ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 1
3:56:54.820920 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe test avm sunspider/access-binary-trees.as 82.0 sunspider/access-fannkuch.as 152.0 sunspider/access-nbody.as 17
3.0 sunspider/access-nsieve.as 65.0 sunspider/bitops-
3bit-bits-in-byte.as ...
... 1
3.0 sunspider/bitops-bits-in-byte.as
36.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-07-22 14:0
3:51.957
381 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe avm2: c:/dev/tamarin-tracing2/bld/shell/avmshell.exe test avm avm2 %sp sunspider/access-binary-trees.as 82.0 80.0 2.5 sunspider/access-fannkuch.as 15
3.0 155.0 -1.
3 sunspider/access-nbody.as 176.0 178.0 -1.1 sunspider/access-nsieve.as 65.0 68.0 -4.4 sunspider/bitops-
3bit-bits-in-byte.as 12.0 1
3.0 -7.7 sunspider/bitops-bits-in-byte.as ...
...
36.0
36.0 0.0 by default tests sunspider and sunspider-as
3 (optimized for as
3) and run.
Creating XPI Installer Modules - Archive of obsolete content
the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="
375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> <...
...in the following listing, the items in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package information --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barley grain" chrome:author="ian oeschger" chrom...
... see also jar packaging the jar file specification original document information author(s): ian oeschger original document: creating new packages for mozilla last updated date: march 8, 200
3 copyright information: copyright (c) ian oeschger ...
Mac stub installer - Archive of obsolete content
alternative to steps
3 and 4 copy the "installer modules" folder from the "mozilla installer" folder into the "macbuild" folder that contains the build debug or non-debug installer binary next to miw.mcp.
...to do this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#
33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself.
... original document information author(s): samir gehani other contributors: curt patrick last updated date: march 12, 200
3 copyright information: copyright (c) samir gehani, curt patrick ...
Windows Install - Archive of obsolete content
rt the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot
3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows already puts it in.
... winreg.setrootkey(winreg.hkey_current_user) ;// current_user subkey = "software\\microsoft\\windows\\currentversion\\runonce" ; winreg.createkey(subkey,""); valname = "ren8dot
3"; value = fprogram + "ren8dot
3.exe " + ftemp + "ren8dot
3.ini"; err = winreg.setvaluestring(subkey, valname, value); } } function prepareren8dot
3(listlongfilepaths) { var ftemp = getfolder("temporary"); var fprogram = getfolder("program"); var fren8dot
3ini = getwinprofile(ftemp, "ren8dot
3.ini"); var binicreated = false; var flongfilepath; var sshortfilepath; ...
... if(fren8dot
3ini != null) { for(i = 0; i < listlongfilepaths.length; i++) { flongfilepath = getfolder(fprogram, listlongfilepaths[i]); sshortfilepath = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot
3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot
3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", ...
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-
357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
...another e4x feature: the ability to bind a w
3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other.
...work is also underway "under the hood" on a new unified graphics architecture that uses
3d graphics processors to accelerate all rendering.
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="
3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> <label value="?name"/> <label value="?age"/> <label value="?hair"/> <label value="?eye"/> </row> ...
...s.interfaces.nsisimpleenumerator]), hasmoreelements: function() { return this._index < this._array.length; }, getnext: function() { return new templateresult(this._array[this._index++]); } }; // the query processor class - implements nsixultemplatequeryprocessor function templatequeryprocessor() { // our basic list of data this._data = [ {name: "mark", age:
36, hair: "brown", eye: "brown"}, {name: "bill", age: 25, hair: "red", eye: "black"}, {name: "joe", age: 15, hair: "blond", eye: "blue"}, {name: "jimmy", age: 65, hair: "gray", eye: "dull"} ]; } templatequeryprocessor.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplatequeryprocessor]), classdes...
...cription: "sample xul template query processor", classid: components.id("{282cc4ea-a49c-44fc-81f4-1f0
3cbb7825f}"), contractid: "@mozilla.org/xul/xul-query-processor;1?name=simpledata", getdatasource: function(adatasources, arootnode, aistrusted, abuilder, ashoulddelaybuilding) { // todo: parse the adatasources variable // for now, ignore everything and let's just signal that we have data return this._data; }, initializeforbuilding: function(adatasource, abuilder, arootnode) { // perform any initialization that can be delayed until the content builder // is ready for us to start }, done: function() { // called when the builder is destroyed to clean up state }, compilequery: function(abuilder, aquery, arefvariable, amembervariable) { // output...
Introduction to XUL - Archive of obsolete content
so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the html namespace is of course the standard one.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through...
... original document information author(s): danm@netscape.com last updated date: january
31, 2005 copyright information: copyright (c) danm@netscape.com ...
accessibleType - Archive of obsolete content
possible values are: constant value xulalert 1001 xulbutton 1002 xulcheckbox 100
3 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 ...
...istheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 101
3 xulstatusbar 1014 xulradiobutton 1015 xulradiogroup 1016 xultab 1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b xulthumb ...
... 101c xultree 101d xultreecolumns 101e xultreecolumnitem 101f xultoolbar 1020 xultoolbarseparator 1021 xultooltip 1022 xultoolbarbutton 102
3 ...
Filtering - Archive of obsolete content
an rdf type can be assigned to a node by using the predicate 'http://www.w
3.org/1999/02/22-rdf-syntax-ns#type' set to a resource for that type.
...the resulting rdf triples for the first country will be: http://www.daml.org/2001/09/countries/iso#it -> http://www.w
3.org/1999/02/22-rdf-syntax-ns#type -> http://www.daml.org/2001/09/countries/country-ont#country http://www.daml.org/2001/09/countries/iso#it -> http://purl.org/dc/elements/1.1/title -> italy the type is just like any other triple in the datasource, so we don't need any special syntax to navigate over it.
... <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w
3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> the action body will need to generate a <menuitem> for each result.
Multiple Queries - Archive of obsolete content
here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos
3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view...
...here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos
3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example.
... <hbox id="photoslist" datasources="template-guide-photos
3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos.
Skinning XUL Files by Hand - Archive of obsolete content
in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute
3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the applica...
...a toolbar elements defined as: <toolbar class="nav-bar" id="nav
3"> <toolbarbutton label="click me" /> <toolbarbutton label="don't click me" /> ...
... original document information author(s): ian oeschger last updated date: october
3, 2004 copyright information: copyright (c) ian oeschger ...
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="w
3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the first and second one.
... 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.
... for example, if you specified a minimum width of
30 pixels on panel 4 above, it would not shrink below that size.
Tree Selection - Archive of obsolete content
this means that if there are
3 top-level items and each has two child items, there will be a total of 9 items.
...the second child will be at index 2 and the second parent item will be at position
3 and so on.
...alert(tree.view.selection.isselected(
3)); modifying the tree selection the selection object has a number of functions which may be used to change the selection.
Using Spacers - Archive of obsolete content
if both buttons have a flex value of 1, the space will be divided evenly with
30 extra pixels of width going to each button.
...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="145"/> <button label="re...
... example
3 only two of the buttons are marked as flexible here.
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object="?friends"/> <member contai...
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description about="urn:root"> <nc:friends> <rdf:seq> <rdf:li> <rdf:description nc:name="alison appel"> <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#...
...doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> </rdf:li> </rdf:seq> </nc:friends> </rdf:description> <rdf:description id="home" nc:street="4
37 hoffman"/> <rdf:description id="doghouse" nc:street="4
35 hoffman"/> </rdf:rdf> the rdf model that this file creates can be represented with the following graph.
XUL accessibility guidelines - Archive of obsolete content
the problem occurs when a developer decides to add functionality that jumps the user to the second form field once
3 digits have been entered into the first form field.
... flickering or flashing is not only just annoying to everyone, but at a rate more than
3 cycles per second it can cause a seizure in users with photosensitive epilepsy.
... further references the official w
3c accessibility guidelines, soon to be released: 2.0 and techniques for 2.0 which will supercede 1.0.
The Implementation of the Application Object Model - Archive of obsolete content
if we ship a browser that does not have 100% support for css2, for example, but we've extended html by adding 20-
30 new tags, people are going to put down their blinders and see only the fact that we were off adding a whole slew of new stuff to html when we could have been firming up our standards story.
... statement #
3 the fact that the same hunk of aggregate data can be represented as any number of different content models (e.g., sorted, or as a toolbar, a tree view, or a menu) implies a need for a common intermediate representation for aggregated pluggable content that exists on top of the pluggable data sources and that exists underneath the content tree nodes that implement the interfaces through which the...
...todo: more examples talk about data sources original document information written by: dave hyatt last modified on: 1/
31/99 ...
listbox - Archive of obsolete content
apphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist = document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$
3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$
3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell...
... for richlistbox, this is new in firefox
3.5.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
menuseparator - Archive of obsolete content
celtext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item
3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
tabbrowser - Archive of obsolete content
note: starting in firefox
3 (xulrunner/gecko 1.9), this is only used in the main firefox window and cannot be used in other xul windows by third-party applications or extensions.
... firefox
3.6 note the second form of this method was added in firefox
3.6; it allows you to specify the parameters by name, in any order.
... firefox
3.6 note the second form of this method was added in firefox
3.6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
xulrunner 1.9.2.x is built from the same source code snapshot as firefox
3.6.x.
... current version the current version of xulrunner 1.9.2 is
3.6.26, matching firefox
3.6.26 detailed release notes can be found here.
... linux unpack the tarball to a new directory using tar -xjf xulrunner-
3.6.26.en-us.linux-i686.tar.bz2.
Deploying XULRunner - Archive of obsolete content
xulrunner
39 and later due to mac os x code signing rules and how they interact with the design of xulrunner (see bug 1105044 for the inside scoop), starting with xulrunner
39 the xulrunner library files are no longer able to reside in a xulrunner framework directory.
...other executables and libraries the core changes to xul and gecko that require this new file layout were implemented in gecko
34, except that the xulrunner application was not updated to know about the change, so it will report an error: "unable to load xpcom." xulrunner was fixed in gecko
39.
... xulrunner
38 and earlier in xulrunner
38 and earlier, xulrunner is provided in a mac os x framework bundle, which is placed in your application bundle's frameworks directory.
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
34px
360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px
34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... gecko 1.9.1 (firefox
3.5) and earlier the chromedir attribute firefox, thunderbird and seamonkey expose an attribute named chromedir on certain elements.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px
398px
34px
360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px
34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w
3c 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 w
3c 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.w
3.org/tr/2004/rec-dom-le...e
3-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 w
3c feature or recommended replacement ...
Using workers in extensions - Archive of obsolete content
equest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-
35) is executed.
... var self = this; this.worker.onmessage = function(event) { self.onworkermessage.call(self, event); }; this.worker.postmessage(this.tickersymbol); }, the worker is set up and configured here in lines 1
3-22: line 1
3 instantiates a new worker, specifying the uri of the ticker_worker.js file.
... 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.
Browser Feature Detection - Archive of obsolete content
browser sniffing via api name detection the following tables list the api names defined for specific w
3c dom apis and lists the percentage of names that your browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser.
... safari 2 opera 7 / 8.5-9.0 internet explorer 6 / 7 dom core 1 100% 100% 100% 75% / 91% 75% / 75% dom core 2 100% 100% 100% 70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / 8
3%
38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true ...
...1', 'document.body.style'); generatereport(document.body.style, 'domcss2', 'document.body.style'); window.onerror = oldonerror; see also browser detection and cross browser support comparison of layout engines web specifications supported in opera 9 what's new in internet explorer 7 (script) original document information author(s): (unknown) last updated date: updated march 16, 200
3 copyright information: copyright © 2001-200
3 netscape.
Namespaces - Archive of obsolete content
you can declare the default namespace for your e4x objects by placing the statement: default xml namespace = "http://www.w
3.org/1999/xhtml"; within the same scope as your e4x.
...default xml namespace = "http://www.w
3.org/1999/xhtml"; var a = <p>some text</p>; default xml namespace = "http://www.mozilla.org/keymaster/gat...re.is.only.xul"; var b = <label>more text</label>; a.appendchild(b); gives <p xmlns="http://www.w
3.org/1999/xhtml"> some text <label xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">more text</label> </p> name() using name() on an xml object returns a qname object (qualified name).
...info.uri; // returns "http://www.w
3.org/1999/xhtml" elements in no namespace return the empty string as their uri.
Generator comprehensions - Archive of obsolete content
examples simple generator comprehensions (for (i of [1, 2,
3]) i * i ); // generator function which yields 1, 4, and 9 [...(for (i of [1, 2,
3]) i * i )]; // [1, 4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator comprehensions with if statement var years = [1954, 1974, 1990, 2006, 2010, 2014]; (for (year of years) if (year > 2000) year); // generator function ...
... 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 2014).
@if - Archive of obsolete content
syntax @if ( condition1 ) text1 [@elif ( condition2 ) text2] [@else text
3] @end parameters text1 optional text to be parsed if condition1 is true.
... text
3 optional text to be parsed if both condition1 and condition2 are false.
... /*@cc_on @*/ /*@ document.write("javascript version: " + @_jscript_version + "."); document.write("<br />"); @if (@_win
32) document.write("running on a
32-bit version of windows."); @elif (@_win16) document.write("running on a 16-bit version of windows."); @else document.write("running on a different operating system."); @end @*/ requirements supported in all versions of internet explorer, but not in windows 8.x store apps.
New in JavaScript 1.2 - Archive of obsolete content
the following is a changelog for javascript from netscape navigator
3.0 to 4.0.
...note that netscape navigator
3.0 and earlier ignored scripts with the language attribute set to "javascript1.2" and higher.
... <script language="javascript1.1"> <!-- javascript for navigator
3.0.
New in JavaScript 1.8.5 - Archive of obsolete content
bug
307791 object.getownpropertynames() returns an array of all enumerable and non-enumerable properties on an object.
... bug 51866
3 object.preventextensions() prevents any extensions of an object.
...bug 5105
37 date.prototype.tojson() returns a json format string for a date object.
JavaArray - Archive of obsolete content
in javascript 1.
3 and earlier, componenttype must be a class object.
... backward compatibility javascript 1.
3 and earlier the methods of java.lang.object are not inherited by javaarray.
...in javascript 1.
3 and earlier, this method returns a string identifying the object as a javaarray.
background-size - Archive of obsolete content
i'm guessing not, just asking because having both rules in for
3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit.
...user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like in
3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
... user:jürgen jeka 2009-08-2
3 ...
Troubleshooting XForms Forms - Archive of obsolete content
check the xhtml 1.0 namespace declaration mozilla xforms is built upon the xhtml 1.0 specification, which is located at http://www.w
3.org/1999/xhtml .
... ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w
3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w
3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
...you either have to use css tables or repeat attributes, which at the moment are not working properly in the firefox xforms extension :( should be fixed by bug
306247 and bug 280
368 respectively.
RFE to the Custom Controls - Archive of obsolete content
output that shows the dom if output contains cdata section or text node and its data is any mozilla known language like xhtml/xul/svg then output should parse and display it (see bug
316817).
... output should show data in current locale format the bug
331585 address the issue.
...the related bug is bug
348562.
XForms Repeat Element - Archive of obsolete content
example <model> <instance> <my:lines> <my:line name="a"> <my:price>
3.00</my:price> </my:line> <my:line name="b"> <my:price>
32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line item</label> </input> <input ref="@name"> <label>name</label> </input> </repeat> <trigger> <label>insert a new item after the current one</label> ...
... example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w
3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model> <div xforms:repeat-nodeset="val"> this is the inline content, just text.
... </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </item> <item> <input>input2</input> </item> <item> <input>input
3</input> </item> </repeat> </data> </xf:instance> </xf:model> </head> <body> <xf:repeat nodeset="/data/repeat/item" id="gridrepeat"> <xf:input ref="input"/> </xf:repeat> <br/> <div class="grid" nodeset="/data/repeat/item"/> </body> ...
Archived open Web documentation - Archive of obsolete content
the following authoring tools adhere to the w
3 standards.
... xforms xforms were envisioned as the future of online forms as envisioned by the w
3c.
... drawing on other w
3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
d television systems committee ) ieee (institute of electrical and electronics engineers ) ietf (internet engineering task force ) irtf (internet research task force ) iso (international standards organization ) itu (international telecommunication union ) oasis (organization for the advancement of structured information standards ) oma (open mobile alliance ), uni (unicode consortium ) w
3c (world wide web consortium ) iana (internet assigned numbers authority ) ecma international like the processes and standards that accountants and project managers must follow, the above-mentioned standards organizations provide focus and direction for the development engineering community.
...within the web environment, the accessibility standards are closely tied to html, xml, xhtml, and other w
3c standards.
... for example, if web-based applications are expected to be w
3c compliant, each engineer would be expected to know and understand the w
3c standards.
Correctly Using Titles With External Stylesheets - Archive of obsolete content
to quote from html 4.01 specification, section 14.
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 14.
3: external style sheets original document information author(s): eric a.
... meyer last updated date: december
30th, 2002 copyright © 2001-200
3 netscape.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
hover and non-link elements section 5.11.
3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left.
...in browsers based on the engine found in mozilla 1.
3b and later, this quirk is extended to cover selectors that combine a bare class selector with the :hover pseudo-class (see bug 169078 for details).
...meyer, netscape communications last updated date: published 07 mar 200
3; revised 21 mar 200
3 copyright information: copyright © 2001-200
3 netscape.
Web Standards - Archive of obsolete content
using web standards in your web pages this article provides an overview of the process for upgrading the content of your web pages to conform to the w
3c web standards.
... tools firebug extension web developer extension markup validation service (w
3c) css validation service (w
3c) examples mozilla 1.0 demos - showing off what can be done with web standards.
... gecko demos css zen garden eric meyers's css/edge w
3c dom demos related topics css, dhtml, html, web development, xhtml, xml the web standards project ...
Introduction to game development for the Web - Game development
we're talking about kick-ass
3d action shooters, rpgs, and more.
...you don't have to hand over
30% of your revenues to someone else just because your game is in their ecosystem.
... webgl lets you create high-performance, hardware-accelerated
3d (and 2d) graphics from web content.
Bounce off the walls - Game development
« previousnext » this is the
3rd step out of 10 of the gamedev canvas tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson
3.html.
... the code above would deal with the ball bouncing off the top edge, so now let's think about the bottom edge: if(y + dy > canvas.height) { dy = -dy; } if the ball's y position is greater than the height of the canvas (remember that we count the y values from the top left, so the top edge starts at 0 and the bottom edge is at
320 pixels, the canvas' height), then bounce it off the bottom edge by reversing the y axis movement as before.
Extra lives - Game development
« previousnext » this is the 1
3th 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
3.html.
... new variables add the following new variables below the existing ones in your code: var lives =
3; var livestext; var lifelosttext; these respectively will store the number of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives.
Initialize the framework - Game development
ate 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 phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480,
320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document.
... this tutorial uses phaser v2 — it won't work with the current version on phaser (v
3).
... the v2 library is still available on the phaser download page, below the links for the v
3 download.
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
so, three 8-bits bytes of the input string/binary file (
3×8 bits = 24 bits) can be represented by four 6-bit base64 digits (4×6 = 24 bits).
... this means that the base64 version of a string or file will be at most 1
33% the size of its source (a ~
33% increase).
...for example, the string "a" with length === 1 gets encoded to "yq==" with length === 4 — a
300% increase.
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
effective connection type (ect) refers to the measured network performance, returning a cellular connection type, like
3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection.
... the values of 'slow-2g', '2g', '
3g', and '4g' are determined using observed round-trip times and downlink values.
...
3g 270ms 700 kbps the network is suited for transfers of large assets such as high resolution images, audio, and sd video.
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of
3fr.
...one part is given to column 2,
3 parts to column
3.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 200px 1fr
3fr; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> track sizing in the implicit grid tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns properties.
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
the world wide web—commonly referred to as www, w
3, or the web—is an interconnected system of public webpages accessible through the internet.
... soon after inventing the web, tim berners-lee founded the w
3c (world wide web consortium) to standardize and develop the web further.
... learn more learn about it learn the web web literacy map (an inventory of skills needed in web development) general knowledge world wide web on wikipedia the w
3c website ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
xml inclusions (xinclude) is a w
3c recommendation to allow inclusion of xml more different sources in a more convenient fashion than xml external entities.
...should become: var href = getxmlbaselink (/* xlink sans xml:base */ xinclude.getattribute('href'), /* element to query from */ xinclude); function resolvexincludes(docu) { // http://www.w
3.org/tr/xinclude/#xml-included-items var xincludes = docu.getelementsbytagnamens('http://www.w
3.org/2001/xinclude', 'include'); if (xincludes) { for (i=0; i < xincludes.length; i++) { var xinclude = xincludes[i]; var href = xinclude.getattribute('href'); var parse = xinclude.getattribute('parse'); var xpointer = xinclude.getattribute(...
...etattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w
3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse === 'xml' && xpointer === null) { alert('there must be an xpointer attribute present if "href"...
Loop - MDN Web Docs Glossary: Definitions of Web-related terms
examples for loop syntax: for (statement 1; statement 2; statement
3){ execute code block } statement 1 is executed once before the code block is run.
... statement
3 is executed every time the code block is run.
... statement
3 increases the value of i (i++) each time the code block is run.
MDN Web Docs Glossary: Definitions of Web-related terms
grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts html html5 http http header http/2 http/
3 https hyperlink hypertext i i18n iana icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb information architecture inheritance input method editor instance ...
... owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived performance percent-encoding php pixel placeholder names plaintext png polyfill polymorphism pop
3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascript) protocol prototype prototype-based programming proxy...
...type conversion u udp (user datagram protocol) ui undefined unicode uri url urn usenet user agent utf-8 ux v validator value variable vendor prefix viewport visual viewport voip w w
3c wai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms ...
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.
... 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(image
3.png), url(image4.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.
...the first two position values will be applied to the first two images, then they will cycle back around again — image
3 will be given the first position value, and image4 will be given the second position value.
Fundamental CSS comprehension - Learn web development
new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of
30px and padding of 10px on all sides.) but express it in ems.
...recall from earlier that the content box height should be
30px — this gives you all the numbers you need to calculate the line height.
...recall from earlier that the content box height should be
30px — this gives you all the numbers you need to calculate the line height.
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.
...the same css as used above would give the below result (width =
350px, height = 150px).
...the second paragraph has a margin-top of
30 pixels.
Responsive design - Learn web development
the media queries level
3 specification became a candidate recommendation in 2009, meaning that it was deemed ready for implementation in browsers.
... .container { column-count:
3; } if you instead specify a column-width, you are specifying a minimum width.
...essentially, the vw unit adds on top of that zoomed value: h1 { font-size: calc(1.5rem +
3vw); } this means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries.
CSS FAQ - Learn web development
standards mode: the browser attempts to follow the w
3c standards strictly.
...given that each modern browser uses an html5 parser, this is the recommended doctype */ <!doctype html public "-//w
3c//dtd html 4.0 transitional//en" "http://www.w
3.org/tr/html4/loose.dtd"> <!doctype html public "-//w
3c//dtd html 4.01//en" "http://www.w
3.org/tr/html4/strict.dtd"> <!doctype html public "-//w
3c//dtd xhtml 1.0 transitional//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w
3c//dtd xhtml 1.0 strict//en" "http://www.w
3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> ...
...more detailed information about how selector specificity is calculated can be found in the css 2.1 specification chapter 6.4.
3.
Fundamental text and font styling - Learn web development
other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of
32 px.
...--> </article> you would need to set its em value to 20/24, or 0.8
3333333 em.
... a full example would look like this: font: italic normal bold normal
3em/1.5 helvetica, arial, sans-serif; active learning: playing with styling text in this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce!
The HTML5 input types - Learn web development
the below screenshots show a non-empty search field in firefox 71, safari 1
3, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10.
...the last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/
31, 2
3:59 or 12/
31/99t11:59pm.
... <label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="201
3-06-01" max="201
3-08-
31" step="7" id="mydate"> browser support for date/time inputs you should be warned that the date and time widgets don't have the best browser support.
Example 2 - Learn web development
"option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0
3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding ...
...: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e
3e
3e
3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e
3e
3e
3, #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-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; te...
...: 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.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> ...
How to structure a web form - Learn web development
here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_
3" value="large"> <label for="size_
3">large</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also).
...don't test the example with 2 or
3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels and multiple inputs with the same id!
... <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="k" > king </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="q"> queen </label> </li> <li> <label for="title_
3"> <input type="radio" id="title_
3" name="title" value="j"> joker </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>...
Other form controls - Learn web development
<textarea cols="
30" rows="8"></textarea> this renders like so: the main difference between a <textarea> and a regular single line text field is that users are allowed to include hard line breaks (i.e.
... the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 1
3 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10.
... <meter min="0" max="100" value="75" low="
33" high="66" optimum="50">75</meter> the content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.
Sending form data - Learn web development
to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the data included in the request body instead: post / http/2.0 host: foo.com content-type: application/x-www-form-urlencoded content-length: 1
3 say=hi&to=mom the content-length header indicates the size of the body, and the content-type header indicates the type of resource sent to the server.
...python works a bit differently to php — to run this code locally you'll need to install python/pip, then install flask using pip
3 install flask.
... at this point you should be able to run the example using python
3 python-example.py, then navigating to localhost:5000 in your browser.
Your first form - Learn web development
ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width:
300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ ...
... in our example, the form will send
3 pieces of data named "user_name", "user_email", and "user_message".
... on the server side, the script at the url "/my-handling-form-page" will receive the data as a list of
3 key/value items contained in the http request.
Using data attributes - Learn web development
just use data attributes for that: <article id="electric-cars" data-columns="
3" data-index-number="12
314" data-parent="cars"> ...
... const article = document.queryselector('#electric-cars'); article.dataset.columns // "
3" article.dataset.indexnumber // "12
314" 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.
Adding vector graphics to the Web - Learn web development
more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="
300" height="200" xmlns="http://www.w
3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode.
... troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.
3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg.
...make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your document: <svg width="
300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time.
From object to iframe — other embedding technologies - Learn web development
entry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="
315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m
3!1d
37995.65748
333395!2d-2.27
3568166412784!
3d5
3.47
3310471916975!2m
3!1f0!2f0!
3f0!
3m2!1i1024!2i768!4f1
3.1!
3m
3!1m2!1s0x487bae6c0574
3d
3d%
3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!
3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder=...
... as of january 2020, most browsers block flash content by default, and by december
31st of 2020, all browsers will have completly removed all flash functionality.
...we saw some in earlier articles, such as <video>, <audio>, and <img>, but there are others to discover, such as <canvas> for javascript-generated 2d and
3d graphics, and <svg> for embedding vector graphics.
Test your skills: Multimedia and embedding - Learn web development
the audio is called audio.mp
3, and it is in a folder inside the current folder called media.
... give the <video> a width and height equal to its intrinsic size (
320 by 240 pixels).
... multimedia and embedding
3 for this final task you have two tasks to do: embed a pdf into the page.
Making asynchronous programming easier with async and await - Learn web development
in the slow-async-await.html example, timetest() looks like this: async function timetest() { await timeoutpromise(
3000); await timeoutpromise(
3000); await timeoutpromise(
3000); } here we simply await all three timeoutpromise() calls directly, making each one alert for
3 seconds.
... in the fast-async-await.html example, timetest() looks like this: async function timetest() { const timeoutpromise1 = timeoutpromise(
3000); const timeoutpromise2 = timeoutpromise(
3000); const timeoutpromise
3 = timeoutpromise(
3000); await timeoutpromise1; await timeoutpromise2; await timeoutpromise
3; } here we store the three promise objects in variables, which has the effect of setting off their associated processes all running simultaneously.
... next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over
3 seconds!
Graceful asynchronous programming with Promises - Learn web development
add the following to the end of your code: let promise
3 = promise2.then(myblob => { }) now let's fill in the body of the executor function.
...add this now: let errorcase = promise
3.catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); to see this in action, try misspelling the url to the image and reloading the page.
...we could just do something like: let a = fetch(url1); let b = fetch(url2); let c = fetch(url
3); promise.all([a, b, c]).then(values => { ...
Introduction to events - Learn web development
let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit
320.mp4" type="video/mp4"> <source src="rabbit
320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit
320.mp4">link to the video</a> instead.</p> </video> </div> when the <button> is selected, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's css contains these two classes, which position the box off the screen and on the screen, respectively): btn.onclick = function() { videobox.setattribute('class', 'showing'); } we then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>.
...when the w
3c decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.
Looping code - Learn web development
first, some simple html — a text <input> allowing us to enter a name to search for, a <button> element to submit a search, and a <p> element to display the results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:22
32
322', 'sarah:
345
3456', 'bill:7654
322', 'mary:9998769', 'dianne:9
384975']; 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 splitcont...
...act = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = '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:22
32
322', 'sarah:
345
3456', 'bill:7654
322', 'mary:9998769', 'dianne:9
384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.qu...
... active learning <h2>live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </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:
300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif...
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, verse
3.txt, and verse4.txt — in a new directory on your computer.
...(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, verse
3.txt, and verse4.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) { ...
...the object url will be visible inside the address bar, and should be something like this: blob:http://localhost:7800/9b75250e-5279-e249-884f-d0
3eb1fd84f4 challenge: an xhr version of the can store we'd like you to try converting the fetch version of the app to use xhr as a useful bit of practice.
Silly story generator - Learn web development
copy the code found underneath the heading "
3.
... inside the line that defines the weight variable, replace
300 with a calculation that converts
300 pounds into stones.
... just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '
300 pounds' with the contents of the weight variable.
What went wrong? Troubleshooting JavaScript - Learn web development
in this case, we've got line 86, character number
3.
...the instance that stores the random number that we want to guess at the start of the game should be around line number 44: let randomnumber = math.floor(math.random()) + 1; and the one that generates the random number before each subsequent game is around line 11
3: randomnumber = math.floor(math.random()) + 1; to check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: console.log(randomnumber); save and refresh, then play a few games — you'll see that randomnumber is equal to 1 at each point where it is logged to the console.
...0.567549
384
3.
JavaScript object basics - Learn web development
let's update the javascript object in our file to look like this: const person = { name: ['bob', 'smith'], age:
32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old.
...['bob', 'smith'] and
32).
...the syntax always follows this pattern: const objectname = { member1name: member1value, member2name: member2value, member
3name: member
3value }; the value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions.
Object-oriented JavaScript for beginners - Learn web development
i\'m ' + this.name.first + '.'); }; } now add in the following line below it, to create an object instance from it: let person1 = new person('bob', 'smith',
32, 'male', ['music', 'skiing']); you can now see that you can access the properties and methods just like we did previously — try these in your js console: person1['age'] person1.interests[1] person1.bio() // etc.
...you can then add properties and methods to this object using dot or bracket notation as desired; try these examples in your console: person1.name = 'chris'; person1['age'] =
38; person1.greeting = function() { alert('hi!
...try this in your js console: let person1 = new object({ name: 'chris', age:
38, greeting: function() { alert('hi!
Object prototypes - Learn web development
ample, we have defined a constructor function, like so: function person(first, last, age, gender, interests) { // property and method definitions this.name = { 'first': first, 'last' : last }; this.age = age; this.gender = gender; //...see link in summary above for full definition } we have then created an object instance like this: let person1 = new person('bob', 'smith',
32, 'male', ['music', 'skiing']); if you type "person1." into your javascript console, you should see the browser try to auto-complete this with the member names available on this object: in this list, you will see the members defined on person1's constructor — person() — name, age, gender, interests, bio, and greeting.
... try this in the console: let person
3 = new person1.constructor('karen', 'stephenson', 26, 'female', ['playing drums', 'mountain climbing']); now try accessing your new object's features, for example: person
3.name.first person
3.age person
3.bio() this works well.
...in our code we define the constructor, then we create an instance object from the constructor, then we add a new method to the constructor's prototype: function person(first, last, age, gender, interests) { // property and method definitions } let person1 = new person('tammi', 'smith',
32, 'neutral', ['music', 'skiing', 'kickboxing']); person.prototype.farewell = function() { alert(this.name.first + ' has left the building.
Setting up your own test automation environment - Learn web development
install the mocha test harness by running the following command inside your project directory: npm install --save-dev mocha you can now run the test (and any others you put inside your test directory) using the following command: mocha --no-timeouts you should include the --no-timeouts flag to make sure your tests don't end up failing because of mocha's arbitrary timeout (which is
3 seconds).
... 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': '4
3.0', 'username': username, 'accesskey': accesskey }) .usingserver("https://" + username + ":" + accesskey + "@ondemand.saucelabs.com:44
3/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.f...
... run the standalone server by entering the following into a terminal on your server computer java -jar selenium-server-standalone-
3.0.0.jar (update the .jar filename) so it matches exactly what file you've got.
Embedding API for Accessibility
here is the w
3c's definition of accessibility for a user agent like mozilla.
...it's a w
3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcharpref("alert.audio.background_image_waiting", pathtosoundfile); setcharpref("al...
...oard focus frame */ no browse with caret setboolpref("accessibility.browsewithcaret", usecaret); /* if this pref is set, the caret will be visible in the text of the browser, allowing the user to cursor around the html content as if in a read-only editor */ moz 0.9 special content notifications the w
3c uaag specifies types of content that must be optional.
Lightweight themes
image requirements dimensions should be
3000px wide × 200px high png or jpg file format image must be no larger than
300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... ultrawide monitors can run to
3440px wide, to look good on these monitors, ensure the left of the image fades to a solid color.
... upload your image — make sure it is under
300 kb in size and jpg or png format!
A bird's-eye view of the Mozilla framework
tiner last updated date: 11/2
3/05 statement of purpose the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework.
... inside an xpcom component figure
3 shows a more detailed view of an xpcom component.
... figure
3.
Browser chrome tests
be aware that the test harness will mark tests that take too long to complete as failed (the current timeout is
30 seconds).
... function test() { // requestlongertimeout accepts an integer factor, that is a multiplier for the the default
30 seconds timeout.
... // so a factor of 2 means: "wait for at last 60s (2*
30s)".
Creating a Firefox sidebar
the window.sidebar api obsolete since gecko 2
3 (firefox 2
3 / thunderbird 2
3 / seamonkey 2.20)this feature is obsolete.
... as of firefox 2
3, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived window.sidebar object.
... see also bootstrap addon demo which adds a sidebar with browser for html content: https://gist.github.com/noitidart/8728
39
3 ...
Creating a Login Manager storage module
some work has already been done to integrate the login manager with the mac os x keychain (bug 106400) and gnome keyring manager (bug
309807).
... const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); function sampleloginmanagerstorage() {} sampleloginmanagerstorage.prototype = { classdescription: "sample nsiloginmanagerstorage implementation", contractid: "@example.com/login-manager/storage/sample;1", classid: components.id("{
364a118c-747a-4f6d-ac6
3-2d2998e5a5c1}"), queryinterface: xpcomutils.generateqi([ci.nsiloginmanagerstorage]), // this registers the category for overriding the built-in nsiloginmanagerstorage _xpcom_categories: [ { category: "login-manager-storage", entry: "nsiloginmanagerstorage" } ], // console logging service, used for debugging.
...ed) { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmiturl, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug
309807 contains a complete example.
Debugging Chrome
i copied the d
3d9.dll into both c:\users\jrmuizel\appdata\local\google\chrome sxs\application\22.0.1186.0 and c:\users\jrmuizel\appdata\local\google\chrome sxs\application\.
...i did trace_file=foo.txt and it created the trace file in "c:\users\jrmuizel\appdata\local\google\chrome sxs\application\22.0.118
3.0\foo.txt".
... i was then able to run pix on d
3dretrace.
Debugging on Mac OS X
note also that since xcode 7.
3.1 it doesn't seem to be possible to have the xcode project live outside the source tree.
... these steps were last updated for xcode 10.
3: open xcode, and create a new project with file > new project.
...these directions were written using xcode 6.
3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the resulting popup, click "duplicate scheme" give the resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab.
Creating Custom Events That Can Pass Data
note that starting with version 6, firefox supports dom level
3 customevent, which lets you dispatch custom events with arbitrary data from javascript.
... (see bug 4275
37) 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(08bea24
3-8a7b-4554-9ee9-70d7785d741b)] interface nsidommyevent: nsidomevent { //put members here!
Contributing to the Mozilla code base
bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static analysis, and other code checking features step
3: get your code reviewed once you fix the bug, you can advance to having your code reviewed.
... 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 12
34567 - remove reflow by caching element size.
...after fixing a nontrivial number of bugs you should request level
3 access so you can land your own code after it has been reviewed.
SVG Guidelines
ippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles and use class names or svg attributes examples here are some examples for excessive number precision: 5.000000e-02 → 0.05 (as seen here) -
3.728928e-10 → 0 (as seen here) translate(0.000000, -1.000000) → translate(0, -1) (as seen here) as for descriptive ids: for gradients: svg_id1 → gradient1 (as seen here) use of class names avoid using a class if that class is only used once in the file if that class only sets a fill or a stroke, it's better to set the fill/stroke directly on the actual shape, instead of introduci...
...you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -
310)"><shape transform="translate(60,
308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -
310+
308 = -2 performance tips these rules are optional, but they help speeding up the svg.
... https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixes the excessive number precision: https://simon.html5.org/tools/js/svg-optimizer/ converts inline styles to svg attributes: https://www.w
3.org/wiki/svgtidy raphaeljs has a couple of utilities that may be useful: raphael.js ...
Displaying Places information using views
points
3 and 4 apply to this object.
... in firefox
3.6 and earlier requires gecko 1.9.2(firefox
3.6 / thunderbird
3.1 / fennec 1.0) create a built-in menu view by setting the type attribute to "places" on an empty menupopup element (which would be a child of some parent menu element): <menu> <menupopup type="places" /> </menu> the place attribute or property should be set on the menupopup as well.
... 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 implemented in browser/components/places/content/menu.xml.
Multiple Firefox profiles
here is a complete example terminal command from steps 2-
3: /applications/firefox.app/contents/macos/firefox -profile /users/suzie/library/application\ support/firefox/profiles/r99d1z7c.default if the profile manager window does not open, firefox may have been running in the background, even though it was not visible.
... linux there is no extremely straightforward way to create custom application launchers in gnome
3 like there was in gnome 2.
... the following tutorial will help get you going overall: gnome
3 custom application launcher.
Gecko's "Almost Standards" Mode
triggering "almost standards" the doctypes that will trigger "almost standards" mode are those which contain: the public identifier "-//w
3c//dtd xhtml 1.0 transitional//en" the public identifier "-//w
3c//dtd xhtml 1.0 frameset//en" the public identifier "-//w
3c//dtd html 4.01 transitional//en", with a system identifier the public identifier "-//w
3c//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 ident...
...for example, consider the following doctype: <!doctype html public "-//w
3c//dtd html 4.01 transitional//en" "http://www.w
3.org/tr/html4/loose.dtd"> the parts are as follows: public identifier: "-//w
3c//dtd html 4.01 transitional//en" system identifier: "http://www.w
3.org/tr/html4/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.
...meyer, netscape communications last updated date: published 08 nov 2002 copyright information: copyright © 2001-200
3 netscape.
JavaScript-DOM Prototypes in Mozilla
one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomeventtarget, nsidomeventlistener, nsidom
3node, and so on.
...the pagex property actually needs a patch because it doesn't get set correctly in initmouseevent bug 4110
31.
...when a class constructor name is registered (nsglobalnamestruct::etypeclassconstructor), the nsscriptnamespacemanager is given a dom class info id (a
32 bit id that identifies class info defined in nsdomclassinfo).
Examples
erstand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:7
34:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:279:11 makeinfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/devtoolsutils.js:84:7 */ intermediate of user defined...
...mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon
32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.
...change this line: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon
32.png']; change it to: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon
32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.
Promise.jsm
the promise.jsm javascript code module implements the promises/a+ proposal as known in april 201
3.
... method overview deferred defer(); obsolete since gecko
30 promise resolve([optional] avalue); promise reject([optional] areason); methods defer() creates a new pending promise and provides methods to resolve or reject it.
... deferred defer(); obsolete since gecko
30 parameters none.
Localizing extension descriptions
because a new method for doing so was implemented in gecko 1.9 (firefox
3), there are two sets of instructions below.
...the following example demonstrates this (most normal manifest properties have been removed for brevity): <?xml version="1.0"?> <rdf xmlns="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaubilder der inhalte aller offenen tabs an.</e...
...d-on metadata can be localized using this process: name description creator homepageurl localizable lists in cases where multiple values can exist, a numeric index is appended to the end of the preference name: extensions.extension_id.contributor.1=first_localized_contributor_name extensions.extension_id.contributor.2=second_localized_contributor_name extensions.extension_id.contributor.
3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_localization_file"); pref("extensions.extension_id.contributor.2", "path_to_localization_file"); pref("extensions.extension_id.contributor.
3", "path_to_localization_file"); the following add-on metadata can be localized using this process: developer translator contributor ...
Initial setup
autoconf 2.1
3 autoconf is a utility that is vital to manually creating mozilla application builds and language packs.
... we use version 2.1
3 and higher for these builds.
...you can find version
3.79.1 or higher here.
Release phase
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 242 changes to 2
39 files updating to branch default 2
39 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:7c54
3e8f
3a6a tag: tip user: your name <email@example.com> date: mon nov 2
3 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:7c54
3e8f
3a6a tag: tip user: your name <email@example.com> date: mon nov 2
3 18:08:25 2009 +0100 summary: added search bar strings make sure this output is accurate before continuing.
Uplifting a localization from Central to Aurora
i use kdiff
3; you may choose your own based on what you read at http://mercurial.selenic.com/wiki/mergeprogram a clone of your central repo.
...this looks something like searching for changes adding changesets adding manifests adding file changes added 22 changesets with 2
3 changes to 46 files (+1 heads) (run 'hg heads' to see heads, 'hg merge' to merge) ok, let's make sure we're not talking relbranches: hg heads --template '{node} {branches}\n' this is printing something like 51
31e147fa50c28ec858c7d9fd1ba201ea2a4
33b 4da525ed77699794c56081791bd46cc8598
3f6f8 9bc7e6c58fc091c8cd0e8d9e1dbc7e6f592772a7 gecko20b12_2011022218_relbranch 2
30e99fad...
...a602842d96
30e67
3077ef9f1ab
34247 gecko20b12pre_20110216_relbranch 41a4
357884d7bcc50e69c71014124d
3af2482afe comm20b11_2011020
3_relbranch 2ec6ad14e7168ebeb999b1e8ae106
32ae4c9df2
3 gecko20b11_2011020209_relbranch d68e647ac
3c0fee709c1
3abb0f0
3fac24a1a5d29 gecko20b11pre_20110126_relbranch 7ff
37dc68
37669
36
3a51ad
3fd2874ac845d
312d5 gecko20b10_2011012115_relbranch 6c
31fe9bc065a86aea222
3ba48698f18ae756
3ad gecko20b9_2011011018_relbranch here you can see that there are two changesets without a branch.
What every Mozilla translator should know
some branch/release names identified: mozilla source + en-us localization files for [ab-cd] locale corresponding firefox version branches in hg mozilla-central l10n-central firefox.next (trunk) mozilla-1.9.2 l10n-mozilla-1.9.2 firefox
3.6 mozilla-1.9.1 l10n-mozilla-1.9.1 firefox
3.5 and, on the former revision control system, cvs: cvs trunk (the default branch) -> firefox/thunderbird
3.0.x branch mozilla_1_8_branch -> firefox/thunderbird 2.0 branch mozilla cross-reference mozilla cross-reference is a web site mirroring the content of the hg server.
...specify the branch (1.9.2 for firefox
3.6, 1.9.2.1 for firefox
3.6.1, ...) attach the diff file to the bug: content type: patch mark the approval1.9.xxx with ?
...for example: bug 12
345, fix typos and resize prefwindow, a=l10n as soon as you have committed, put the bug in fixed state and write fixed1.8.xxx in the keyword field you have to verify in the next build that the changes have been successful.
Mozilla MathML Project
for a quick overview, see the slides for the innovation fairs at mozilla summit 201
3.
... updates status of each tag result of the mathml
3 testsuite unofficial nightly builds with mathml patches applied (maintained by bill gianopoulos) more updates and archived content community view mozilla forums...
... links installing fonts for mozilla's mathml engine mathml version
3.0 - w
3c recommendation, 21 october 2010 w
3c mathml test suite - designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.
Mozilla Style System Documentation
for example, suppose we had the css stylesheet: /* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-size:
3em; } /* rule
3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; } and the following document: <doc> <title>a few quotes</title> <para class="emph">benjamin franklin said that <quote>"a penny saved is a penny earned."</quote></para> <para>franklin d.
... [b: 1] [c: 2] [d:
3] [e: 4] | [f: 4] note that two rule nodes point to rule 4.
...david baron last updated date: june 6, 200
3 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
GPU performance
tools pix - can do timing of direct
3d calls.
...looks like it's designed for x11-based linux-arm devices, omap
3 is mentioned a lot in the docs ...
... guides accurately profiling direct
3d api calls (direct
3d 9)- suggests avoiding normal profilers like xperf and instead measuring the time to flush the command buffer.
JS::PerfMeasurement
note: at present, js::perfmeasurement is only functional on linux, but it is planned to add support for windows (bug 58
3322) and osx (bug 58
332
3) as well, and we welcome patches for other operating systems.
...s fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.
31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses.
... at present, it returns true on linux when the <linux/perf_event.h> api is available (kernel 2.6.
31 or later), and false everywhere else.
TraceMalloc
this file can be post-processed by tools in mozilla/tools/trace-malloc as follows: histogram.pl, which produces a type histogram that can be diffed with histogram-diff.sh to produce output that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 4754774 761
36 656645
3 27194 1811679 100.00 nstokenallocator 17 110007 60
388260 4
3 27825
3 15.
36 nsimagegtk 476 2197708
341 2
366564 -1
35 168856 9.
32 nsmemcacherecord 84
3 45767 2
328 124767 1485 79000 4.
36 nstextnode 209 11704 1614 90
384 1405 78680 4.
34 htmlattributesimpl 482 14288 282...
...4 88400 2
342 74112 4.09 nsscanner 58 76824 94 146
300
36 69476
3.8
3 nsscripterror 25
3 25070 842 91548 589 66478
3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 6
3910
3.5
3 nshtmlvalue 1
39 7846 1215 687
34 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:
3827
39 bytes,
3465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in
391091 allocations.
turbostat
invocation turbostat must be invoked as the super-user: sudo turbostat if you get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c
3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc
3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.6
3 3694
3398 0 12.02
3.16 1.71 61.48 49 49 0.00 0.00 0.00 0.00 22.68 15.1
3 1.1
3 0 0 821 22.44
3657
3398 0 9.92 2.4
3 2.25 62.96
39 49 0.00 0.00 0.00 0.00 22.68 15.
...1
3 1.1
3 0 4 708 19.14
3698
3398 0 1
3.22 1 1 74
3 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 784 21.29
3681
3398 0 11.78
3.10 1.1
3 62.70 40 2 6 782 21.15
3698
3398 0 11.92
3 3 702 19.14
3670
3398 0 8.
39
3.09 2.0
3 67.
36
39
3 7 648 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%c
3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc
3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt
3614 97.8
3 3694
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 ...
reader.parse-on-load.force-enabled
by default, the reader mode in firefox mobile is only enabled if the memory is greater than
384mb.
... type:boolean default value: false exists by default: yes application support:firefox mobile 2
3.0 status: active; last updated 201
3-05-11 introduction: pushed to nightly on 201
3-05-06 bugs: bug 867875 values true reader mode is enabled independent of memory available.
... false (default) reader mode is only enabled if memory available exceeds a threshold (currenlty
384mb).
L20n HTML Bindings
download l20n with html bindings we maintain a repository with l20n optimized for production use: one file (~110kb) one file, minified (~
35kb) it's recommended to include the l20n.js file as the last script in the head element.
... <script type="application/l10n-data+json"> { "newnotifications":
3, "user": { "name": "jane", "gender": "feminine" } } </script> this data will be available context-wide to all localized strings.
... <script type="application/l20n" src="../locales/strings.l20n"></script> note that you currently cannot use the manifest file and manually add resources via script tags at the same time (bug 92
3670).
Midas
internet explorer also supports the ability to edit specific elements using the contenteditable attribute; starting with firefox
3, gecko also supports contenteditable.
... formatblock h1, h2, h
3, h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element.
... heading h1, h2, h
3, h4, h5, h6 selected block will be formatted as the given type of heading.
NSPR Types
of the use of these types: in dowhim.h: pr_extern( void ) dowhatimean( void ); static void pr_callback rootfunction(void *arg); in dowhim.c: pr_implement( void ) dowhatimean( void ) { return; }; prthread *thread = pr_createthread(..., rootfunction, ...); algebraic types nspr provides the following type definitions with unambiguous bit widths for algebraic operations: 8-, 16-, and
32-bit integer types 64-bit integer types floating-point number type for convenience, nspr also provides type definitions with platform-dependent bit widths: native os integer types 8-, 16-, and
32-bit integer types signed integers print8 print16 print
32 unsigned integers pruint8 pruint16 pruint
32 64-bit integer types different platforms treat 64-bit numeric fields in diffe...
...some systems require emulation of 64-bit fields by using two
32-bit numeric fields bound in a structure.
...they are guaranteed to be at least 16 bits, though various architectures may define them to be wider (for example,
32 or even 64 bits).
PR_Available64
determines the number of bytes (expressed as a
32-bit integer) that are available for reading beyond the current read-write pointer in a specified file or socket.
...pr_available does not work with pipes on win
32 platforms.
... see also if the number of bytes available for reading is within the range of a
32-bit integer, use pr_available.
PR_NormalizeTime
for example, if you have a ] object that represents the date
3 march 1998 and you want to say "forty days from
3 march 1998", you can simply add 40 to the tm_mday field and then call pr_normalizetime().
...for example, suppose you want to compute the day of week for
3 march 1998.
... you can set tm_mday to
3, tm_month to 2, and tm_year to 1998, and all the other fields to 0, then call pr_normalizetime() with pr_gmtparameters.
PR_Seek
moves the current read-write file pointer by an offset expressed as a
32-bit integer.
... syntax #include <prio.h> print
32 pr_seek( prfiledesc *fd, print
32 offset, prseekwhence whence); parameters the function has the following parameters: fd a pointer to a prfiledesc object.
... description here's an idiom for obtaining the current location of the file pointer for the file descriptor fd: pr_seek(fd, 0, pr_seek_cur) see also if you need to move the file pointer by a large offset that's out of the range of a
32-bit integer, use pr_seek64.
Building NSS
use_64 0 build for a
32-bit environment/abi.
... if you don't have a domain suffix you can add an entry to /etc/hosts (on windows, c:\windows\system
32\drivers\etc\hosts) as follows: 127.0.0.1 localhost.localdomain validate this opening a command shell and typing: ping localhost.localdomain.
... remove the use_64=1 override if using a
32-bit build.
NSS Code Coverage
numbers in tested files example: 72.69% (165/227/7
31) 72.69% - ratio of tested blocks and total blocks in file (generated by tcov).
...
31 - total lines in file (by wc -l command).
... numbers in total count example: total: 42% (574/1
351).
Encrypt and decrypt MAC using token
nss sample code
3: encryption/decryption and mac using token object.
...*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #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 cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----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", " "); ...
HTTP delegation
background up to version
3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...this nss feature is currently targeted to first appear in nss version
3.11.1.
...to find an example implementation, you may look at bug 111
384, which tracks the implementation in mozilla client applications.
HTTP delegation
background up to version
3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...this nss feature is currently targeted to first appear in nss version
3.11.1.
...to find an example implementation, you may look at bug 111
384, which tracks the implementation in mozilla client applications.
NSS Config Options
nss config options format the specified ciphers will be allowed by policy, but an application may allow more by policy explicitly: config="allow=curve1:curve2:hash1:hash2:rsa-1024..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha256:secp256r1:secp
384r1" only the specified hashes and curves will be allowed, and rsa keys of 2048 or more will be accepted, and dh key exchange with 1024-bit primes or more: config="disallow=all allow=sha1:sha256:secp256r1:secp
384r1:min-rsa=2048:min-dh=1024" a policy that enables the aes ciphersuites and the secp256/
384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha256:sha
384:rsa:ecdhe-rsa:secp256r1:secp
384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl c...
... ecc curves prime192v1 prime192v2 prime192v
3 prime2
39v1 prime2
39v2 prime2
39v
3 prime256v1 secp112r1 secp112r2 secp128r1 secp128r2 secp160k1 secp160r1 secp160r2 secp192k1 secp192r1 secp224k1 secp256k1 secp256r1 secp
384r1 secp521r1 c2pnb16
3v1 c2pnb16
3v2 c2pnb16
3v
3 c2pnb176v1 c2tnb191v1 c2tnb191v2 c2tnb191v
3 c2onb191v4 c2onb191v5 c2pnb208w1 c2tnb2
39v1 c2tnb2
39v2 c2tnb2
39v
3 c2onb2
39v4 c2onb2
39v5 c2pnb272w1 c2pn...
...b
304w1 c2tnb
359v1 c2pnb
368w1 c2tnb4
31r1 sect11
3r1 sect1
31r1 sect1
31r1 sect1
31r2 sect16
3k1 sect16
3r1 sect16
3r2 sect19
3r1 sect19
3r2 sect2
33k1 sect2
33r1 sect2
39k1 sect28
3k1 sect28
3r1 sect409k1 sect409r1 sect571k1 sect571r1 hashes md2 md4 md5 sha1 sha224 sha256 sha
384 sha512 macs hmac-sha1 hmac-sha224 hmac-sha256 hmac-sha
384 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-ede
3-cbc des-40-cbc des-cbc null-cipher rc2 rc4 idea ssl key exchanges rsa rsa-export dhe-rsa dhe-dss dh-rsa dh-dss ecdhe-ecdsa ecdhe-rsa ecdh-ecdsa ecdh-rsa restrictions for asymmetric keys (integers) rsa-min dh-min dsa-min constraints on ssl proto...
Encrypt Decrypt_MAC_Using Token
nss sample code
3: encryption/decryption and mac using token object.
...*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #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 cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----" #define iv_header "-----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.
nss tech note7
pkcs #1 v1.5 block formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step
3) and on the w
3c web site (http://www.w
3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m 00 at the beginning is missing.
...for example, 0x0012
3456 is equal to 0x12
3456.
... sample code sample code 4: pki encryption references rsa labs pkcs #1 web site rfc
3447: rsa pkcs #1 v2.1 poupou's blog: common question: how to encrypt using rsa ...
PKCS 12 functions
function name/documentation source code nss versions sec_pkcs12addcertandkey mxr
3.2 and later sec_pkcs12addpasswordintegrity mxr
3.2 and later sec_pkcs12createexportcontext mxr
3.2 and later sec_pkcs12createpasswordprivsafe mxr
3.2 and later sec_pkcs12createunencryptedsafe mxr
3.2 and later sec_pkcs12decoderfinish mxr
3.2 and later ...
... sec_pkcs12decodergetcerts mxr
3.4 and later sec_pkcs12decoderimportbags mxr
3.2 and later sec_pkcs12decoderiterateinit mxr
3.10 and later sec_pkcs12decoderiteratenext mxr
3.10 and later sec_pkcs12decodersettargettokencas mxr
3.8 and later sec_pkcs12decoderstart mxr
3.2 and later sec_pkcs12decoderupdate mxr
3.2 and later sec_pkcs12decodervalidatebags mxr
3.2 and later sec_pkcs12decoderverify mxr
3.2 and later sec_pkcs12destroyexportcontext mxr
3.2 and later sec_pkcs12enablecipher mxr
3.2 and late...
...r sec_pkcs12encode mxr
3.2 and later sec_pkcs12isencryptionallowed mxr
3.2 and later sec_pkcs12setpreferredcipher mxr
3.2 and later ...
Creating JavaScript jstest reftests
it is maintained by tc
39, the ecmascript standard's technical committee.
... expected =
3; actual = 1 + 2; reportcompare(expected, actual, '
3==1+2'); comparesource comparesource(expected, actual, description) is used to test if the decompilation of a javascript object (conversion to source code) matches an expected value.
...in the javascript shell, an uncaught exception or out of memory error will terminate the shell with an exit code of
3.
JS::Add*Root
obsolete since jsapi
38this feature is obsolete.
... this article covers features introduced in spidermonkey
31 register a variable as a member of the garbage collector's root set, to protect anything the root points at from garbage collection.
... see also mxr id search for js::addvalueroot mxr id search for js::addstringroot mxr id search for js::addobjectroot mxr id search for js::addnamedvalueroot mxr id search for js::addnamedvaluerootrt mxr id search for js::addnamedstringroot mxr id search for js::addnamedobjectroot mxr id search for js::addnamedscriptroot bug 912581 bug 11076
39 ...
JS::Compile
const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi
39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jsco...
...obsolete since jsapi
39 options js::readonlycompileoptions & compile options.
... mxr id search for js::compile js::evaluate js::compileoffthread js::compilefunction js_decompilescript bug 771705 bug 114
379
3 -- removed obj parameter ...
JS::DeflateStringToUTF8Buffer
this article covers features introduced in spidermonkey
38 encode the given string as utf8 into given buffer.
... examples char16_t uchars[] = { 0xd8
3e, 0xdd8a, 0 }; js::rootedstring str(cx, js_newucstringcopyn(cx, uchars, 2)); if (!str) return false; js::rooted<jsflatstring*> flatstr(cx, js_flattenstring(cx, str)); if (!flatstr) return false; size_t length = js::getdeflatedutf8stringlength(flatstr); char* buffer = static_cast<char*>(js_malloc(cx, length + 1)); if (!buffer) return false; js::deflatestringtoutf8buffer(flatstr, mozilla::rang...
...edptr<char>(buffer, length)); buffer[length] = '\0'; printf("utf8: [%s]\n", buffer); js_free(cx, buffer); see also js::getdeflatedutf8stringlength bug 10
34627 bug 1271014 -- added dstlenp and numcharsp ...
JS_GetReservedSlot
syntax // added in spidermonkey 42 js::value js_getreservedslot(jsobject *obj, uint
32_t index); void js_setreservedslot(jsobject *obj, uint
32_t index, js::value v); // obsolete since spidermonkey 42 jsval js_getreservedslot(jsobject *obj, uint
32_t index); void js_setreservedslot(jsobject *obj, uint
32_t index, jsval v); name type description obj jsobject * an object that has reserved slots.
... index uint
32_t index of the reserved slot to access.
... reserved slots may also contain private values to store pointer values (whose lowest bit is 0) or uint
32_t, when non-javascript values must be stored; the garbage collector ignores such values when it sees them.
JS_GetStringChars
obsolete since jsapi
33this feature is obsolete.
... syntax jschar * js_getstringchars(jsstring *str); // obsolete since jsapi 1.8.5 const jschar * js_getstringcharsz(jscontext *cx, jsstring *str); // added in spidermonkey 1.8.2, obsolete since jsapi
33 name type description cx jscontext * (in js_getstringcharsz only) a context.
...see also bug 609440 - removed js_getstringchars bug 10
37869 - removed js_getstringcharsz ...
JS_InstanceOf
syntax bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, js::callargs *args); // added in spidermonkey
38 bool js_instanceof(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, jsval *argv); // obsolete since jsapi
32 name type description cx jscontext * pointer to a js context from which to derive runtime information.
...added in spidermonkey
38 argv jsval * optional argument vector.
...obsolete since jsapi
32 description js_instanceof can be used to check whether an object obj is of a particular jsclass.
JS_NewExternalString
syntax jsstring * js_newexternalstring(jscontext *cx, const char16_t *chars, size_t length, const jsstringfinalizer *fin); jsstring * js_newexternalstringwithclosure(jscontext *cx, jschar *chars, size_t length, int type, void *closure); // obsolete since jsapi 1
3 name type description cx jscontext * the context in which to create the new string.
...obsolete since jsapi 1
3 closure void * (js_newexternalstringwithclosure only) arbitrary, application-defined data to include in the string object after it's created.
...obsolete since jsapi 1
3 description js_newexternalstring and js_newexternalstringwithclosure create a new jsstring whose characters are stored in external memory, i.e., memory allocated by the application, not the javascript engine.
JS_NewFunction
syntax // added in spidermonkey 45 jsfunction * js_newfunction(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, const char *name); // obsolete since jsapi 44 jsfunction * js_newfunctionbyid(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsid> id); // obsolete since jsapi
39 jsfunction * js_newfunction(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, const char *name); jsfunction * js_newfunctionbyid(jscontext *cx, jsnative call, unsigned nargs, unsigned flags, js::handle<jsobject*> parent, js::handle<jsid> id); // added in spidermonkey 17 name type description c...
...obsolete since jsapi
39 name const char * name to assign to the new function.
... see also mxr id search for js_newfunction mxr id search for js_newfunctionbyid js_callfunction js_callfunctionname js_callfunctionvalue js_compilefunction js_compileucfunction js_definefunction js_definefunctions js_getfunctionname js_getfunctionobject bug 607695 - added js_newfunctionbyid bug 114057
3 - removed parent parameter bug 1054756 - removed js_newfunctionbyid ...
JS_NewGlobalObject
hookoption js::onnewglobalhookoption see debugger api hook added in spidermonkey
31 options const js::compartmentoptions & the option for new compartment (passed to jscompartment constructor).
... added in spidermonkey
31 description js_newglobalobject creates a new global object based on the specified class.
... enum onnewglobalhookoption { fireonnewglobalhook, dontfireonnewglobalhook }; see also mxr id search for js_newglobalobject mxr id search for onnewglobalhookoption bug 897
322 bug 880917 bug 759585 bug 570040 bug 755186 bug 12
39666 - options is no longer optional ...
JS_NewObjectForConstructor
syntax jsobject * js_newobjectforconstructor(jscontext *cx, const jsclass *clasp, const js::callargs& args); // added in jsapi
32 jsobject * js_newobjectforconstructor(jscontext *cx, jsclass *clasp, const jsval *vp); // added in jsapi 14, obsolete since jsapi
32 jsobject * js_newobjectforconstructor(jscontext *cx, const jsval *vp); // obsolete since jsapi 14 name type description cx jscontext * the context in which to create the new object.
...added in spidermonkey
38 description js_newobjectforconstructor creates a new object exactly as the given constructor would if invoked with new.
... see also mxr id search for js_newobjectforconstructor js_newobject object_to_jsval bug 58126
3 - added bug 7
38075 - added clasp parameter bug 959787 - added args parameter ...
JS_PSGS
// added in spidermonkey
31 #define js_self_hosted_getset(name, gettername, settername, flags) ...
... // added in spidermonkey
31 #define js_ps_end ...
... bug 9
38728 - added js_self_hosted_get and js_self_hosted_getset.
JS_PropertyStub
js::mutablehandlevalue vp); bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp, js::objectopresult &result); // added in spidermonkey 45 bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // obsolete since jsapi
39 bool js_resolvestub(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // obsolete since jsapi
37 bool js_deletepropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // obsolete since jsapi
37 bool js_enumeratestub(jscontext *cx, js::handleobject obj); // obsolete since jsapi
37 bool js_convertstub(jscon...
...text *cx, js::handleobject obj, jstype type, js::mutablehandlevalue vp); // obsolete since jsapi
37 void js_finalizestub(jscontext *cx, jsobject *obj); // obsolete since jsapi 14 description the stub functions are not designed to be called directly by a jsapi application.
... see also mxr id search for js_propertystub mxr id search for js_strictpropertystub jspropertyop jsstrictpropertyop bug 110
3152 - removed js_deletepropertystub, js_enumeratestub, js_resolvestub, and js_convertstub bug 7
36978 - removed js_finalizestub bug 111
3369 -- added result parameter ...
JS_SetContextCallback
data void * any data passed as
3rd argument to the callback function.
... added in spidermonkey
31 callback syntax typedef bool (* jscontextcallback)(jscontext *cx, unsigned contextop, void *data); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions.
...added in spidermonkey
31 typedef enum jscontextop { jscontext_new, jscontext_destroy } jscontextop; enumeration meaning jscontext_new js_newcontext successfully created a new jscontext instance.
JS_SetGCParametersBasedOnAvailableMemory
this article covers features introduced in spidermonkey
31 adjust performance parameters related to garbage collection based on available memory.
... syntax void js_setgcparametersbasedonavailablememory(jsruntime *rt, uint
32_t availmem); name type description rt jsruntime * the runtime to configure.
... value uint
32_t the value of available memory in megabytes.
JS_SetNativeStackQuota
added in spidermonkey
31 untrustedscriptstacksize size_t the desired stack quota setting, in bytes for untrusted script.
...added in spidermonkey
31 description js_setnativestackquota sets the size of the native stack that should not be exceeded.
... see also mxr id search for js_setnativestackquota js_settrustedprincipals bug 5168
32 bug 7
32665 bug 72
3021 ...
JS_StrictlyEqual
syntax // added in spidermonkey 45 bool js_strictlyequal(jscontext *cx, js::handle<js::value> v1, js::handle<js::value> v2, bool *equal); // obsolete since jsapi
39 bool js_strictlyequal(jscontext *cx, jsval v1, jsval v2, bool *equal); name type description cx jscontext * the context in which to perform the conversion.
... description js_strictlyequal determines if v1 is strictly equal to v2 under the javascript === operator, as specified in ecma 262-
3 §11.9.6.
... see also mxr id search for js_strictlyequal js_looselyequal js_samevalue bug 11
32045 -- use handle ...
JS_ToggleOptions
syntax uint
32 js_toggleoptions(jscontext *cx, uint
32 options); name type description cx jscontext * a context on which to modify options.
... options uint
32 the set of options to toggle.
...see also mxr id search for js_toggleoptions js_setoptions js_getoptions bug 880
330 ...
JS_TracerInit
obsolete since jsapi
31this feature is obsolete.
... callback syntax typedef void (*jstracecallback)(jstracer *trc, void *thing, uint
32 kind); name type description trc jstracer * the tracer visiting obj.
... kind uint
32 one of the constants jstrace_object, jstrace_double, jstrace_string; or a tag denoting an internal implementation-specific traversal kind.
JS_ValueToBoolean
it implements the toboolean operator specified in ecma 262-
3 §9.2.
...this is the behavior specified in ecma 262-
3 §9.2.
... see also mxr id search for js_valuetoboolean js::toboolean bug 9
34557 ...
JS_ValueToId
syntax bool 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, uint
32_t index, js::mutablehandleid idp); // added in spidermonkey 17 bool js_charstoid(jscontext* cx, js::twobytechars chars, js::mutablehandleid idp); // added in spidermonkey 24 void js::protokeytoid(jscontext *cx, jsprotokey key, js::mutablehandleid idp); // added in spidermonkey
38 name type description cx jscontext * a context.
... index uint
32_t an unsigned integer index of array to convert.
... 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 698495 - added js_indextoid bug 8
30500 - added js_charstoid bug 959787 - added js_stringtoid bug 987669 - added js::protokeytoid ...
JS_ValueToNumber
it implements the tonumber operator described in ecma 262-
3 §9.
3.
... if v is a string, conversion proceeds as specified in ecma 262-
3 §9.
3.1.
... see also js_convertarguments js_convertvalue js_gettypename js_typeofvalue js_valuetoint
32 js_valuetoecmaint
32 bug 884410 ...
JS_ValueToString
it implements the tostring operator specified in ecma 262-
3 §9.8.
... if v is a number, conversion succeeds, and the result is a string representation of that number as specified in ecma 262-
3 §9.8.1.
... see also bug 9
338
34 js::tostring ...
SpiderMonkey 17
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa
3b16965c9202).
... — 25 march 201
3 platform support spidermonkey 17 is supported on all the platforms where firefox 17 runs.
... obsolete typedef replacement type provided by uint8, int8, uint16, int16, uint
32, int
32, uint64, int64 uint8_t, int8_t, uint16_t, int16_t, uint
32_t, int
32_t, uint64_t, int64_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 th...
SpiderMonkey 24
you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f
30
3fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24.
... — dec 16, 201
3 the download url still available, but spidermonkey not release alone!
... the extension eventually became an evolutionary dead end, as tc
39 chose not to incorporate it into ecmascript proper.
TPS Tests
they must look like: var phases = { "phase1": "profile1", "phase2": "profile2", "phase
3": "profile1" }; between { and } it must be strict json.
... // phase declarations var phases = { "phase1": "profile1", "phase2": "profile2", "phase
3": "profile1" }; // asset list // the initial list of bookmarks to be added to the browser var bookmarks_initial = { "menu": [ { uri: "http://www.google.com", title "google.com", changes: { // these properties are ignored by calls other than bookmarks.modify title: "google" } }, { folder: "foldera" }, { folder: "folderb" } ], "menu/foldera"...
... "menu/folderb": [ { uri: "http://www.yahoo.com", title: "testing yahoo" } ] }; // phase implementation phase('phase1', [ [bookmarks.add, bookmarks_initial], [sync, sync_wipe_server] ]); phase('phase2', [ [sync], [bookmarks.verify, bookmarks_initial], [bookmarks.modify, bookmarks_initial], [bookmarks.verify, bookmarks_after_first_modify], [sync] ]); phase('phase
3', [ [sync], [bookmarks.verify, bookmarks_after_first_modify] ]); the effects of this test file will be: firefox is launched with profile1, the tps extension adds the two bookmarks specified in the bookmarks_initial array, then they are synced to the sync server.
XForms Accessibility
assistive technologies api for xforms is supported starting from firefox
3 (gecko 1.9).
... you can try the following link to test xforms accessibility: visual xforms elements in xhtml document at bugzilla.mozilla.org visual xforms elements in xul document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w
3c's xforms test at w
3.org keyboard navigation issues navigation sequence though xforms spec declares navindex attribute to define the navigation sequence (see 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility architect/strategist chair, ibm accessibility architecture review board) gave some clarification about navindex.
... resources below you will find a list of xforms/accessiblity resources: mozilla accessibility project at mozilla.org xforms specification at w
3.org mozilla xforms project at mozilla.org ui xforms elements references at this site ...
Creating a Python XPCOM component
defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scriptable, uuid(2b
324e9d-a
322-44a7-bd6e-0d8c8
3d9488
3)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
...for example: xpidl.exe -m typelib -w -v -i c:\source\mozilla\obj-i686-pc-mingw
32\dist\idl foo.idl xpidl will then create nsipysimple.xpt, which should be placed correctly (e.g., in the 'components' directory).
... getting started with pyxpcom, part
3 - creating your own components.
XPCOM glue
internal linkage will be unavailable to extension authors in xulrunner 1.9 (firefox
3) because the nonfrozen symbols will not be exported from libxul.
... 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 nspr4.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 nss
3.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 -lnspr4 when building against a xulrunner derived sdk, use: -l/path/to/sdk/lib -l/path/to/xulrunner-bin -wl,-executable_path,/path/to/xulrunner-bin -lxpcomglue_s -lxpcom -lnspr4 where 'xulrunner-bin' i...
... to link against nspr using recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well), you need to link against nss, libnss
3/nss
3.lib in particular.
Building the WebLock UI
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="24" screeny="24"> <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();"/> ...
...note, however, that currently weblock probably does not install cleanly in mozilla firefox due to firefox's newness compared to this book (which was originally written in 200
3).
... « previousnext » copyright (c) 200
3 by doug turner and ian oeschger.
Component Internals
at last count there were over 1
300 interfaces defined in xpidl.
... of those 1
300 interfaces, less than 100 were frozen, which means that a developer is likely to stumble upon useful interfaces that aren't frozen.
... « previousnext » copyright (c) 200
3 by doug turner and ian oeschger.
XPCOM hashtable guide
you can store entries with keys 1, 5, and
3000).
... key type hashkey class strings nsstringhashkey/nscstringhashkey integers nsuint
32hashkey/nsuint64hashkey pointers nsptrhashkey<t> owned interface pointers nsisupportshashkey reference-counted concrete classes nsrefptrhashkey there are a number of more esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you...
... a few examples: a hashtable that maps utf-8 origin names to a dom window - nsinterfacehashtable<nscstringhashkey, nsidomwindow> a hashtable that maps
32 bit integers to floats - nsdatahashtable<nsuint
32hashkey, float> a hashtable that maps nsisupports pointers to reference counted cacheentrys - nsrefptrhashtable<nsisupportshashkey, cacheentry> a hashtable that maps jscontext pointers to a contextinfo struct - nsclasshashtable<nsptrhashkey<jscontext>, contextinfo> a hashset of strings - nsthashtable<nsstringhashkey> hashtable api the hashtable classes all expose the same basic api.
nsIRegistry
try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (
344) profiles/default (5
30) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
...js> rs.getstringutf8(5
30, "directory") // 5
30: key corresponding with profiles/default the output is something like: /home/lion/.mozilla/default/awp8
3kud.slt boo-yah!
...js> rs.setstringutf8(5
30, "directory", "/home/lion/somewhere/else") js> rs.getstringutf8(5
30, "directory") /home/lion/somewhere/else yes!
XPCShell Reference
for instance, assume that you have a file called test.js with the following contents: for (prop in arguments) { print(prop + "=" + arguments[prop]); } entering the following at the command line should produce the following output: $ xpcshell test.js this is a test 0=this 1=is 2=a
3=test xpcshell extensions once you execute xpcshell without a script you'll be at the js> command line.
...an example print(1, 2,
3) will print 1 2
3<newline>.
... original document information author: david bradley <dbradley@netscape.com> last updated date: 17 march 200
3 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license.
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 pruint
32 atype, in astring aurl, in astring askin); deprecated since gecko 2.0 boolean startsoftwareupdate(in astring aurl, [optional] in print
32 aflags); deprecated since gecko 2.0 boolean updateenabled(); deprecated since gecko 2.0 constants retained for backwards compatibility.
... boolean installchrome( in pruint
32 atype, in astring aurl, in astring askin ); parameters atype unused, retained for backwards compatibility.
... boolean startsoftwareupdate( in astring aurl, in print
32 aflags optional ); parameters aurl the url of the add-on.
mozIPlacesAutoComplete
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) method overview void registeropenpage(in nsiuri auri); void unregisteropenpage(in nsiuri auri); constants constant value description match_anywhere 0 match anywhere in each searchable term.
... match_beginning
3 match only the beginning of each search term.
... behavior_title 1 <<
3 search the title of pages.
mozISpellCheckingEngine
method overview void adddirectory(in nsifile dir); boolean check(in wstring word); void getdictionarylist([array, size_is(count)] out wstring dictionaries, out pruint
32 count); void removedirectory(in nsifile dir); void suggest(in wstring word,[array, size_is(count)] out wstring suggestions, out pruint
32 count); attributes attribute type description copyright wstring a string indicating the copyright of the engine.
...void getdictionarylist( [array, size_is(count)] out wstring dictionaries, out pruint
32 count ); parameters dictionaries a list of dictionaries supported by this spell checker.
...void suggest( in wstring word, [array, size_is(count)] out wstring suggestions, out pruint
32 count ); parameters word a word, which is misspelled according to check.
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.
nsIAccessibleHyperLink
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) method overview nsiaccessible getanchor(in long index); note: renamed from getobject in gecko 1.9 nsiuri geturi(in long index); boolean isselected(); obsolete since gecko 1.9 boolean isvalid(); obsolete since gecko 1.9 attributes attribute type description anchorcount long the number of anchors within this hyperlink.
... isselected() obsolete since gecko 1.9 (firefox
3) note: has been replaced by the selected attribute.
... isvalid() obsolete since gecko 1.9 (firefox
3) note: has been replaced by the valid attribute.
nsICache
last changed in gecko 1.9 (firefox
3) inherits from: nsisupports constants constant value description access_none 0 access granted - no descriptor is provided.
... access_read_write
3 access requested - i want to read, but i'm willing to update an existing entry if necessary, or create a new one if none exists.
... store_on_disk_as_file
3 the storage policy of a cache entry determines the device(s) to which it belongs.
nsICacheEntryInfo
expirationtime pruint
32 get the expiration time of the cache entry (in seconds since the epoch).
... lastfetched pruint
32 get the last time the cache entry was opened (in seconds since the epoch).
... lastmodified pruint
32 get the last time the cache entry was modified (in seconds since the epoch).
nsIConsoleService
rts last changed in gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16) implemented by: @mozilla.org/consoleservice;1 as a service: var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); method overview void getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint
32_t count);obsolete since gecko 19 void getmessagearray([optional] out uint
32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessage(in nsiconsolemessage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsoleli...
... void getmessagearray( [array, size_is(count)] out nsiconsolemessage messages, out pruint
32 count ); parameters messages an array of logged messages.
... void getmessagearray( [optional] out pruint
32 count, [retval, array, size_is(count)] out nsiconsolemessage messages ); parameters count the number of messages in the array.
nsICookie
status nscookiestatus holds the p
3p status of cookie.
... status_flagged
3 the cookie was not accepted.
... policy_implicit_consent
3 the site collects identifiable information unless user opts out.
nsICookieStorage
obsolete since gecko 2 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1)this feature is obsolete.
... last changed in gecko 1.7 inherits from: nsisupports method overview void getcookie(in string acookieurl, in voidptr acookiebuffer, in pruint
32ref acookiesize); void setcookie(in string acookieurl, in constvoidptr acookiebuffer, in unsigned long acookiesize); methods getcookie() retrieves a cookie from the browser's persistent cookie store.
... void getcookie( in string acookieurl, in voidptr acookiebuffer, in pruint
32ref acookiesize ); parameters acookieurl url string to look up cookie with..
nsICryptoHMAC
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsikeyobject akeyobject); void reset(); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hashing algorithms.
... constant value description md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1
3 secure hash algorithm 1 sha256 4 secure hash algorithm 256 sha
384 5 secure hash algorithm
384 sha512 6 secure hash algorithm 512 methods finish() completes this hmac object and produces the actual hmac diegest data.
...passing pr_uint
32_max indicates that all data available will be used to update the hash.
nsIDOMEvent
inherits from: nsisupports last changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.1
3) note: as of gecko 16.0, the nsiprivatedomevent interface was merged into this interface.
...see bug 76161
3.
... bubbling_phase
3 the current event phase is the bubbling phase.
nsIDOMGeoPositionError
last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) inherits from: nsisupports attributes attribute type description code short numerical error code; see error constants for a complete list.
... gecko 1.9.2 note the message attribute was removed in gecko 1.9.2 (firefox
3.6).
... timeout
3 a timeout occurred while trying to retrieve location data ...
nsIDOMNSHTMLDocument
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.
3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); ...
...void routeevent( in nsidomevent evt ); parameters evt write() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) void write( [optional] in domstring text ); parameters text the string to write to the document.
... writeln() obsolete since gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) void writeln( [optional] in domstring text ); parameters text the string to write to the document.
nsIDOMOfflineResourceList
last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) inherits from: nsisupports method overview void mozadd(in domstring uri); boolean mozhasitem(in domstring uri); domstring mozitem(in unsigned long index); void mozremove(in domstring uri); void swapcache(); void update(); attributes attribute type description mozitems ...
... downloading
3 resources are being downloaded to be added to the cache.
... note: this method is deprecated in firefox
3.5; you should instead access the list directly using the items attribute.
nsIDictionary
66 introduced gecko 1.0 obsolete gecko 1.9.1 inherits from: nsisummary last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: this interface was removed in firefox
3.5; use dict.jsm instead.
...method overview boolean haskey(in string key); void getkeys(out pruint
32 count, [retval, array, size_is(count)] out string keys); nsisupports getvalue(in string key); void setvalue(in string key, in nsisupports value); nsisupports deletevalue(in string key); void clear(); methods haskey() check if a given key is present in the dictionary.
... void getkeys( out pruint
32 count, [retval, array, size_is(count)] out string keys ); return value array of all keys, unsorted.
nsIDownloadProgressListener
inherits from: nsisupports last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) to use simply implement this interface in your code, then call nsidownloadmanager.addlistener() to start listening.
... onlocationchange() obsolete since gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) void onlocationchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads.
... onstatuschange() obsolete since gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) called when the status of a download request has changed.
nsIGeolocationProvider
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) this must be called on the main thread interface provides location information to the nsgeolocator via the nsidomgeolocationcallback interface.
...method overview boolean isready(); obsolete since gecko 1.9.2 void shutdown(); void startup(); void watch(in nsigeolocationupdate callback); methods isready() obsolete since gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) reports whether or not the device is ready and has a position.
... see also using geolocation w
3c geolocation specification ...
nsIHTMLEditor
constants constant value description eleft 0 ecenter 1 eright 2 ejustify
3 methods adddefaultproperty() registers a default style property with the editor.
... used primarily to supply new element for various insert element dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 6
3.
... ignorespuriousdragevent() used to suppress spurious drag/drop events to workaround bug 5070
3.
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 pruint
32 aactivitytype, in pruint
32 aactivitysubtype, in prtime atimestamp, in pruint64 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_start 0x500
3 the http response has started to arrive.
...void observeactivity( in nsisupports ahttpchannel, in pruint
32 aactivitytype, in pruint
32 aactivitysubtype, in prtime atimestamp, in pruint64 aextrasizedata, in acstring aextrastringdata ); parameters ahttpchannel the nsihttpchannel on which the activity occurred.
nsILoginInfo
last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) inherits from: nsisupports implemented by: @mozilla.org/login-manager/logininfo;1.
...a port number (":12
3") may be appended.
... a blank value indicates the login was stored before bug
36049
3 was fixed.
nsILoginManagerPrompter
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) implemented by: @mozilla.org/login-manager/prompter;1.
...s.classes["@mozilla.org/login-manager/prompter;1"] .getservice(components.interfaces.nsiloginmanagerprompter); method overview void init(in nsidomwindow awindow); void prompttochangepassword(in nsilogininfo aoldlogin, in nsilogininfo anewlogin); void prompttochangepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint
32 count, in nsilogininfo anewlogin); void prompttosavepassword(in nsilogininfo alogin); methods init() initialize the prompter.
... void prompttochangepasswordwithusernames( [array, size_is(count)] in nsilogininfo logins, in pruint
32 count, in nsilogininfo anewlogin ); parameters logins an array of existing logins.
nsIMimeConverter
unsigned long getuint
32property(in string propertyname); parameters propertyname the name of the property to retrieve.
... thunderbird stored uint
32 properties (not a complete list): indexed used for spotlight integration on osx.
... qpencoderinit() void setuint
32property(in string propertyname, in unsigned long propertyval); parameters propertyname the name of the property to set.
nsIMsgFolder
ow msgwindow); void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); boolean hasmsgoffline(in nsmsgkey msgkey); nsiinputstream getofflinefilestream(in nsmsgkey msgkey, out pruint
32 offset, out pruint
32 size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); void enablenotifications(in long notificationtype, in boolean enable, in bo...
...see bug 4
36051.
... getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); getmessageheader() nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); shouldstoremsgoffline() boolean shouldstoremsgoffline(in nsmsgkey msgkey); hasmsgoffline() boolean hasmsgoffline(in nsmsgkey msgkey); getofflinefilestream() nsiinputstream getofflinefilestream(in nsmsgkey msgkey, out pruint
32 offset, out pruint
32 size); downloadmessagesforoffline() void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); getchildwithuri() nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); down...
nsIMsgIncomingServer
inherits from: nsisupports last changed in gecko 1.9.1 (firefox
3.5 / thunderbird
3.0 / seamonkey 2.0) method overview void clearallvalues(); void cleartemporaryreturnreceiptsfilter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilterlist filterlist); void configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 void displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in ...
... type acstring protocol type, that is "pop
3", "imap", "nntp", "none", and so on.
... usesecauth boolean valid boolean constants constant value description defaultsocket 0 trytls 1 alwaysusetls 2 usessl
3 keepdups 0 deletedups 1 movedupstotrash 2 markdupsread
3 methods clearallvalues() this is really dangerous.
nsINetworkLinkService
as of gecko 28.0 android support is available again, see bug 9
39680.
... link_type_wifi
3 a connection via a wifi access point (ieee802.11).
... link_type_
3g 6 a '
3g' mobile connection (for example, umts, cdma).
nsIOutputStream
example writesegments() example // copy data from a string to a stream static ns_method copysegment(nsiinputstream* astream, void* aclosure, char* atosegment, pruint
32 afromoffset, pruint
32 acount, pruint
32* areadcount) { // afromsegment now contains acount bytes of data.
... nsacstring* pbuf = (nsacstring*) aclosure; const char* data; pruint
32 len = ns_cstringgetdata(&data); data += afromoffset; len -= afromoffset; if (len > acount) len = acount; memcpy(atosegment, data, len); // indicate that we have copied len bytes to the segment *areadcount = len; return ns_ok; } // write the contents of asource into astream, using writesegments // to avoid intermediate buffer copies.
... nsresult writestream(const nsacstring& asource, nsiinputstream* astream) { pruint
32 num; return astream->writesegments(copysegment, (void*) &asource, asource.length(), &num); } remarks this interface was frozen for gecko 1.0.
Component; nsIPrefBranch
constants constant value description pref_invalid 0 long pref_string
32 long data type.
... note: as of firefox
3.0, this function has not yet been implemented.
...there are
3 approaches which have been implemented in an attempt to avoid these situations: the nsprefbranch object supports nsisupportsweakreference.
nsIPrinterEnumerator
inherits from: nsisupports last changed in gecko 1.9 (firefox
3) method overview void displaypropertiesdlg(in wstring aprinter, in nsiprintsettings aprintsettings); void enumerateprinters(out pruint
32 acount,[retval, array, size_is(acount)] out wstring aresult); obsolete since gecko 1.9 void initprintsettingsfromprinter(in wstring aprintername, in nsiprintsettings aprintsettings); attributes attribute type description defaultprintername wstring the name of the system default printer.
... methods displaypropertiesdlg() void displaypropertiesdlg( in wstring aprinter, in nsiprintsettings aprintsettings ); parameters aprinter aprintsettings enumerateprinters() obsolete since gecko 1.9 (firefox
3) returns an array of the names of all installed printers.
... void enumerateprinters( out pruint
32 acount, [retval, array, size_is(acount)] out wstring aresult ); parameters acount returns number of printers returned.
nsIPushMessage
inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.4
3) nsipushmessage is the subject of a push-message observer notification.
... method overview domstring text(); jsval json(); void binary([optional] out uint
32_t datalen, [array, retval, size_is(datalen)] out uint8_t data); methods text() extracts the message data as a utf-8 text string.
... void binary( [optional] out uint
32_t datalen, [array, retval, size_is(datalen)] out uint8_t data ); parameters datalen the data size.
nsIPushSubscription
inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.4
3) each subscription is associated with a unique url generated by the push service.
... method overview void getkey(in domstring name, [optional] out uint
32_t keylen, [array, size_is(keylen), retval] out uint8_t key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription url.
... void getkey( in domstring name, [optional] out uint
32_t keylen, [array, size_is(keylen), retval] out uint8_t key ); parameters name the encryption key name.
nsISSLErrorListener
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) note: the recipient of this ssl status notification should not block.
... method overview boolean notifysslerror(in nsiinterfacerequestor socketinfo, in print
32 error, in autf8string targetsite); methods notifysslerror() called in case of an ssl error.
... boolean notifysslerror( in nsiinterfacerequestor socketinfo, in print
32 error, in autf8string targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection.
nsISessionStore
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) in versions of firefox prior to
3.5, the user preference browser.sessionstore.enabled must be true for these calls to be successful.
... starting in firefox
3.5, this preference is no longer used.
...this outermost or root window can also be obtained from the list returned by nsiwindowmediator; see example #
3 in working_with_windows_in_chrome_code.
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: rfc
3490: internationalizing domain names in applications (idna) rfc
3986: uniform resource identifier (uri): generic syntax rfc
3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri.
...other parts are url-escaped per the rules of rfc
3986.
...the scheme is restricted to the us-ascii charset per rfc
3986.
nsIWinAppHelper
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) implemented by: @mozilla.org/xre/app-info;1.
... methods fixreg() obsolete since gecko 1.9 (firefox
3) invokes helper.exe with the /fixreg parameter.
... postupdate() obsolete since gecko 1.9.2 (firefox
3.6 / thunderbird
3.1 / fennec 1.0) invokes helper.exe with the /postupdate parameter.
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.
...obsolete since gecko 1.8 hklm
3 hkey_local_machine.
... restorefilesettings() obsolete since gecko 1.9 (firefox
3) restores system settings to what they were before firefox modified them.
nsIWritablePropertyBag2
overview void setpropertyasacstring(in astring prop, in acstring value); void setpropertyasastring(in astring prop, in astring value); void setpropertyasautf8string(in astring prop, in autf8string value); void setpropertyasbool(in astring prop, in boolean value); void setpropertyasdouble(in astring prop, in double value); void setpropertyasint
32(in astring prop, in print
32 value); void setpropertyasint64(in astring prop, in print64 value); void setpropertyasinterface(in astring prop, in nsisupports value); void setpropertyasuint
32(in astring prop, in pruint
32 value); void setpropertyasuint64(in astring prop, in pruint64 value); methods setpropertyasacstring() void setpropertyasacstring( in ast...
... setpropertyasint
32() void setpropertyasint
32( in astring prop, in print
32 value ); parameters prop property to set the value of.
... setpropertyasuint
32() void setpropertyasuint
32( in astring prop, in pruint
32 value ); parameters prop property to set the value of.
nsIXULAppInfo
platformversion acstring the version of gecko or xulrunner platform, for example "1.8.1.19" or "1.9.
3pre".
... in "firefox
3.7 alpha 1" the application version is "
3.7a1pre" while the platform version is "1.9.
3pre" read only.
... version acstring the xul application's version, for example "0.8.0+" or "
3.7a1pre".
nsIXULRuntime
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) implemented by: @mozilla.org/xre/app-info;1.
... the result takes the form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc
3.
... process_type_ipdlunittest
3 ipdl unit testing subprocess.
nsIXULTemplateQueryProcessor
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox
3) a query processor takes a template query and generates results for it given a datasource and a reference point.
...method overview void addbinding(in nsidomnode arulenode, in nsiatom avar, in nsiatom aref, in astring aexpr); print
32 compareresults(in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asorthints); nsisupports compilequery(in nsixultemplatebuilder abuilder, in nsidomnode aquery, in nsiatom arefvariable, in nsiatom amembervariable); void done(); nsisimpleenumerator generateresults(in nsisupports adatasource, in nsixultemplateresult aref, in nsisupports aquery); ...
...print
32 compareresults( in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asorthints ); parameters aleft the left result to compare.
nsIXmlRpcFault
obsolete since gecko 1.9 (firefox
3)this feature is obsolete.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void init(in print
32 faultcode, in string faultsring); string tostring(); attributes attribute type description faultcode print
32 read only.
... methods init() void getdata( in print
32 faultcode, in string faultstring ); parameters faultcode tostring() string tostring(); ...
nsIZipReader
manifestentriescount pruint
32 the number of entries in the manifest.
... init() obsolete since gecko 1.9 (firefox
3) initializes a zip reader after construction.
...uld return true on `entry instanceof ci.nsizipentry` console.log('entrypointer', entrypointer); /* console output * "entrypointer" "bootstrap.js" scratchpad/1:18 */ console.info('entry', entry); /* console output * "entry" xpcwrappednative_nohelper { queryinterface: queryinterface(), compression: getter, size: getter, realsize: getter, crc
32: getter, isdirectory: getter, lastmodifiedtime: getter, issynthetic: getter, permissions: getter, compression: 8 } scratchpad/1:19 */ if (!entry.isdirectory) { var inputstream = zr.getinputstream(entrypointer); reusablestreaminstance.init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsize); console.log('con...
NS_CStringAppendData
#include "nsstringapi.h" nsresult ns_cstringappenddata( nsacstring& astring, const char* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsacstring instance to be modified.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
NS_CStringGetData
#include "nsstringapi.h" pruint
32 ns_cstringgetdata( const nsacstring& astring, const char** adata, prbool* aterminated = nsnull ); parameters astring [in] a nsacstring instance to inspect.
...pruint
32 countchar(const nsacstring& str, char c) { const char* data; pruint
32 len = ns_cstringgetdata(str, &data); pruint
32 count = 0; for (pruint
32 i = 0; i < len; ++i) { if (data[i] == c) ++count; } return count; } history this function was finalized for mozilla 1.7.
... see bug 2
3912
3 for details.
NS_CStringGetMutableData
#include "nsstringapi.h" pruint
32 ns_cstringgetmutabledata( nsacstring& astring, pruint
32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify.
... adatalength [in] the number of characters to resize the string's internal buffer to or pr_uint
32_max to return the buffer as-is.
...example // convert any uppercase ascii letters to lowercase void tolowercase(nscstring &str) { char *iter; pruint
32 len = ns_cstringgetmutabledata(str, pr_uint
32_max, &iter); char *end = iter + len; while (iter != end) { char c = *iter; if (c >= 'a' && c <= 'z') *iter = c + ('a' - 'a'); ++iter; } } history this function was finalized for mozilla 1.8.
NS_CStringInsertData
#include "nsstringapi.h" nsresult ns_cstringinsertdata( nsacstring& astring, pruint
32 aoffset, const char* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsacstring instance to be modified.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
NS_CStringSetData
#include "nsstringapi.h" nsresult ns_cstringsetdata( nsacstring& astring, const char* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsacstring instance to modify.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
NS_StringAppendData
#include "nsstringapi.h" nsresult ns_stringappenddata( nsastring& astring, const prunichar* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsastring instance to be modified.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
NS_StringGetData
#include "nsstringapi.h" pruint
32 ns_stringgetdata( const nsastring& astring, const prunichar** adata, prbool* aterminated ); parameters astring [in] a nsastring instance to inspect.
... example code pruint
32 countchar(const nsastring& str, prunichar c) { const prunichar* data; pruint
32 len = ns_stringgetdata(str, &data); pruint
32 count = 0; for (pruint
32 i = 0; i < len; ++i) { if (data[i] == c) ++count; } return count; } history this function was frozen for mozilla 1.7.
... see bug 2
3912
3 for details.
NS_StringInsertData
#include "nsstringapi.h" nsresult ns_stringinsertdata( nsacstring& astring, pruint
32 aoffset, const prunichar* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsacstring instance to be modified.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
NS_StringSetData
#include "nsstringapi.h" nsresult ns_stringsetdata( nsastring& astring, const prunichar* adata, pruint
32 adatalength = pr_uint
32_max ); parameters astring [in] a nsastring instance to modify.
...if equal to pr_uint
32_max, then adata is assumed to be null-terminated.
...see bug 2
3912
3 for details.
nsMsgNavigationType
last changed in gecko 1.9 (firefox
3) constants name value description firstmessage 1 go to the first message in the view.
... previousmessage
3 go to the previous message in the view.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 1
3 back 15 go back to the previous visited message forward 16 go forward to the previous visited message firstflagged 17 nextflagged 18 previousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 2
3 ...
Setting HTTP request headers
(this variable could have been named anything though.) the setrequestheader method takes
3 parameters.
...it takes
3 parameters (as we've shown in the example code above).
...catmgr = 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("{9cf5f
3df-2505-42dd-9094-c16
31bd1be1c}"), 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; ...
Working with Multiple Versions of Interfaces
the problem in this short note we illustrate how one can update an xpcom module in order for it to work in both firefox 2 and firefox
3, even if the interfaces have changed in the interim.
...unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c67-a1d
3-44f2-9cab-cdaa
31b68046" whereas, inside firefox 2, the iid it happens to know about is: "66
3ca4a8-d219-4000-925d-d8f66406b626".
...we first dredge out the old interface identifiers from our yea olde firefox 1.5 sdk: static const nsiid iar_iid_old = { 0x66
3ca4a8, 0xd219, 0x4000, { 0x92, 0x5d, 0xd8, 0xf6, 0x64, 0x06, 0xb6, 0x26 }}; static const nsiid iad_iid_old = {0x8781fc88, 0x
355f, 0x44
39, { 0x88, 0x1f, 0x65, 0x04, 0xa0, 0xa1, 0xce, 0xb6 }}; then follow the recipe.
XPCOM category image-sniffing-services
in versions of firefox prior to firefox
3, extensions could add decoders for new image types.
...in firefox
3, a new xpcom category was added in bug
391667 to allow "third-party" xpcom components to identify images based on their content.
...see bug 81
3787 - remove support for image-sniffing-services.
Xray vision
so, in gecko
31 and
32 we've added xray support for most javascript built-in objects.
...property redefined in the prototype:"); console.log(sandbox.me.tosource()); // -> "({firstname:"joe", address:{street:"main street"}, lastname:"smith"})" // 2) trying to access properties 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.l...
...e is not a function // now with waived xrays console.log("now with waived xrays"); console.log("1) property redefined in the prototype:"); console.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" ...
Address Book examples
there are
3 address book autocomplete widgets: "mydomain" - use to autocomplete a domain for an email identity, e.g.
... ldap autocomplete ldap autocomplete still uses the xpfe interfaces, it is planned (bug 4522
32) to move this over to the toolkit interfaces at some stage.
... click here for a addon demonstrating autocomplete with ldap and addrbook working with both thunderbird 2 and thunderbird
3.
Creating a gloda message query
this content covers features introduced in thunderbird
3 this page describes how to programmatically create a message query using gloda, thunderbird's global database.
... query.tags(tag1, tag2, tag
3, ...): add the constraint that the message must have one of the provided nsimsgtag tags applied.
...from https://developer.mozilla.org/docs/mozilla/thunderbird/thunderbird_extensions/demo_addon, demo
3, it seems that the attributename given in these files is the constraintname to be used (e.g.
MailNews Filters
e.g., imap, pop
3.
...in the case of pop
3, filter execution is synchronous.
... finally, add protocol-specific code to apply your filter action in the various applyfilterhit methods imap pop
3 news and "after the fact" since seamonkey and thunderbird share the filter code, you will also need to update the seamonkey .dtd and .property files.
Adding items to the Folder Pane
that container will have
3 child-items, the numbers 1, 2, and
3.
...first, our "numbers" container looks like this: let containerrow = { _numbers:
3, id: "numbers-main-container", text: "numbers", level: 0, open: false, _children: null, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; }, getproperties: function gne_getprops(...
...) { // put your css attributes here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and
3) are copies of the following prototype: function numberrow(anumber) { this._number = anumber; } numberrow.prototype = { get id() { return "numbers-child-row-" + this._number; }, get text() { return this._number; }, level: 1, open: false, children: [], getproperties: function gne_kid_getprops() {}, // no-op command: function gne_kid_comm...
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird
3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and
3 in the same xpi if our extension needs to support thunderbird 2 a...
...nd
3 we need to make custom overlays for each version.
... this can be reached by adding these lines to the chrome.manifest file: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay-tb2.xul appversion<
3.0 overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay-tb
3.xul appversion=>
3.0 than we need two overlay xul files with content from examples above.
Get Thunderbird version
on thunderbird version
3.0b
3pre and later, you can use the following snippet to get the thunderbird version.
... (version
3.0b
3pre was the first build to include steel.) var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"].getservice(components.interfaces.nsiversioncomparator); if (versionchecker.compare(application.version, "
3.0b4") >= 0) // code for >=
3.0b4 else // code for <
3.0b4 for versions prior to
3.0b
3pre, you can use something like this: var version; if ( "@mozilla.org/xre/app-info;1" in components.classes ) version = components.classes["@mozilla.org/xre/app-info; 1"].getservice(components.interfaces.nsixulappinfo).version; else version = components.classes["@mozilla.org/preferences-service; 1"].getservice(components.interfaces.nsiprefbranch).getcharpref ("app.version"); var versionchecker = components.classes["@mozilla.org/xpcom/version- compar...
...ator;1"].getservice(components.interfaces.nsiversioncomparator); if ( versionchecker.compare( version, "
3.0b
3" ) >= 0 ) // code for >=
3.0b
3 else // code for <
3.0b
3 ...
Working with windows in chrome code
window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example
3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places.
... cons: only works in firefox
3 or newer.
... cons: only works in firefox
3 or newer.
Using Objective-C from js-ctypes
in this example, objc_msgsend is used in
3 ways.
... */ // struct is seen here in docs: http://clang.llvm.org/docs/block-abi-apple.html var block_literal_1 = ctypes.structtype('block_literal_1', [ { isa: ctypes.voidptr_t }, { flags: ctypes.int
32_t }, { reserved: ctypes.int
32_t }, { invoke: ctypes.voidptr_t }, { descriptor: block_descriptor_1.ptr } ]); var block_const = { block_has_copy_dispose: 1 << 25, block_has_ctor: 1 << 26, block_is_global: 1 << 28, block_has_stret: 1 << 29, block_has_signature: 1 <<
30 }; // based on work from here: https://github.com/trueinteractions/tint2/blob/f6ce18b16ada165b98b07869
314da...
...d1d7bee0252/modules/bridge/core.js#l
370-l
394 var bl = block_literal_1(); // set the class of the instance bl.isa = _nsconcreteglobalblock; // global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block literal bl.descriptor = desc.address(); return bl; } an example of this function in use can be seen here: _ff-addon-snippet-objc_monitorevents - shows how to monitor and block mouse and key events on mac os x ...
Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int
32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int
32_t }, { y: ctypes.int
32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int
32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int
32_t }, { y: ctypes.int
32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int
32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int
32_t(10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int
32_t }, { y: ctypes.int
32_t }]) let p = point(10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the result will be as per the following: ctypes.int
32_t ctypes.structtype("point", [{ "x": ctypes.int
32_t }, { "y": ctypes.int
32_t }]) ctypes.structtype("point", [{ "x": ctypes.int
32_t }, { "y": ctypes.int
32_t }]).ptr ...
ABI
http://en.wikipedia.org/wiki/application_binary_interface os specific windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b
372w95.aspx details with respect to js-ctypes this explains how to use it in the js-ctypes scope.
... ctypes.thiscall_abi more information is available at bugzilla :: 5525
33.
... os specific win
32 and os2 callbacks in js-ctypes under these operating systems use a different abi than regular function declarations.
Constants - Plugins
nperr_invalid_functable_error
3 function table invalid.
... nperr_stream_not_seekable 1
3 seekable stream expected.
... npvers_has_xpconnect_scripting 1
3 plug-in is scriptable using xpconnect.
All keyboard shortcuts - Firefox Developer Tools
sole ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt + shift + i open scratchpad shift + f4 shift + f4 * shift + f4 open webide shift + f8 shift + f8 * shift + f8 storage inspector shift + f9 shift + f9 * shift + f9 open debugger
3 ctrl + shift + z cmd + opt + z ctrl + shift + z 1.
...
3.
... from firefox
33 onwards, the key binding preference is exposed in the editor preferences section of the developer tools settings, and you can set it there instead of about:config.
Aggregate view - Firefox Developer Tools
so, for example, the first entry says that: 4,8
32,592 bytes, comprising 9
3% 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.
... let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 9
3% of the total heap snapshot was allocated in functions called from "alloc.js", line
35 (our initial createtoolbars() call).
... so in the example above, we can see that we made 4002 allocations, accounting for 89% of the total heap, in createtoolbarbutton(), at alloc.js line 9, position 2
3: that is, the exact point where we create the <span> elements.
UI Tour - Firefox Developer Tools
you can toggle the
3-pane view of the inspector.
... the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the
3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
... the following image shows
3-pane mode: as you can see, the css pane has moved into the center of the inspector.
Flame Chart - Firefox Developer Tools
the screenshot above covers the period from 14
35ms to a little past 1465ms.
...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() // 1
345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 10
3 -> 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 t...
...if you counted them all, the call tree view tells us that you'd see 25
3 of them.
Responsive Design Mode - Firefox Developer Tools
initially, it's set to
320 x 480 pixels.
... dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g,
3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... selection download speed upload speed minimum latency (ms) gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s
300 good 2g 450 kb/s 150 kb/s 150 regular
3g 750 kb/s 250 kb/s 100 good
3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s
3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi
30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no throttling": ...
Web Audio Editor - Firefox Developer Tools
opening the web audio editor the web audio editor is not enabled by default in firefox
32.
... connections to audioparams displaying connections to audioparams is new in firefox
34.
... bypassing nodes new in firefox
38.
Console messages - Firefox Developer Tools
css note: css warnings and reflow messages are not shown by default, for performance reasons (see bug 145214
3).
... bug 86
3874 is the meta-bug for logging relevant security messages to the web console.
...() 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 4
3, but removed in firefox 56.
AesGcmParams - Web APIs
for details of how to supply appropriate values for this parameter, see the specification for aes-gcm: nist sp800-
38d, in particular section 5.2.1.1 on input data.
... according to the web crypto specification this must have one of the following values:
32, 64, 96, 104, 112, 120, or 128.
... the aes-gcm specification recommends that it should be 96, 104, 112, 120 or 128, although
32 or 64 bits may be acceptable in some applications: appendix c of the specification provides additional guidance here.
AnalyserNode.AnalyserNode() - Web APIs
the default is -
30.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanalysernode() constructorchrome full support 55edge full support ≤79firefox full support 5
3ie no support noopera full support 42safari full support 6webview android full support 55chrome android full support 55firefox android full support ...
... 5
3opera android full support 42safari ios full support 6samsung internet android full support 6.0legend full support full support no support no support ...
AudioBuffer() - Web APIs
the default is 1, and all user agents are required to support at least
32 channels.
...ung internetaudiobuffer() constructorchrome full support 55notes full support 55notes notes the context parameter was supported up until version 57, but has now been removed.edge full support ≤79firefox full support 5
3ie no support noopera full support 42notes full support 42notes notes the context parameter was supported up until version 44, but has now been removed.safari ?
... notes the context parameter was supported up until version 57, but has now been removed.chrome android full support 55notes full support 55notes notes the context parameter was supported up until version 57, but has now been removed.firefox android full support 5
3opera android full support 42notes full support 42notes notes the context parameter was supported up until version 44, but has now been removed.safari ios ?
AudioBuffer.copyFromChannel() - Web APIs
the copyfromchannel() method of the audiobuffer interface copies the audio sample data from the specified channel of the audiobuffer to a specified float
32array.
... syntax myarraybuffer.copyfromchannel(destination, channelnumber, startinchannel); parameters destination a float
32array to copy the channel's samples to.
... var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var anotherarray = new float
32array(length); myarraybuffer.copyfromchannel(anotherarray, 1, 0); specification specification status comment web audio apithe definition of 'copyfromchannel' in that specification.
AudioBuffer - Web APIs
the buffer contains data in the following format: non-interleaved ieee754
32-bit linear pcm with a nominal range between -1 and +1, that is,
32bits floating point buffer, with each samples between -1.0 and 1.0.
... methods audiobuffer.getchanneldata() returns a float
32array containing the pcm data associated with the channel, defined by the channel parameter (with 0 representing the first channel).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate *
3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual array that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < myarraybuffer.length; i++) { // math.random() is in [0; 1.0] // audio...
AudioListener.dopplerFactor - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.forwardX - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.forwardY - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.forwardZ - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.setOrientation() - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.upX - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.upY - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener.upZ - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioListener - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
AudioNode - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#...
...f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
...after a design review in october 201
3, it was decided to add constructors because they have numerous benefits over factory methods.
AudioParam.cancelAndHoldAtTime() - Web APIs
— 4
3alternate 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 4
3 full support 4
3 no support ?
... — 4
3alternate 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 ?
AudioParam.setTargetAtTime() - Web APIs
the decay rate as defined by the timeconstant parameter is exponential; therefore the value will never reach target completely, but after each timestep of length timeconstant, the value will have approached target by another 1-e-1≈6
3.2%1 - e^{-1} \approx 6
3.2%.
... choosing a good timeconstant as mentioned above, the value changes exponentially, with each timeconstant bringing you another 6
3.2% toward the target value.
... time since starttime value 0 * timeconstant 0% 0.5 * timeconstant
39.
3% 1 * timeconstant 6
3.2% 2 * timeconstant 86.5%
3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.
3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these bu...
AudioParam.value - Web APIs
usage notes value precision and variation the data type used internally to store value is a single-precision (
32-bit) floating point number, while javascript uses 64-bit double-precision floating point numbers.
... consider this example: const source = new audiobuffersourcenode(...); const rate = 5.
3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the
32-bit floating-point number closest to 5.
3, which yields 5.
3000001907
3486
3.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(5.
3); source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); in this case, the log output will be true.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least
37 bytes, containing the following fields: rpidhash (
32 bytes) - a sha256 hash of the relying party id that was seen by the browser.
... bit 6, attested credential data (at) - if set, attestedcredentialdata will immediately follow the first
37 bytes of this authenticatordata.
...extension data will follow attestedcredentialdata if it is present, or will immediatelly follow the first
37 bytes of the authenticatordata if no attestedcredentialdata is present.
BiquadFilterNode() - Web APIs
the defaults for all are as follows: q: 1 detune: 0 frequency:
350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff.
...roidsafari on iossamsung internetbiquadfilternode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie no support noopera full support 42notes full support 42notes notes before opera 46, the default values were not supported.safari ?
... full support 55notes notes before version 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 5
3opera android full support 42notes full support 42notes notes before opera 46, the default values were not supported.safari ios ?
Bluetooth.requestDevice() - Web APIs
both 16-bit service ids 0x1802 and 0x180
3.
...a proprietary 128-bit uuid service c48e6067-5295-48d
3-8d5c-0
395f61792b1.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1802, 0x180
3]}, {services: ['c48e6067-5295-48d
3-8d5c-0
395f61792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
ByteLengthQueuingStrategy - Web APIs
to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
...to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
...to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
CSSCounterStyleRule - Web APIs
; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="...
...50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
... specifications specification status comment css counter styles level
3the definition of 'csscounterstylerule' in that specification.
CSS Painting API - Web APIs
we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.
3; const blockwidth = size.width * 0.
33; const blockheight = size.height * 0.85; const thecolor = props.get( '--boxcolor' ); const stroketype = args[0].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewidth ) { ctx.linewidth = strokewidth; } else { ctx.linewidth = 1.0; } if ( stroketype === 'stroke' ) { ctx.fillstyle = 'transpar...
...to( 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.stroke(); } } }); we then include the paintworklet: <ul> <li>item 1</li> <li>item 2</li> <li>item
3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 1
3</li> <li>item 14</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%, 60%, 1.0); background-image: paint(hollowhighlights, filled,
3px); } li:nth-of-type(
3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
CanvasRenderingContext2D.addHitRegion() - Web APIs
id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(1
30, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas.
...able-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(1
30, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var ...
...see https://github.com/whatwg/html/issues/
3407 for more information.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 2
30, y:
30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(start.x, start.y, 5, 0, 2 * math.pi); // start point ctx.arc(end.x, end.y, 5, 0, 2 * math.pi); ...
... html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (
30,
30).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(
30,
30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f
374e9c6fc.jpg" width="
300" height="227"> </div> javascript the source image is taken from the coordinates (
33, 71), with a width of 104 and a height of 124.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image,
33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size
300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f
374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as
300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0,...
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the line begins at (
30, 50) and ends at (150, 100).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(
30, 50); // move the pen to (
30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 1
30); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 1
30); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(2
30,
30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(2
30,
30, 5, 0, 2 * math.pi); ctx.fill(); result in this example, the control point is red and the start and end points...
...the control point is placed at (2
30, 150).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(2
30, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 140, a height of
30.
...its vertical center is at (60 +
30 / 2), or 75.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140,
30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140,
30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.scale() - Web APIs
the transformation matrix scales it by 9x horizontally and by
3x vertically.
...since its specified corner is (10, 10), its rendered corner becomes (90,
30).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9,
3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray.
CanvasRenderingContext2D - Web APIs
basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my-house" width="
300" height="
300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like.
... this code draws a house: // set line width ctx.linewidth = 10; // wall ctx.strokerect(75, 140, 150, 110); // door ctx.fillrect(1
30, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas.
... non-standard apis blink and webkit most of these apis are deprecated and were removed shortly after chrome
36.
CharacterData - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1
30" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
331" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its par...
... document object model (dom) level
3 core specificationthe definition of 'characterdata' in that specification.
CompositionEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="2
31" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
311" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor compositionevent() ...
... working draft document object model (dom) level
3 events specificationthe definition of 'compositionevent' in that specification.
CountQueuingStrategy - Web APIs
to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
...to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
...to change preferences in firefox, visit about:config.opera android full support 4
3safari ios ?
Crypto.getRandomValues() - Web APIs
syntax typedarray = cryptoobj.getrandomvalues(typedarray); parameters typedarray an integer-based typedarray, that is an int8array, a uint8array, an int16array, a uint16array, an int
32array, or a uint
32array.
... domexception (name: quotaexceedederror) the requested length exceeds 65,5
36 bytes.
... examples /* assuming that window.crypto.getrandomvalues is available */ var array = new uint
32array(10); window.crypto.getrandomvalues(array); console.log("your lucky numbers:"); for (var i = 0; i < array.length; i++) { console.log(array[i]); } specification specification status comment web cryptography api recommendation initial definition ...
DOMException - Web APIs
(legacy code value:
3 and legacy constant name: hierarchy_request_err) wrongdocumenterror the object is in the wrong document.
...(legacy code value: 1
3 and legacy constant name: invalid_modification_err) namespaceerror the operation is not allowed by namespaces in xml.
...(legacy code value: 2
3 and legacy constant name: timeout_err) invalidnodetypeerror the node is incorrect or has an incorrect ancestor for this operation.
DOMPointReadOnly() - Web APIs
the dompointreadonly() constructor returns a new dompointreadonly object representing a point in 2d or
3d space, optionally with perspective, whose values cannot be altered by script code.
... examples the following code demonstrates creating both 2d and
3d points.
... var point2d = new dompointreadonly(50, 25); var point
3d = new dompointreadonly(50, 0, 10); var perspectivepoint
3d = new dompointreadonly(50, 50, 25, 0.5); specifications specification status comment geometry interfaces module level 1the definition of 'dompointreadonly' in that specification.
DirectoryReaderSync - Web APIs
about this document this document was last updated on march 2, 2012 and follows the w
3c specifications (working draft) drafted on april 19, 2011.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectoryreadersync non-standardchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support 79prefixed full support 79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie ...
... no support noopera no support nosafari no support nowebview android full support
37prefixed full support
37prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support ...
Document.evaluate() - Web APIs
while using document.evaluate() works in ff2, in ff
3 one must use somexmldoc.evaluate() if evaluating against something other than the current document.
... boolean_type
3 a result set containing a single boolean value.
... specifications specification status comment document object model (dom) level
3 xpath specificationthe definition of 'document.evaluate' in that specification.
Document.getElementById() - Web APIs
example <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <div id="parent-id"> <p>hello word1</p> <p id="test1">hello word2</p> <p>hello word
3</p> <p>hello word4</p> </div> <script> var parentdom = document.getelementbyid('parent-id'); var test1 = parentdom.getelementbyid('test1'); //throw error //uncaught typeerror: parentdom.getelementbyid is not a function </script> </body> </html> if there is no element with the given id, this function returns null.
... obsolete supersede dom 1 document object model (dom) level
3 core specificationthe definition of 'getelementbyid' in that specification.
... living standard intend to supersede dom
3 ...
Document.lastModified - Web APIs
here is a possible example of how to show an alert message when the page changes (see also: javascript cookies api): if (date.parse(document.lastmodified) > parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { document.cookie = "last_modif=" + date.now() + "; expires=fri,
31 dec 9999 2
3:59:59 gmt; path=" + location.pathname; alert("this page has changed!"); } …the same example, but skipping the first visit: var nlastvisit = parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), nlastmodif = date.parse(document.lastmodified); if (isnan(nlastvisit) || nlastmodif > nlastvisit) { document.cookie = "last_modif=" + dat...
...e.now() + "; expires=fri,
31 dec 9999 2
3:59:59 gmt; path=" + location.pathname; if (isfinite(nlastvisit)) { alert("this page has been changed!"); } } note: webkit returns the time string in utc; gecko and internet explorer return a time in the local timezone.
... (see: bug 4
36
3 – 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.
DocumentFragment - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
346" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() cre...
... document object model (dom) level
3 core specificationthe definition of 'documentfragment' in that specification.
EffectTiming.fill - Web APIs
</div> css content .main { width:
300px; height:
300px; border: 1px solid black; } .button { cursor: pointer; width:
300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position: relative; text-align:...
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #22
33ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
...var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration:
3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations.
Element.getAttributeNS() - Web APIs
<svg xmlns="http://www.w
3.org/2000/svg" xmlns:test="http://www.example.com/2014/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/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo...
... <!doctype html> <html> <body> <svg xmlns="http://www.w
3.org/2000/svg" xmlns:test="http://www.example.com/2014/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/2014/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.
... living standard document object model (dom) level
3 core specificationthe definition of 'element.getattributens()' in that specification.
Element.getElementsByTagNameNS() - Web APIs
for example, if you need to look for xhtml elements, use the xhtml namespace uri, http://www.w
3.org/1999/xhtml.
...var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w
3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
... document object model (dom) level
3 core specificationthe definition of 'element.getelementsbytagnamens()' in that specification.
Element: mouseenter event - Web APIs
#mousetarget { box-sizing: border-box; width:15rem; border:1px solid #
333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.
...addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #
333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
... working draft document object model (dom) level
3 events specificationthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
#mousetarget { box-sizing: border-box; width:15rem; border:1px solid #
333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.
...addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #
333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
... working draft document object model (dom) level
3 events specificationthe definition of 'mouseleave' 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 nowebview 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 nowebview 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 ...
EventTarget.addEventListener() - Web APIs
see dom level
3 events and javascript event order for a detailed explanation.
... addeventlistener() is the way to register an event listener as specified in w
3c dom.
... // 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 li...
File.lastModified - Web APIs
const filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 148590
3600000 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; // 15192118099
34 // 1519211810
362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodified; // 151912985
3500 // 1519129858900 // 1519129864400 // ...
File.webkitRelativePath - Web APIs
this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitrelativepathchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support 1
3firefox full support 49ie no support noopera no support nosafari ...
... full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 49opera android no support nosafari ios full support 11.
3samsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: webkitlegend full support full support no support no supportrequires a vendor prefix or...
FileEntrySync - Web APIs
inherits from: entrysync about this document this document was last updated on march 2, 2012 and follows the w
3c specifications (working draft) drafted on april 19, 2011.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileentrysync non-standardchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie ...
... no support noopera no support nosafari no support nowebview android full support
37prefixed full support
37prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support ...
FileSystemDirectoryReader.readEntries() - 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: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function...
... specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w
3c or whatwg specification.
... safari full support 11.1webview android full support ≤
37chrome android full support 18firefox android full support yesopera android no support nosafari ios full support 11.
3samsung internet android ?
FileSystemFlags - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemflags experimentalchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50i...
... nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreate experimentalchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox partial support 50notes ...
... nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitexclusive experimentalchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox partial support 50notes ...
FocusEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="2
31" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusev...
... working draft document object model (dom) level
3 events specificationthe definition of 'focusevent' in that specification.
FontFace.display - Web APIs
the spec recommends
3 seconds for the block period, though this may vary from browser to browser.
...the spec recommends 100 ms or less for the block period and
3 seconds for the swap period, though these values may vary from browser to browser.
... specifications specification status comment css font loading module level
3the definition of 'display' in that specification.
HTMLDetailsElement: toggle event - Web APIs
html <aside id="log"> <b>open chapters:</b> <div data-id="ch1" hidden>i</div> <div data-id="ch2" hidden>ii</div> <div data-id="ch
3" hidden>iii</div> </aside> <section id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
... </details> <details id="ch
3"> <summary>chapter iii</summary> boethius falls back upon his present sense of misery.
... </details> </section> css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left:
3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status comment html living standardthe definition of 'toggle event' in that specification.
HTMLDocument - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="
346,25
356,20
356,
30
346,25" stroke="#d4dde4" fill="none"/><line x1="
356" y1="25" x2="
386" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="
386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="
381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="4
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.currentSrc - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentsrc experimentalchrome full support 45edge full support 1
3firefox full support
38 full support
38 no support
32 — 52disabled disabled from version
32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
...support noopera full support yessafari full support 10.1webview android full support 45chrome android full support 45firefox android full support
38 full support
38 no support
32 — 52disabled disabled from version
32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 10.
3samsung internet android full support 5.0legend full support full support no support no supportexperimental.
HTMLImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecodingchrome full support 65edge full support ≤79firefox full support 6
3ie no support noopera full support yessafari full support 11.1webview android full support 65chrome android full support 65firefox android full support ...
... 6
3opera android ?
... safari ios full support 11.
3samsung internet android full support 9.0legend full support full support no support no support compatibility unknown compatibility unknown ...
HTMLImageElement.srcset - Web APIs
"icon
32px.png
32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png
3x icon.svg" here, options are provided for an icon at widths of
32px and 64px, as well as at pixel densities of 2x and
3x.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcset experimentalchrome full support
34edge full support 12firefox full support
38 full support
38 no support
32 — 52disabled disabled from version
32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 21safari full support 8webview android full support
37chrome android full support
34firefox android full support
38 full support
38 no support
32 — 52disabled disabled from version
32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
HTMLSelectElement.add() - Web APIs
append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "
3"; opt.text = "option: value
3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option va...
...lue="
3">option: value
3</option> </select> */ the before parameter is optional.
... inserting to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "
3"; opt.text = "option: value
3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="
3">option: value
3</option> <option value="2">option: value 2</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.add()' in th...
HTMLSlotElement.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support 5
3edge full support 79firefox full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (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 40safari full support 10.1webview android full support 5
3chrome android full support 5
3firefox android full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (ne...
...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.
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, 201
3-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 2
3: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 201
3-12-25 11:12 1972-07-25 1
3:4...
...
3:07 1941-0
3-15 07:06:2
3.678 201
3-12-25t11:12 1972-07-25t1
3:4
3:07 1941-0
3-15t07:06:2
3.678 valid time-zone offset string z +hhmm +hh:mm -hhmm -hh:mm z +0200 +04:
30 -0
300 -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 201
3-12-25 11:12+0200 1972-07-25 1
3:4
3:07+04:
30 1941-0
3-15 07:06:2
3.678z 201
3-12-25t11:12-08:00 valid week string yyyy-www 201
3-w46 four or more ascii digits yyyy 201
3, 0001 valid duration string pddthhmmss pddthhmms.xs pddthhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m1
3s ...
... p12dt7h12m1
3.
3s p12dt7h12m1
3.45s p12dt7h12m1
3.455s pt7h12m1
3s pt7h12m1
3.2s pt7h12m1
3.56s pt7h12m1
3.999s 7d 5h 24m 1
3s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the html var t = document.getelementbyid("t"); t.datetime = "6w 5h
34m 5s"; specifications specification status comment html living standardthe definition of 'htmltimeelement' in that specification.
IDBEnvironment - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbenvironment deprecatednon-standardchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
...afari ios full support 8samsung internet android full support 1.5available in workers deprecatednon-standardchrome full support yesedge full support ≤18firefox full support
37ie ?
... webview android full support yeschrome android full support yesfirefox android full support
37opera android full support yessafari ios ?
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.987
30
35442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification.
...ndroidsafari on iossamsung internetiirfilternode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie no support noopera full support 42safari ?
... full support 55notes notes before version 59, 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 5
3opera android full support 42safari ios ?
InstallEvent - Web APIs
ock; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fi...
...ll="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,
30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="
306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="
306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
366" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent...
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1
302286216006/config/customlogo.gif' ]; console.log('handling install event.
compareVersion - Web APIs
-
3 registryname has a smaller (earlier) minor number than version.
...
3 registryname has a larger (newer) minor 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.
Timing element visibility with the Intersection Observer API - Web APIs
we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link
3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site.
... .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: 14px; 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.14 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 = repla...
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w
3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,
30
30,
30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be u...
... let shipsize = { width:
30, height:
30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate = 5; let angle = 0; let spaceship = document.getelementbyid("spaceship"); next comes the function updateposition().
... function updateposition(offset) { let rad = angle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x =
399; } else if (position.x >
399) { position.x = 0; } if (position.y < 0) { position.y =
399; } else if (position.y >
399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform.
KeyboardEvent.getModifierState() - Web APIs
windows linux (gtk) mac android 2.
3 android
3.0 or latter "alt" either alt key or altgr key pressed alt key pressed ⌥ option key pressed alt key or option key pressed "altgraph" both alt and ctrl keys are pressed, or altgr key is pressed level
3 shift key (or level 5 shift key ) pressed ⌥ option key pressed not supported "capslock" during led for ⇪ caps loc...
... "accel" virtual modifier note: the "accel" virtual modifier has been effectively deprecated in current drafts of the dom
3 events specification.
... specifications specification status comment document object model (dom) level
3 events specificationthe definition of 'getmodifierstate()' in that specification.
KeyboardEvent.key - Web APIs
in sequence 1 &
3, the keyboardevent.key attribute is defined and is set appropriately to a value according to the rules defined ealier.
...="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { width:
30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message...
... working draft document object model (dom) level
3 events specificationthe definition of 'keyboardevent.key' in that specification.
KeyframeEffect.composite - Web APIs
syntax // getting var compositeenumeration = keyframeeffect.composite; // setting keyframeeffect.composite = 'accumulate'; value to understand these values, take the example of a keyframeeffect value of blur(2) working on an underlying property value of blur(
3).
... replace the keyframeeffect overrides the underlying value it is combined with: blur(2) replaces blur(
3).
... add the keyframeeffect is added to the underlying value with which it is combined (aka additive): blur(2) blur(
3).
Using the Media Capabilities API - Web APIs
0, framerate: 15 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const audioconfiguration = { type: "file", audio: { contenttype: "audio/ogg", channels: 2, bitrate: 1
32700, samplerate: 5200 } }; had we been testing encoding capabilities, we would have created a mediaencodingconfiguration, which requires the type of media being tested — either record (for recording media, i.e.
...t 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/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.4200
34</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>7680x4
320</option> <option>
3840x2160</option> <option>2560x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x600</option> <opt...
...ion>640x480</option> <option>
320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"> <option>60</option> <option>50</option> <option>
30</option> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(...
Node.cloneNode() - Web APIs
*note: in the dom4 specification (since gecko 1
3.0 (firefox 1
3 / thunderbird 1
3 / seamonkey 2.10)), the optional deep argument defaults to true.
... with gecko 28.0 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.
3)), the console warned developers not to omit the argument.
... living standard document object model (dom) level
3 core specificationthe definition of 'node.clonenode()' in that specification.
Node.insertBefore() - Web APIs
: existing childelement (all works correctly) let sp2 = document.getelementbyid("childelement") parentdiv.insertbefore(newnode, sp2) // end test case [ 1 ] // begin test case [ 2 ] : childelement is of type undefined let sp2 = undefined // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // implicit dynamic cast to type node // end test case [ 2 ] // begin test case [
3 ] : childelement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [
3 ] </script> example 2 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create a new, plain <span> element let sp1 = document.createelement("sp...
... example
3 insert an element before the first child element, using the firstchild property.
... obsolete describes the algorithm in more detail document object model (dom) level
3 core specificationthe definition of 'node.insertbefore' in that specification.
Node.localName - Web APIs
syntax name = element.localname name is the local name as a string (see notes below for details) example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w
3.org/1999/xhtml" xmlns:svg="http://www.w
3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceur...
...i + "'"; } ]]></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.
... specifications specification status comment document object model (dom) level
3 core specificationthe definition of 'node.localname' in that specification.
Node.namespaceURI - Web APIs
in firefox
3.5 and earlier, the namespace uri for html elements in html documents is null.
... in later versions, in compliance with html5, it is https://www.w
3.org/1999/xhtml as in xhtml.
... specifications specification status comment document object model (dom) level
3 core specificationthe definition of 'node.namespaceuri' in that specification.
NodeList.prototype.forEach() - Web APIs
it accepts
3 parameters: currentvalue the current element being processed in somenodelist.
... example let node = document.createelement("div"); let kid1 = document.createelement("p"); let kid2 = document.createtextnode("hey"); let kid
3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid
3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, myth...
...oidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support 51edge full support 16firefox full support 50ie no support noopera full support
38safari full support 10webview android full support 51chrome android full support 51firefox android full support 50opera android full support 41safari ios full...
NotifyAudioAvailableEvent - Web APIs
properties framebuffer read only a float
32array containing the raw
32-bit floating-point audio data obtained from decoding the audio (e.g., the raw data being sent to the audio hardware vs.
...the data is a series of audio samples, each sample containing one
32-bit value per audio channel.
... all audio frames are normalized to contain 1024 samples by default, but could be any length between 512 and 16
384 samples if the user has set a different length using the mozframebufferlength attribute.
OVR_multiview2 - Web APIs
this extension is only available to webgl 2 contexts as it needs glsl
3.00 and texture arrays.
... const gl = document.createelement('canvas').getcontext( 'webgl2', { antialias: false } ); const ext = gl.getextension('ovr_multiview2'); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.draw_framebuffer, fb); const colortex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, colortex); gl.texstorage
3d(gl.texture_2d_array, 1, gl.rgba8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.color_attachment0, colortex, 0, 0, 2); const depthstenciltex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, depthstenciltex); gl.texstorage
3d(gl.texture_2d_array, 1, gl.depth
32f_stencil8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.depth_stencil_att...
... shader code #version
300 es #extension gl_ovr_multiview2 : require precision mediump float; layout (num_views = 2) in; in vec4 inpos; uniform mat4 u_viewmatrices[2]; void main() { gl_position = u_viewmatrices[gl_viewid_ovr] * inpos; } specifications specification status ovr_multiview2 community approved ...
PannerNode.coneInnerAngle - Web APIs
the coneinnerangle property's default value is
360, suitable for a non-directional source.
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle =
360; value a double.
... and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area 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, // t...
PannerNode.distanceModel - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
PannerNode.maxDistance - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
PannerNode.orientationX - Web APIs
the orientationx property of the pannernode interface indicates the x (horizontal) component of the direction in which the audio source is facing, in a
3d cartesian coordinate space.
... syntax var orientationx = pannernode.orientationx; pannernode.orientationx.value = neworientationx; value an audioparam whose value is the x component of the direction in which the audio source is facing, in
3d cartesian coordinate space.
... and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area 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, // t...
PannerNode.orientationY - Web APIs
the orientationy property of the pannernode interface indicates the y (vertical) component of the direction the audio source is facing, in
3d cartesian coordinate space.
... syntax var orientationy = pannernode.orientationy; pannernode.orientationy.value = neworientationy; value an audioparam whose value is the y component of the direction the audio source is facing, in
3d cartesian coordinate space.
... and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area 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, // t...
PannerNode.orientationZ - Web APIs
the orientationz property of the pannernode interface indicates the z (depth) component of the direction the audio source is facing, in
3d cartesian coordinate space.
... syntax var orientationz = pannernode.orientationz; pannernode.orientationz.value = neworientationz; value an audioparam whose value is the z component of the direction the audio source is facing, in
3d cartesian coordinate space.
... and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area 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, // t...
PannerNode.setVelocity() - Web APIs
generally you will define the position in
3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...oor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle =
360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setv...
...istener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(
300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,
300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' +
300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.
PerformanceResourceTiming - Web APIs
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="25...
...0" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
326" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
... performanceresourcetiming.nexthopprotocolread only a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7
301).
PeriodicWave.PeriodicWave() - Web APIs
options optional a periodicwaveoptions dictionary object defining the properties you want the periodicwave to have (it also inherits the options defined in the periodicwaveconstraints dictionary.): real: a float
32array containing the cosine terms that you want to use to form the wave (equivalent to the real parameter of audiocontext.createperiodicwave).
... imag: a float
32array containing the sine terms that you want to use to form the wave (equivalent to the imag parameter of audiocontext.createperiodicwave).
... example var real = new float
32array(2); var imag = new float
32array(2); var ac = new audiocontext(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var options = { real : real, imag : imag, disablenormalization : false } var wave = new periodicwave(ac, options); specifications specification status comment web audio apithe definition of 'periodicwave' in that specification.
PointerEvent.getCoalescedEvents() - Web APIs
specifications specification status comment pointer events – level
3the definition of 'getcoalescedevents()' in that specification.
... 45safari no support nowebview android full support 58chrome android full support 58firefox android partial support 59disabled partial support 59disabled disabled from version 59: this feature is behind the dom.w
3c_pointer_events.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support 4
3safari ios no support nosamsung internet android full support 7.0legend full support full support partial support partial support no support no supportexperimental.
Pointer events - Web APIs
pen stylus) around its major axis in degrees, with a value in the range 0 to
359.
...ce button state button buttons neither buttons nor touch/pen contact changed since last event -1 — mouse move with no buttons pressed, pen moved while hovering with no buttons pressed — 0 left mouse, touch contact, pen contact 0 1 middle mouse 1 4 right mouse, pen barrel button 2 2 x1 (back) mouse
3 8 x2 (forward) mouse 4 16 pen eraser button 5
32 notice: the button property indicates a change in the state of the button.
... specifications specification status comment pointer events – level
3 editor's draft added new apis for getcoalescedevent and getpredictedevents, new pointerrawupdate event, additional touch-action property values pan-left, pan-right, pan-up, pan-down.
ProcessingInstruction - Web APIs
lock; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1
30" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
331" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="
396,25 406,20 406,
30
396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="4
36" y2="25" st...
...roke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="4
36" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
RTCDataChannel.id - Web APIs
the read-only rtcdatachannel property id returns an id number (between 0 and 65,5
34) which uniquely identifies the rtcdatachannel.
... each rtcpeerconnection can therefore have up to a theoretical maximum of 65,5
34 data channels on it, although the actual maximum may vary from browser to browser.
... syntax var id = adatachannel.id; value an unsigned short value (that is, an integer between 0 and 65,5
35) which uniquely identifies the data channel.
RTCDataChannel - Web APIs
every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 65,5
34 data channels (the actual limit may vary from browser to browser).
...perty bufferedamount returns the number of bytes of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is considered "low." the default value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and 65,5
34) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel.
... an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,5
35) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
RTCIceCandidate.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:42
34997
325 1 udp 204
3278
322 192.168.0.56 44
32
3 typ host the corresponding candidate string's value will be "candidate:42
34997
325 1 udp 204
3278
322 192.168.0.56 44
32
3 typ host".
...in the example above, the priority is 204
3278
322.
...the complete list of attributes for this example candidate is: foundation = 42
34997
325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 204
3278
322 ip = "192.168.0.56" port = 44
32
3 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidateInit.candidate - Web APIs
for an a-line (attribute line) that looks like this: a=candidate:42
34997
325 1 udp 204
3278
322 192.168.0.56 44
32
3 typ host the corresponding candidate string's value will be "candidate:42
34997
325 1 udp 204
3278
322 192.168.0.56 44
32
3 typ host".
...in the example above, the priority is 204
3278
322.
...the complete list of attributes for this example candidate is: foundation = 42
34997
325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 204
3278
322 ip = "192.168.0.56" port = 44
32
3 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.
RsaHashedKeyGenParams - Web APIs
this should be at least 2048: see for example see nist sp 800-1
31a rev.
...unless you have a good reason to use something else, specify 655
37 here ([0x01, 0x00, 0x01]).
...you can pass any of sha-256, sha-
384, or sha-512 here.
RsaPssParams - Web APIs
rfc
3447 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated.
... for example, if you use sha-256 as the digest algorithm, this could be
32.
... the maximum size of saltlength is given by: math.ceil((keysizeinbits - 1)/8) - digestsizeinbytes - 2 so for a key length of 2048 bits and a digest output size of
32 bytes, the maximum size would be 222.
SVGElement - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
30
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="
341,25
351,20
351,
30
341,25" stroke="#d4dde4" fill="none"/><line x1="
351" y1="25" x2="
381" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="
381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="4
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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 the element.
SVGLength - Web APIs
alueinspecifiedunits) void 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.w
3.org/2000/svg"> <script type="text/javascript"...
...alue: " + 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.7952766418457, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.6666660
3088
379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.6666660
3088
379, valueinspecifiedunits 8: 0.2777777612209
32, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
... svg_lengthtype_ems
3 a value was specified using the em 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:
34:11", "text": "hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:
34:2
3"} event: usermessage data: {"username": "sean", "time": "02:
34:
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:
34:11", "text": "hi everyone."} ...
Slottable: assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot experimentalchrome full support 5
3edge full support 79firefox full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (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 40safari full support 10.1webview android full support 5
3chrome android full support 5
3firefox android full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (ne...
...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.
Text.splitText() - Web APIs
html <p>foobar</p> javascript const p = document.queryselector('p'); // get contents of <p> as a text node const foobar = p.firstchild; // split 'foobar' into two text nodes, 'foo' and 'bar', // and save 'bar' as a const const bar = foobar.splittext(
3); // create a <u> element containing ' new content ' const u = document.createelement('u'); u.appendchild(document.createtextnode(' new content ')); // add <u> before 'bar' p.insertbefore(u, bar); // the result is: <p>foo<u> new content </u>bar</p> result specifications specification status comment domthe definition of 'text.splittext' in that specification.
... living standard no change from document object model (dom) level
3 core specification.
... document object model (dom) level
3 core specificationthe definition of 'text.splittext' in that specification.
TextDecoder - Web APIs
examples representing text with typed arrays this example shows how to decode a chinese/japanese character , as represented by five different typed arrays: uint8array, int8array, uint16array, int16array, and int
32array.
... let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([240, 160, 174, 18
3]); let i8arr = new int8array([-16, -96, -82, -7
3]); let u16arr = new uint16array([41200, 47022]); let i16arr = new int16array([-24
336, -18514]); let i
32arr = new int
32array([-121
3292
304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i
32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() constructor, we specify the windows-1251 character encoding, which is appropriate for cyrillic script.
... let win1251decoder = new textdecoder('windows-1251'); let bytes = new uint8array([207, 240, 2
32, 226, 229, 242, 44,
32, 2
36, 2
32, 240,
33]); console.log(win1251decoder.decode(bytes)); // Привет, мир!
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; } #target
3 { background: white; border: 1px solid black; } #target4 { 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.
... function set_handlers(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("target
3"); set_handlers("target4"); } 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="target
3"> tap, hold or swipe me
3</div> <div id="target4"> 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 e...
UIEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7...
...f8" stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
... ui events working draft extend dom
3 document object model (dom) level
3 events specificationthe definition of 'uievent' in that specification.
URL - Web APIs
eter to use as a base if the url parameter is a relative url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc
3986.
... for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c
3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string.
... to get the search params from the current window's url, you can do this: // https://some.site/?id=12
3 const parsedurl = new url(window.location.href); console.log(parsedurl.searchparams.get("id")); // "12
3" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly.
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>enter your phone number in the format (12
3)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="tel
3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="
3"/> </label> </p> here we have
3 sections for a north ame...
...rican 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.
... input:invalid { border: red solid
3px; } note, in this case, we get a patternmismatch not a validitystate.toolong or validitystate.tooshort if the values are too long or too short because it is the pattern that is dictating the length of the value.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl return value none.
... ext.drawbufferswebgl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment
3_webgl // gl_fragdata[
3] ]); specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
... opengl es
3.0the definition of 'gldrawbuffers' in that specification.
WaveShaperNode.curve - Web APIs
the curve property of the waveshapernode interface is a float
32array of numbers describing the distortion to apply.
... syntax var audioctx = new audiocontext(); var distortion = audioctx.createwaveshaper(); distortion.curve = mycurvedataarray; // mycurvedataarray is a float
32array value a float
32array.
...amount : 50, n_samples = 44100, curve = new float
32array(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; }; ...
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
values an array of glint, gluint or glfloat values or an int
32array, uint
32array or float
32array specifying the values to clear to.
... examples gl.clearbufferiv(gl.color, 0, new int
32array([r, g, b, a])); gl.clearbufferuiv(gl.color, 0, new uint
32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, new float
32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, [0.0, 0.0, 0.0, 0.0]); gl.clearbufferfi(gl.depth_stencil, 0, 1.0, 0); specifications specification status comment webgl 2.0the definition of 'clearbuffer[fiuv]()' in that specification.
... opengl es
3.0the definition of 'glclearbuffer' in that specification.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
possible values: gl.samples: returns a int
32array containing sample counts supported for internalformat in descending order.
...it is an int
32array if pname is gl.samples.
... opengl es
3.0the definition of 'glgetinternalformativ' in that specification.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r
32ui gl.r
32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg
32ui gl.rg
32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 gl.rgba4 gl.rgb565 gl.rgb5_a1 gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba
32i gl.rgba
32ui gl.depth_component16 gl.depth_component24 gl.depth_component
32f gl.depth_stencil gl.depth24_stencil8 gl.depth
32f_s...
... opengl es
3.0the definition of 'glrenderbufferstoragemultisample' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGL2RenderingContext.texStorage2D() - Web APIs
possible values: gl.r8 gl.r16f gl.r
32f gl.r8ui gl.rg8 gl.rg16f gl.rg
32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb
32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba16f gl.rgba
32f gl.rgba8ui unlike opengl
3.0, webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section 5.
37 in the webgl 2 spec).
... opengl es
3.0the definition of 'gltexstorage2d' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
WebGLRenderingContext.bufferData() - Web APIs
var dataarray = new float
32array([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.
... opengl es
3.0the definition of 'glbufferdata' in that specification.
... standard man page of the (similar) opengl es
3 api.
WebGLRenderingContext.getTexParameter() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.texture_
3d: a three-dimensional texture.
... opengl es
3.0the definition of 'glgettexparameter' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
WebGLRenderingContext.getUniformLocation() - Web APIs
uniform[12
34][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 float
32array or int
32array.
... uniformmatrix[2
34][fv]() sets the uniform's value to the specified matrix, possibly with transposition.
... the value is represented as a sequence of glfloat values or as a float
32array.
WebGLRenderingContext.getVertexAttrib() - Web APIs
gl.current_vertex_attrib: returns a float
32array (with 4 elements) representing the current value of the vertex attribute at the given index.
... opengl es
3.0the definition of 'glgetvertexattrib' in that specification.
... standard man page of the opengl es
3 api.
WebGLRenderingContext.texParameter[fi]() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.texture_
3d: a three-dimensional texture.
... opengl es
3.0the definition of 'gltexparameter' in that specification.
... standard man page of the (similar) opengl es
3.0 api.
WebGLRenderingContext.viewport() - Web APIs
to get this range, you can use the max_viewport_dims constant, which returns an int
32array.
...int
32array[16
384, 16
384] to get the current viewport, query the viewport constant.
...int
32array[0, 0, 640, 480] specifications specification status comment webgl 1.0the definition of 'viewport' in that specification.
A basic 2D WebGL animation example - Web APIs
"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; vertexarray = new float
32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5 ]); vertexbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertexarray, gl.static_draw); vertexnumcomponents = 2; vertexcount = vertexarray.length/vertexnumcomponents; currentangle = 0.0; rotationrate = 6; animatescene(); } after getti...
... the array of vertices is created next, as a float
32array with six coordinates (three 2d vertices) per triangle to be drawn, for a total of 12 values.
...position"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) %
360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color.
Using textures in WebGL - Web APIs
« previousnext » now that our sample program has a rotating
3d cube, let's map a texture onto it instead of having its faces be solid colors.
...k 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // top 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // bottom 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // right 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // left 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new float
32array(texturecoordinates), gl.static_draw); ...
... first, the code to specify the colors buffer is gone, replaced with this: // tell webgl how to pull out the texture coordinates from buffer { const num = 2; // every coordinate composed of 2 values const type = gl.float; // the data in the buffer is
32 bit float const normalize = false; // don't normalize const stride = 0; // how many bytes to get from one set to the next const offset = 0; // how many bytes inside the buffer to start from gl.bindbuffer(gl.array_buffer, buffers.texturecoord); gl.vertexattribpointer(programinfo.attriblocations.texturecoord, num, type, normalize, stride, offset); gl.enablevertexattribarray...
Signaling and video calling - Web APIs
optionally, see rfc 8445: 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.
...the main body of this code is found in the connect() function: it opens up a websocket server on port 650
3, and establishes a handler to receive messages in json object format.
... note: technically speaking, the string returned by createoffer() is an rfc
3264 offer.
Writing a WebSocket server in Java - Web APIs
if we send "abcdef", we get these bytes: 129 1
34 167 225 225 210 198 1
31 1
30 182 194 1
35 - 129: fin (is this the whole message?) rsv1 rsv2 rsv
3 opcode 1 0 0 0 0x1=0001 fin: you can send your message in frames, but now keep things simple.
...full list of opcodes - 1
34: if the second byte minus 128 is between 0 and 125, this is the length of the message.
... decoding algorithm decoded byte = encoded byte xor (position of encoded byte bitwise and 0x
3)th byte of key example in java: byte[] decoded = new byte[6]; byte[] encoded = new byte[] { (byte) 198, (byte) 1
31, (byte) 1
30, (byte) 182, (byte) 194, (byte) 1
35 }; byte[] key = new byte[] { (byte) 167, (byte) 225, (byte) 225, (byte) 210 }; for (int i = 0; i < encoded.length; i++) { decoded[i] = (byte) (encoded[i] ^ key[i & 0x
3]); } } } finally { s.clo...
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.
...smith" }, pubkeycredparams: [{ type: "public-key", alg: -7 }], attestation: "direct", timeout: 60000, challenge: new uint8array([ // must be a cryptographically random number sent from a server 0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a, 0x98, 0x6a, 0x7
3, 0x71, 0x9d, 0x4
3, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x
38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef ]).buffer } }; // sample arguments for login var getcredentialdefaultargs = { publickey: { timeout: 60000, // allowcredentials: [newcredential] // see below challenge: new uint8array([ // must be a cryptographically random number sent from a server ...
... 0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc
3, 0xc2, 0x15, 0x67, 0x65, 0x26, 0x22, 0xe
3, 0xf
3, 0xab, 0x
3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50 ]).buffer }, }; // register / create a new credential navigator.credentials.create(createcredentialdefaultargs) .then((cred) => { console.log("new credential", cred); // normally the credential ids available for an account would come from a server // but we can just copy them from above...
Window.customElements - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support 54edge full support 79firefox full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true).
...support noopera full support 41safari full support 10.1webview android full support 54chrome android full support 54firefox android full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true).
...to change preferences in firefox, visit about:config.opera android full support 41safari ios full support 10.
3samsung internet android full support 6.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
window.location - Web APIs
location.assign("http://www.mozilla.org"); // or location = "http://www.mozilla.org"; example #2: force reloading the current page from the server location.reload(true); example #
3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = locat...
...pellentesque porttitor facilisis ultricies.</p> <p id="mybookmark2">[ <span class="intlink" onclick="showbookmark('#mybookmark1');">go to bookmark #1</span> | <span class="intlink" onclick="showbookmark('#mybookmark1', false);">go to bookmark #1 without using location.hash</span> | <span class="intlink" onclick="showbookmark('#mybookmark
3');">go to bookmark #
3</span> ]</p> <p>phasellus tempus fringilla nunc, eget sagittis orci molestie vel.
...nullam feugiat ultrices augue, ac sodales sem mollis in.</p> <p id="mybookmark
3"><em>here is the bookmark #
3</em></p> <p>proin vitae sem non lorem pellentesque molestie.
Window: popstate event - Web APIs
chrome (prior to v
34) and safari always emit a popstate event on page load, but firefox doesn't.
... examples a page at http://example.com/example.html running the following code will generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page:
3}, "title
3", "?page=
3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=
3, state: {"page":
3}" the same example using the onpopstate event handler property: window.onpopstate = function(event) { ...
...console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page:
3}, "title
3", "?page=
3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=
3, state: {"page":
3}" note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
Window.requestFileSystem() - Web APIs
return value undefined example specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestfilesystem experimentalnon-standardchrome full support 1
3prefixed full support 1
3prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18prefixed full support ≤18prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie ...
... no support noopera no support nosafari no support nowebview android full support
37prefixed full support
37prefixed prefixed implemented with the vendor prefix: webkitchrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support ...
XMLDocument - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" ...
...stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 2
36,20 2
36,
30 226,25" stroke="#d4dde4" fill="none"/><line x1="2
36" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="
346,25
356,20
356,
30
346,25" stroke="#d4dde4" fill="none"/><line x1="
356" y1="25" x2="
386" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="
386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest.readyState - Web APIs
3 loading downloading; responsetext holds partial data.
...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
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.07692
307692
3077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,
30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target...
...="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
XRRigidTransform - Web APIs
the xrrigidtransform is a webxr api interface that represents the
3d geometric transform described by a position and orientation.
... attributes xrrigidtransform.position read only a dompointreadonly specifying a
3-dimensional point, expressed in meters, describing the translation component of the transform.
... xrrigidtransform.matrix read only returns the transform matrix in the form of a 16-member float
32array.
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 det...
... alertdialog alert dialog yui alert dialog (
3rd button in this page) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual focus or the real focus on the desired control (like a button).
...- - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - dialog dojo nightly build- note that this may not always work dojo 1.2.
3 release yui dialogs -- use first two dialog buttons expected at behavior: (mz) when the dialog opens, the dialog caption (or title), role, and if present, description should be read by screen readers, followed by the focused widget.
Accessibility: What users can do to browse more safely - Accessibility
personalization and accessibility settings from the article, "understanding success criterion 2.
3.1: three flashes or below threshold" "flashing can be caused by the display, the computer rendering the image or by the content being rendered.
...learn personalization and accessibility settings firefox 7
3 and above (dekstop) firefox added support for css prefers-reduced-motion in october 2018.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april
30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.
3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for ap...
Keyboard-navigable JavaScript widgets - Accessibility
tabindex="
33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11").
... <li id="monospace" tabindex="-1">monospace</li> <li id="fantasy" tabindex="-1">fantasy</li> </ul> </li> <li id="mb1_menu2" tabindex="-1"> style <ul id="stylemenu" title="style" tabindex="-1"> <li id="italic" tabindex="-1">italics</li> <li id="bold" tabindex="-1">bold</li> <li id="underline" tabindex="-1">underlined</li> </ul> </li> <li id="mb1_menu
3" tabindex="-1"> justification <ul id="justificationmenu" title="justication" tabindex="-1"> <li id="left" tabindex="-1">left</li> <li id="center" tabindex="-1">centered</li> <li id="right" tabindex="-1">right</li> <li id="justify" tabindex="-1">justify</li> </ul> </li> </ul> disabled controls when a custom control becomes disabled, remove it from the tab order ...
...for example, to ensure that the enter key will activate an element, if you have an onclick="dosomething()", you should bind dosomething() to the key down event as well: onkeydown="return event.keycode != 1
3 || dosomething();".
Robust - Accessibility
note: to read the w
3c 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.
...use the w
3c validator to validate your markup.
... 4.1.
3 status messages (aa) added in 2.1 assistive technology users are made aware of new status messages added to the page.
Text labels and names - Accessibility
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="
34,
34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
... example <iframe title="mdn web docs" width="
300" height="200" src="https://developer.mozilla.org"> </iframe> use alt attribute to label mglyph elements when writing equations with mathml, give each <mglyph> element an alt attribute containing a name that describes the symbol.
... see also w
3c aria toolbar example related wcag success criteria 1.1.1 non-text content (a) all non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed in the above link.
-moz-image-rect - CSS: Cascading Style Sheets
#box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/1205
3/firefox.png), 0%, 50%, 50%, 0%); width:1
33px; height:1
36px; position:absolute; } this is the top-left corner of the image.
... #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/1205
3/firefox.png), 0%, 100%, 50%, 50%); width:1
33px; height:1
36px; position:absolute; } this defines the top-right corner of the image.
... the other corners follow a similar pattern: #box
3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/1205
3/firefox.png), 50%, 50%, 100%, 0%); width:1
33px; height:1
36px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/1205
3/firefox.png), 50%, 100%, 100%, 50%); width:1
33px; height:1
36px; 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:1
33px;top:0px;">top right</div> <div id="box
3" style="left:0px;top:1
36px;">bottom left</div> <div id="box4" style="left:1
33px;top:1
36px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box g...
::before (:before) - CSS: Cascading Style Sheets
syntax /* css
3 syntax */ ::before /* css2 syntax */ :before note: css
3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...i> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #0099
33; border-style: solid; border-width: 0 0.
3em 0.25em 0; height: 1em; top: 1.
3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example runni...
... selectors level
3the definition of '::before' in that specification.
::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 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
... note: ::selection was in drafts of css selectors level
3, but it was removed in the candidate recommendation phase because its was under-specified (especially with nested elements) and interoperability wasn't achieved (based on discussion in the w
3c style mailing list).
::slotted() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet::slottedchrome full support 50edge full support 79firefox full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support
37safari full support 10webview android full support 50chrome android full support 50firefox android full support 6
3 full support 6
3 no support 59 — 6
3disabled disabled from version 59 until version 6
3 (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
37safari ios full support 10samsung internet android full support 5.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
:link - CSS: Cascading Style Sheets
selectors level
3the definition of ':link' in that specification.
...dgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:linkchrome full support 1edge full support 12firefox full support 1ie full support
3opera full support
3.5safari full support 1webview android full support 1.5chrome android full support 18firefox android full support 4opera android full suppo...
...rt 14safari ios full support
3.2samsung internet android full support 1.0legend full support full support ...
:read-only - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px
3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-onlychrome full support 1edge full support 1
3firefox full support 78 full support 78 full support 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari f...
...ull support 4webview android full support ≤
37chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support
3.2samsung internet android full support 1.0legend full support full support no support no supportrequires a v...
:read-write - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px
3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-writechrome full support 1edge full support 1
3firefox full support 78 full support 78 full support 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari f...
...ull support 4webview android full support ≤
37chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support
3.2samsung internet android full support 1.0legend full support full support no support no supportrequires a v...
:visited - CSS: Cascading Style Sheets
selectors level
3the definition of ':visited' in that specification.
...oidfirefox 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 support 10.1safari ios fu...
...edge full support 12firefox full support 4ie full support 8opera full support 15safari full support 5webview android full support
37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 4.2samsung internet android full support 1.0legend ...
@counter-style - CSS: Cascading Style Sheets
for example if you want the counters to start at 01 and go through 02, 0
3, 04 etc, then the pad descriptor is to be used.
... Ⓨ twenty five Ⓩ twenty six 27 twenty seven 28 twenty eight 29 twenty nine
30 thirty see more examples on the demo page.
... specifications specification status comment css counter styles level
3the definition of 'counter-style' in that specification.
@document - CSS: Cascading Style Sheets
this has been limited to use only in user and ua sheets in firefox 59 in nightly and beta — an experiment designed to mitigate potential css injection attacks (see bug 10
35091).
... formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w
3.org/"), url-prefix("http://www.w
3.org/style/"), domain("mozilla.org"), media-document("video"), regexp("https:.*") { /* css rules here apply to: - the page "http://www.w
3.org/" - any page whose url begins with "http://www.w
3.org/style/" - any page whose url's host is "mozilla.org" or ends with ".mozilla.org" - any standalone video - any page whose url starts with "https:" */ /* make the above-mentioned pages really ugly */ body { color: purple; background: yellow; } } specificatio...
...ns initially in css conditional rules module level
3, @document has been postponed to level 4.
color-gamut - CSS: Cascading Style Sheets
p
3 the output device can support approximately the gamut specified by the dci p
3 color space or more.
... the p
3 gamut is larger than and includes the srgb gamut.
...the rec2020 gamut is larger than and includes the p
3 gamut.
At-rules - CSS: Cascading Style Sheets
they begin with an at sign, '@' (u+0040 commercial at), followed by an identifier and includes everything up to the next semicolon, ';' (u+00
3b semicolon), or the next css block, whichever comes first.
... conditional group rules are defined in css conditionals level
3 and are: @media, @supports, @document.
... specifications specification status comment css conditional rules module level
3 candidate recommendation initial definition compatibility standardthe definition of 'css at-rules' in that specification.
Basic Concepts of Multicol - CSS: Cascading Style Sheets
this css would give the same result as example 1, column-count set to
3.
... .container { columns:
3; } this css would give the same result as example 2, with column-width of 200px.
... .container { columns: 200px; } this css would give the same result as example
3, with both column-count and column-width set.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
note: the alignment properties in flexbox have been placed into their own specification — css box alignment level
3.
... future alignment features for flexbox at the beginning of this article i explained that the alignment properties currently contained in the level 1 flexbox specification are also included in box alignment level
3, which may well extend these properties and values in the future.
...the inclusion of these properties in box alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in firefox 6
3 you will find the first browser implementation of the gap properties in flex layout.
Flow Layout and Overflow - CSS: Cascading Style Sheets
note: in the working draft of overflow level
3, there is an additional value overflow: clip.
...the level
3 overflow module also includes flow relative properties for overflow - overflow-block and overflow-inline.
... indicating overflow in the level
3 overflow specification we have some properties which can help improve the way content looks in an overflow situation.
OpenType font features guide - CSS: Cascading Style Sheets
they are grouped and explained here according to the main attributes and options covered in the w
3c specifications.
... more about alternates https://www.w
3.org/tr/css-fonts-4/#propdef-font-variant-alternates /docs/web/css/font-variant-alternates ligatures (font-variant-ligatures) ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective).
... ordinals are also supported (such as '1st' or '
3rd'), as is a slashed zero if present in the font.
Grid template areas - CSS: Cascading Style Sheets
our grid is a two-column track grid, with the column for the image sized at 1fr and the text
3fr.
... * {box-sizing: border-box;} .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; } .media { display: grid; grid-template-columns: 1fr
3fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media .image { grid-area: img; background-color: #ffd8a8; } .media .text { grid-area: content; padding: 10px; } <div class="media"> <div class="image"></div> <div class="text">this is a media object example.
... * {box-sizing: border-box;} .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; } .media { display: grid; grid-template-columns: 1fr
3fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media.flipped { grid-template-columns:
3fr 1fr; grid-template-areas: "content img"; } .media .image { grid-area: img; background-color: #ffd8a8; } .media .text { grid-area: content; padding: 10px; } <div class="media flipped"> <div class="image"></div> <div class="text">this is a media obje...
Using z-index - CSS: Cascading Style Sheets
layer -
3 layer -2 layer -1 layer 0 (default rendering layer) layer 1 layer 2 layer
3 ...
... source code for the example html <div id="abs1"> <b>div #1</b> <br />position: absolute; <br />z-index: 5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index:
3; </div> <div id="rel2"> <b>div #
3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; pos...
...ition: absolute; width: 150px; height:
350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index:
3; height: 100px; position: relative; top:
30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height:
350px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Pseudo-classes - CSS: Cascading Style Sheets
no significant change for other pseudo-classes defined in selectors level
3 and html5 (though semantic meaning not taken over).
... css basic user interface module level
3 recommendation defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
... selectors level
3 recommendation defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
CSS reference - CSS: Cascading Style Sheets
l()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix
3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffse...
...perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate
3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale
3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscr...
...s-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate
3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various selectors, which all...
Selector list - CSS: Cascading Style Sheets
h1, h2, h
3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists.
... #main, .content, article { font-size: 1.1em; } selector list invalidation a downside to using selector lists is that the following aren't equivalent: h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h
3 { font-family: sans-serif } h1, h2:maybe-unsupported, h
3 { font-family: sans-serif } this is because a single unsupported selector in a selector list invalidates the whole rule.
... h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h
3 { font-family: sans-serif } :is(h1, h2:maybe-unsupported, h
3) { font-family: sans-serif } specifications specification status comment selectors level 4the definition of 'selector lists' in that specification.
Syntax - CSS: Cascading Style Sheets
the pair is separated by a colon, ':' (u+00
3a colon), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.
... such blocks are naturally called declaration blocks and declarations inside them are separated by a semi-colon, ';' (u+00
3b semicolon).
...that was very restrictive and this restriction was lifted in css conditionals level
3.
align-content - CSS: Cascading Style Sheets
* 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; } #item
3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size:
30px; } select { font-size: 16px; } .row { margin-top: 10px; } html ...
...<div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item
3">
3</div> <div id="item4">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">align-content: </label> <select id="values"> <option value="normal">normal</option> <option value="stretch">stretch</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="space-between">space-between</option> <option value="space-around">space-a...
...lementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level
3the definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
* 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; } #item
3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size:
30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <...
...div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item
3">
3</div> <div id="item4">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">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center" selected>center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> <option value="start">start</option> <option...
...telementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level
3the definition of 'align-items' in that specification.
background-position-x - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right
3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas.
... 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/17
350/
3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and bord...
... 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 (...
background-position-y - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom
3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas.
... 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/17
350/
3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and bord...
... 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 14safari ios full support 1samsung internet android full support 1.0two-value syntax (...
background-repeat - CSS: Cascading Style Sheets
example: an image with an original width of 260px, repeated three times, might stretch until each repetition is
300px wide, and then another image will be added.
...t; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon
32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
... specifications specification status comment css backgrounds and borders module level
3the definition of 'background-repeat' in that specification.
border-bottom-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width:
3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
...h> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status comment css backgrounds and borders module level
3the definition of 'border-bottom-width' in that specification.
...for androidopera for androidsafari on iossamsung internetborder-bottom-widthchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support
3.5safari full support 1webview android full support 2.
3chrome android full support 18firefox android full support 4opera android full support 10.1safari ios fu...
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 14px 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.
... 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-image-outset' in that specification.
border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width:
3; /* vertical | horizontal */ border-image-width: 2em
3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified using one, two, three, or four values chosen f...
...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/214842819586a8dd29
3c17b
38d0fd0e264
30146a86dd04294a5
3ecaeeea7d0e2.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-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="b
3">dotted</td> <td class="b4">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: #52e
385; } tr, td { padding:
3px; } ...
... /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b
3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .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.
...this has been fixed in firefox 50.ie full support 5.5opera full support 9.2safari full support 1webview android full support 2.
3chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
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="b
3">dotted</td> <td class="b4">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: #52e
385; } tr, td { padding:
3px; } ...
... /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b
3 {border-right-style: dotted;} .b4 {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.
...this has been fixed in firefox 50.ie full support 5.5opera full support 9.2safari full support 1webview android full support ≤
37chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
clip - CSS: Cascading Style Sheets
/* keyword value */ clip: auto; /* <shape> values */ clip: rect(1px 10em
3rem 2ch); clip: rect(1px, 10em,
3rem, 2ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead.
... positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 5
36px; height:
350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left:
360px; clip: rect(0 175px 11
3px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(2
35px
335px
345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/15174f
3500.jpg" ti...
...tle="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f
3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f
3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f
3500.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-gap (grid-column-gap) - CSS: Cascading Style Sheets
syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap:
3px; column-gap: 2.5em; /* <percentage> value */ column-gap:
3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below.
...iv> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <div id="grid"> <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.
contain - CSS: Cascading Style Sheets
kup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border:
3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-...
...up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border:
3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of anothe...
...r article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border:
3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment css containment module level 1the definition of 'contain' in that specification.
cursor - CSS: Cascading Style Sheets
two unitless nonnegative numbers less than
32.
... bug 27517
3: on windows and mac os x, no-drop is the same as not-allowed.
...e-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status comment css basic user interface module level
3the definition of 'cursor' in that specification.
<display-box> - CSS: Cascading Style Sheets
please note that the css display level
3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by css box concepts such as replaced elements.
... display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of
300px.
... html <div class="outer"> <div>inner div.</div> </div> css .outer { border: 2px solid red; width:
300px; display: contents; } .outer > div { border: 1px solid green; } result specifications specification status css display module level
3the definition of 'display-box' in that specification.
<filter-function> - CSS: Cascading Style Sheets
trast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</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/17
350/
3b4892b7e820122ac6dd7678891d4507/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 c...
... const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.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...
...= 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max =
360; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'drop-shadow') { divelem.style.filter = `${selectelem.value}(${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(slider.value)}${slider.getattribute('data-unit')} ${math.round(math.abs(slider.value/2))}${slider.getattribute('data-unit')})`; } else { ...
fit-content() - CSS: Cascading Style Sheets
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(
30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length.
...because the contents of it are wider than the maximum width, it is clamped at
300 pixels.
... </div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(
300px) fit-content(
300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status comment css box sizing module level
3the definition of 'fit-content()' in that specification.
font-size - CSS: Cascading Style Sheets
so, by default 1em = 16px, and 2em =
32px.
...similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.
375em (22/16).
... css fonts module level
3the definition of 'font-size' in that specification.
font-variant-position - CSS: Cascading Style Sheets
setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level
3the definition of 'font-variant-position' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-positionchrome no support noedge no support nofirefox full support
34 full support
34 no support 24 —
34disabled disabled from version 24 until version
34 (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
34 full support
34 no support 24 —
34disabled disabled from version 24 until version
34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
font - CSS: Cascading Style Sheets
line-height must immediately follow font-size, preceded by "/", like this: "16px/
3" font-family must be the last value specified.
...opcont"> line-height<br/> <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setcss()"> <label for="line-height-none">none</label><br/> <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setcss()"> <label for="line-height-1.2">1.2</label><br/> <input type="radio" id="line-height-
3" name="line_height" value="/
3" onchange="setcss()"> <label for="line-height-
3">
3</label> </div><br/> <div class="setpropcont fontfamily"> font-family<br/> <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setcss(5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="ra...
...nction(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status comment css fonts module level
3the definition of 'font' in that specification.
<frequency> - CSS: Cascading Style Sheets
examples valid frequency values 12hz positive integer 4.
3hz non-integer 14khz the unit is case-insensitive, though non-si capitalization is not recommended.
... specifications specification status comment css values and units module level
3the definition of '<frequency>' in that specification.
...however, the <frequency> data type has been reintroduced in css
3, though no css property is using it at the moment.
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 item’s placement, indicating auto-placement or a default span of 1.
...n-start: autogrid-row-end: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-column-start: as specifiedgrid-row-end: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]{0,
3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
... ] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item
3"></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; } #item
3 { 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
syntax /* keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-columns: 100px; grid-auto-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.
...-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item
3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-rows: none; /* <track-list> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename
3]; grid-template-rows: minmax(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(
3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px)
300px; grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-rows: [linename1] 100px [linename2] ...
... repeat(auto-fit, [linename
3 linename4]
300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1]
300px) [linename
3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value.
...<flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows:
30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
ident - CSS: Cascading Style Sheets
and toto\
3f are the same identifiers.
...numeric 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
34rem it must not start with a decimal digit.
... editor's draft css values and units module level
3the definition of '<ident>' in that specification.
image-rendering - CSS: Cascading Style Sheets
since version 1.9 (firefox
3.0), gecko uses bilinear resampling (high quality).
... <div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd
397be
3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd
397be
3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd
397be
3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } ...
....crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } result specifications specification status comment css images module level
3the definition of 'image-rendering' in that specification.
image-set() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 specifications specification status comment css images module level 4the definition of 'the image-set() notation' in that specification.
...see bug 1609
34.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 vend...
...see bug 1609
34.samsung internet android full support 1.5prefixed full support 1.5prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full support partial support ...
initial - CSS: Cascading Style Sheets
candidate recommendation no changes from level
3.
... css cascading and inheritance level
3the definition of 'initial' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitialchrome full support 1edge full support 1
3firefox full support 19 full support 19 no support 1 — 24prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 15safari full support ...
line-height - CSS: Cascading Style Sheets
syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height:
3.5; /* <length> values */ line-height:
3em; /* <percentage> values */ line-height:
34%; /* global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal.
... w
3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements.
...</div> <!-- the first <h1> line-height is calculated from its own font-size (
30px × 1.1) =
33px --> <!-- the second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> css .green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size:
30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px; } result s...
list-style-position - CSS: Cascading Style Sheets
for more information on this, see bug
36854.
... 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; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment css lists module level
3the definition of 'list-style-position' in that specification.
margin - CSS: Cascading Style Sheets
syntax /* apply to all four sides */ margin: 1em; margin: -
3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values.
... formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin:
3rem 0 0 -
3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px
3% -1em; /* top: 10px margin */ ...
.../* left and right:
3% margin */ /* bottom: -1em margin */ margin: 10px
3px
30px 5px; /* top: 10px margin */ /* right:
3px margin */ /* bottom:
30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally centered */ notes horizontal centering to center something horizontally in modern browsers, you can use display: flex; justify-content: center; .
minmax() - CSS: Cascading Style Sheets
syntax /* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(
30%,
300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto,
300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(
30%,
300px) minmax(400px, 50%) minmax(50%, min-content) minmax(
300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(
30%,
300p...
...x) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto,
300px) a function taking two parameters, min and max.
... formal syntax minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content,
300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } html <div id="container"> <div> item as wide as the content, but at most
300 pixels.
offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px
30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l
300 100 l 200
300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg)
30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset...
...: url(arc.svg) 2cm / 0.5cm
3cm; offset: url(arc.svg)
30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimat...
... examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-color: blue; offset: path("m 100 100 l
300 100 l 200
300 z") auto; animation: move
3s linear infinite; } result specifications specification status comment motion path module level 1the definition of 'offset' in that specification.
opacity - 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.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.
3 | w
3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the ...
... css color module level
3the definition of 'opacity' in that specification.
orphans - CSS: Cascading Style Sheets
/* <integer> values */ orphans: 2; orphans:
3; /* global values */ orphans: inherit; orphans: initial; orphans: unset; in typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page.
...it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150px; columns:
3; orphans:
3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level
3the definition of 'orphans' in that specification.
...rphanschrome full support 25edge full support 12firefox no support noie full support 8opera full support 9.2safari full support 1.
3webview android full support ≤
37chrome android full support 25firefox android no support noopera android full support 14safari ios full support 1samsung internet android ...
outline-offset - CSS: Cascading Style Sheets
syntax /* <length> values */ outline-offset:
3px; outline-offset: 0.2em; /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> the width of the space between the element and its outline.
...gthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level
3the definition of 'outline-offset' in that specification.
... full support 15firefox full support 1.5ie no support noopera full support 9.5safari full support 1.2webview android full support
37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend ...
overflow-block - CSS: Cascading Style Sheets
</div> </li> <li><code>overflow-block:visible</code> — displays the text outside the box if needed <div id="div
3"> 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, #div
3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div
3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module ...
...level
3the definition of 'overflow-block' in that specification.
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; } #item
3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size:
30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <...
...div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item
3">
3</div> <div id="item4">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 nor...
... height:200px; width: 240px; 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-items' in that specification.
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.
...t 4webview android full support 2chrome android full support 18firefox android full support 4opera android full support 14safari ios full support
3.2samsung internet android full support 1.0applies to html elements experimentalchrome 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 14safari ios full support
3.2samsung internet android full support 1.0legend full support full supportexperimental.
<position> - CSS: Cascading Style Sheets
examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px 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.
... candidate recommendation relists links to both definitions: if css backgrounds and borders module level
3 is supported, its definition of <position> must also be used.
... css backgrounds and borders module level
3the definition of '<bg-position>' in that specification.
<ratio> - CSS: Cascading Style Sheets
syntax in media queries level
3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', unicode u+002f solidus) and a second strictly positive <integer>.
...} common aspect ratios ratio usage 4/
3 traditional tv format in the 20th century.
... 2
39/100 "widescreen," anamorphic movie format.
rotate - CSS: Cascading Style Sheets
equivalent to a rotatex()/rotatey()/rotatez() (
3d rotation) function.
...equivalent to a rotate
3d() (
3d rotation) function.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{
3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border:
3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap:
3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows.
...al computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width:
300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(
3, 1fr); ...
...row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specifications specification status comment css box alignment module level
3the definition of 'row-gap' in that specification.
scale - CSS: Cascading Style Sheets
three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a
3d scale.
... equivalent to a scale
3d() (
3d scaling) function.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,
3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border:
3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css transforms level 2the definition of 'indivi...
scroll-margin-inline-end - CSS: Cascading Style Sheets
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.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #66
3399; color: #fff; font-size:
30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #66
3399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller > div:nth-child(
3) { scroll-margin-inline-end: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>.
scroll-margin-inline-start - CSS: Cascading Style Sheets
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.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #66
3399; color: #fff; font-size:
30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #66
3399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller > div:nth-child(
3) { scroll-margin-inline-start: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline start edge of the second <div>, and 2rems outside the inline start edge of the third <div>.
scroll-margin-inline - CSS: Cascading Style Sheets
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.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #66
3399; color: #fff; font-size:
30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #66
3399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(
3) { scroll-margin-inline: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>.
scroll-margin - CSS: Cascading Style Sheets
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.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #66
3399; color: #fff; font-size:
30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #66
3399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(
3) { scroll-margin: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the left edge of the second <div>, and 2rems outside the left edge of the third <div>.
text-combine-upright - CSS: Cascading Style Sheets
attempts to display a sequence of consecutive ascii digits (u+00
30–u+00
39) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box.
... 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.
... candidate recommendation add digits value css writing modes module level
3the definition of 'text-combine-upright' in that specification.
rotateX() - CSS: Cascading Style Sheets
note: rotatex(a) is equivalent to rotate
3d(1, 0, 0, a).
... note: unlike rotations in the 2d plane, the composition of
3d rotations is usually not commutative.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
rotateY() - CSS: Cascading Style Sheets
note: rotatey(a) is equivalent to rotate
3d(0, 1, 0, a).
... note: unlike rotations in the 2d plane, the composition of
3d rotations is usually not commutative.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
rotateZ() - CSS: Cascading Style Sheets
note: rotatez(a) is equivalent to rotate(a) or rotate
3d(0, 0, 1, a).
... note: unlike rotations in the 2d plane, the composition of
3d rotations is usually not commutative.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 this transformation applies to the
3d space and can't be represented on the plane.
scale() - CSS: Cascading Style Sheets
to scale in
3d, use scale
3d() instead.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ
3 homogeneous coordinates on ℝℙ
3 sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001 [sx 0 0 sy 0 0] accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine.
... find out more: mdn understanding wcag, guideline 2.
3 explanations understanding success criterion 2.
3.
3 | w
3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dim...
translate - CSS: Cascading Style Sheets
three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a
3d translation.
... equivalent to a translate
3d() (
3d translation) function.
...]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border:
3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing:
3px; word-spacing: 0.
3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w
3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements.
...ercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level
3the definition of 'word-spacing' in that specification.
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos)
3d raycaster processing.js p5js
3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive)
3d objects demo (interactive) blobular (interactive) video embedded in svg ...
...(or use the local download) summer html image map creator (source code) video video
3d animation "mozilla constantly evolving" video
3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos
3d graphics webgl web audio fireworks ioquake
3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with ...
...clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake
3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch typing ...
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:
30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028
340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of t...
... as mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also need to be set for all elements within the video controls: .controls > * { float:left; width:
3.90625%; height:100%; margin-left:0.195
3125%; display:block; } .controls > *:first-child { margin-left:0; } all elements are floated left, as they are to be aligned next to one another, and each element is set to have a width of nearly 4% (again the actual value was calculated based on the required dimensions of the buttons), and a height of 100%.
... the <div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.
390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
Challenge solutions - Developer guides
color three-digit color codes challenge in your css file, change all the color names to
3-digit color codes without affecting the result.
... solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h
3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea.
... solution the following rule achieves the desired result: #fixed-pin { position:fixed; top:
3px; right:
3px; } tables borders on data cells only challenge change the stylesheet to make the table have a green border around only the data cells.
Event developer guide - Developer guides
the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of
3d transforms.
... a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) to gecko/firefox 17.
... you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with
3d transformsthis article provides tips on how to use device orientation information in tandem with css
3d transforms.
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>, <h
3>, <h4>, <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>, <...
... elements belonging to this category are <h1>, <h2>, <h
3>, <h4>, <h5>, <h6> and <hgroup>.
... note: the <hgroup> element was removed from the w
3c html specification prior to html 5 being finalized, but is still part of the whatwg specification and is at least partially supported by most browsers.
Using HTML sections and outlines - Developer guides
important: there are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final w
3c specification.
... <section> <h1>getting involved</h1> <article> <header> <h2>how to become an mdn contributor</h2> <p>do you want to help protect the web?....</p> </header> <section> <h
3>steps to editing an article</h
3> </section> <footer> <p>author info</p> <p>publication date</p> </footer> </article> </section> section element the section element is used for a thematic grouping of content.
... based on the w
3c spec, a section should typically contain a heading.
HTML attribute: min - HTML: Hypertext Markup Language
r 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-w2
3" step=""> time hh:mm <input type="time" min="09:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:
30"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adher...
... 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.
... we add a big red border around invalid inputs: input:invalid { border: solid red
3px; } then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.
HTML attribute: step - HTML: Hypertext Markup Language
default values for step input type value example date 1 (day) <input type="date" min="2019-12-25" step="1"> month 1 (month) <input type="month" min="2019-12" step="12"> week 1 (week) <input type="week" min="2019-w2
3" step="2"> time 60 (seconds) <input type="time" min="09:00" step="900"> datetime-local 1 (day) <input type="datetime-local" min="019-12-25t19:
30" step="7"> number 1 <input type="number" min="0" step="0.1" max="10"> range 1 <input type="range" min="0" step="2" max="10"> if any is not explicity set, valid values for the num...
... we add a big red border around invalid inputs: input:invalid { border: solid red
3px; } then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.
... <input id="mynumber" name="mynumber" type="number" step="2" min="1.2"> valid values include 1.2,
3.2, 5.2, 7.2, 9.2, 11.2, and so on.
<area> - HTML: Hypertext Markup Language
poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x
3,y
3, and so on.
...(the w
3c 5.
3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.reali...
...tyripple.com/samples/6a/7e559101b
3.png" alt="
350 x 150 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<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.
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontent deprecatednon-standardchrome full support
35edge full support 79firefox no support
33 — 59disabled no support
33 — 59disabled disabled from version
33 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 26safari no support nowebview android full support
37chrome android full support
37firefox android no support
33 — 59disabled no support
33 — 59disabled disabled from version
33 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true).
... safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support compatibility unknown compatibility unknownnon-standard.
<font> - HTML: Hypertext Markup Language
though once normalized in html
3.2, it was deprecated in html 4.01, at the same time as all elements related to styling only, then made obsolete in html5.
...numeric values range from 1 to 7 with 1 being the smallest and
3 the default.
... it can be defined using a relative value, like +2 or -
3, which set it relative to the value of the size attribute of the <basefont> element, or relative to
3, the default value, if none does exist.
<hgroup> - HTML: Hypertext Markup Language
permitted content one or more <h1>, <h2>, <h
3>, <h4>, <h5>, and/or <h6>.
... usage notes the <hgroup> element has been removed from the html5 (w
3c) specification, but it still is in the whatwg version of html.
... so the html5 (w
3c) specification provides advice on how to mark up subheadings, subtitles, alternative titles and taglines without using <hgroup>.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
default is
300.
... non-standard attributes mozbrowser see bug 1
3185
32 for exposing this to webextensions in firefox.
... html <iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="
300"> </iframe> result accessibility concerns people navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content.
<img>: The Image Embed element - HTML: Hypertext Markup Language
note: this attribute is mentioned in the latest w
3c version, html 5.2, but has been removed from the whatwg’s html living standard.
... <img src="https://udn.realityripple.com/samples/61/869e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd7824ce
30c9587f0d8548b946ee9fb129
3d2eccdb6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included.
... an alt decision tree • images • wai web accessibility tutorials alt-texts: the ultimate guide — axess lab how to design great alt text: an introduction | deque mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w
3c understanding wcag 2.0 the title attribute the title attribute is not an acceptable substitute for the alt attribute.
<input type="button"> - HTML: Hypertext Markup Language
hidden code 2 <fieldset> <legend>button group</legend> <input type="button" value="button 1"> <input type="button" value="button 2"> <input type="button" value="button
3"> </fieldset> const button = document.queryselector('input'); const fieldset = document.queryselector('fieldset'); button.addeventlistener('click', disablebutton); function disablebutton() { fieldset.disabled = true; window.settimeout(function() { fieldset.disabled = false; }, 2000); } note: firefox will, unlike other browsers, by default, persist the dynamic disabled state of a...
... <div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="
30" aria-label="select pen size"><span class="output">
30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; marg...
...ocument.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-85, sizepicker.value, degtorad(0), degtorad(
360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.
<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 64 characters.
... <input type="email" size="
32" minlength="
3" maxlength="64"> 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.
...see w
3c bug 15489 for details.
<input type="image"> - HTML: Hypertext Markup Language
essential image input features let's look at a basic example that includes all the essential features you'd need to use (these work exactly the same as they do on the <img> element.): <input id="image" type="image" width="100" height="
30" alt="login" src="/static/external/62/62ac2ecddbec0e0b540098c28451e5720
3e5cab46dfed7ab0115d5a659fcfb7b.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/62ac2ecddbec0e0b540098c28451e5720
3e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="100"> </div> </form> css and now some simple css to make the basic elements sit more neatly: div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } adjusting the image position and scaling in this example, we adapt the previous example to set aside more space for the...
... 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/62ac2ecddbec0e0b540098c28451e5720
3e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="100"> </div> </form> css div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } here, object-position is configured to draw the image at the top-right corner ...
<input type="search"> - HTML: Hypertext Markup Language
in this example, for instance, the search box is
30 characters wide: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." size="
30"> <button>search</button> </div> </form> the result is this wider input box: validation <input> elements of type search have the same validation features available to them as regular text inputs.
... <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 w...
...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 exa...
<keygen> - HTML: Hypertext Markup Language
the value of the pqg parameter is the the base64 encoded, der encoded dss-parms as specified in ietf rfc
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 "secp
384r1" for high, and the curve named "secp256r1" for medium keys.
... here is an example form submission as it would be delivered to a cgi program by the http server: commonname=john+doe&email=doe@foo.com&org=foobar+computing+corp.& orgunit=bureau+of+bureaucracy&locality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd
34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb
3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%
3d specifications specification status comment html5the definition of 'the <keygen> element' in that specification.
<p>: The Paragraph element - HTML: Hypertext Markup Language
the end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h
3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
...switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent:
3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target...
... living standard no change since the latest w
3c snapshot html5 html5the definition of '<p>' 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>
3741255</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>
3971244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100
332</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>
3741255</td> <td>jones, martha</td> </tr> <tr> <td>40778
30</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>
3971244</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2"...
...>astrophysics</th> </tr> <tr> <td>4100
332</td> <td>petrov, alexandra</td> </tr> <tr> <td>8892
377</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 655
34 are clipped down to 655
34.
...unimplemented in css
3.
...to achieve the same effect, you can specify the character as the first value of the text-align property, unimplemented in css
3.
Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-color:#ee
3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #
333; } .highlight { background-color:#ee
3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #
333; } .highlight { backgro...
...und-color:#ee
3; } rendered using the same css as before, we get: see the difference?
Link types - HTML: Hypertext Markup Language
(in firefox, before firefox
37, this worked only in links found in pages.
... sidebar obsolete since gecko 6
3 indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar.
... while once part of the html specification, this has been removed from the spec and is only implemented by versions of firefox prior to firefox 6
3.
Identifying resources on the Web - HTTP
urn:isbn:97801410
36144 urn:ietf:rfc:72
30 the two urns correspond to the book nineteen eighty-four by george orwell, the ietf specification 72
30, 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 44
3 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:97801410
36144 mailto:help@supercyberhelpdesk.info specifications specification title rfc 72
30, section 2.7: uniform resource identifiers hypertext transfer protocol (http/1.1): message syntax and routing ...
Content-Encoding - HTTP
header type entity header forbidden header name no syntax content-encoding: gzip content-encoding: compress content-encoding: deflate content-encoding: identity content-encoding: br // multiple, in the order in which they were applied content-encoding: gzip, identity content-encoding: deflate, gzip directives gzip a format using the lempel-ziv coding (lz77), with a
32-bit crc.
...like the compress program, which has disappeared from most unix distributions, this content-encoding is not used by many browsers today, partly because of a patent issue (it expired in 200
3).
... specifications specification title rfc 79
32: brotli compressed data format brotli compressed data format rfc 72
31, section
3.1.2.2: content-encoding hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.11: content-encoding content-encoding ...
CSP: frame-ancestors - HTTP
mail.example.com:44
3: matches all attempts to access port 44
3 on mail.example.com.
... if no url scheme is specified for a host-source and the iframe is loaded from an https url, the url for the page loading the iframe must also be https, per the w
3c spec on matching source expressions.
... examples content-security-policy: frame-ancestors 'none'; content-security-policy: frame-ancestors 'self' https://www.example.org; specifications specification status comment content security policy level
3the definition of 'frame-ancestors' in that specification.
Date - HTTP
"04" or "2
3".
..."09" or "2
3".
... examples date: wed, 21 oct 2015 07:28:00 gmt new date().toutcstring() // "mon, 09 mar 2020 08:1
3:24 gmt" specifications specification title rfc 72
31, section 7.1.1.2: date hypertext transfer protocol (http/1.1): semantics and content ...
Expect-CT - HTTP
ct requirements can be satisfied via any one of the following mechanisms: x.509v
3 certificate extension to allow embedding of signed certificate timestamps issued by individual logs a tls extension of type signed_certificate_timestamp sent during the handshake supporting ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist when a site enables the expect-ct header, they are requesting that the browser check that any certificate for that site appears in public ct logs.
...certificates before march 2018 were allowed to have a lifetime of
39 months, those will all be expired in june 2021.
... if a cache receives a value greater than it can represent, or if any of its subsequent calculations overflows, the cache will consider this value to be either 2,147,48
3,648 (2
31) or the greatest positive integer it can represent.
If-Unmodified-Since - HTTP
"04" or "2
3".
..."09" or "2
3".
... examples if-unmodified-since: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 72
32, section
3.4: if-unmodified-since hypertext transfer protocol (http/1.1): conditional requests ...
Large-Allocation - HTTP
this page would be loaded in a new process due to a large-allocation header, however large-allocation process creation is disabled on non-win
32 platforms.
... firefox currently only supports the large-allocation header in our
32-bit windows builds, as memory fragmentation is not an issue in 64-bit builds.
... if you are running a non-win
32 version of firefox, this error will appear.
Last-Modified - HTTP
"04" or "2
3".
..."09" or "2
3".
... examples last-modified: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 72
32, section 2.2: last-modified hypertext transfer protocol (http/1.1): conditional requests ...
Location - HTTP
it only provides a meaning when served with a
3xx (redirection) or 201 (created) status response.
... in cases of redirection, the http method used to make the new request to fetch the page pointed to by location depends of the original method and of the kind of redirection: if
30
3 (see also) responses always lead to the use of a get method,
307 (temporary redirect) and
308 (permanent redirect) don't change the method used in the original request;
301 (permanent redirect) and
302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know).
... examples location: /index.html specifications specification title rfc 72
31, section 7.1.2: location hypertext transfer protocol (http/1.1): semantics and content ...
Transfer-Encoding - HTTP
like the compress program, which has disappeared from most unix distributions, this content-encoding is used by almost no browsers today, partly because of a patent issue (which expired in 200
3).
... gzip a format using the lempel-ziv coding (lz77), with a
32-bit crc.
...a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked 7\r\n mozilla\r\n 9\r\n developer\r\n 7\r\n network\r\n 0\r\n \r\n specifications specification title rfc 72
30, section
3.
3.1: transfer-encoding hypertext transfer protocol (http/1.1): message syntax and routing ...
User-Agent - HTTP
examples mozilla/5.0 (x11; linux x86_64) applewebkit/5
37.
36 (khtml, like gecko) chrome/51.0.2704.10
3 safari/5
37.
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>".
... examples mozilla/5.0 (x11; linux x86_64) applewebkit/5
37.
36 (khtml, like gecko) chrome/51.0.2704.106 safari/5
37.
36 opr/
38.0.2220.41 older, presto-based opera releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 version/10.00 opera/9.60 (windows nt 6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version.
... examples mozilla/5.0 (iphone; cpu iphone os 1
3_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/1
3.1.1 mobile/15e148 safari/604.1 internet explorer ua string examples mozilla/5.0 (compatible; msie 9.0; windows phone os 7.5; trident/5.0; iemobile/9.0) crawler and bot ua strings examples googlebot/2.1 (+http://www.google.com/bot.html) specifications specification title rfc 72
31, section 5.5.
3: user-agent hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.4
3: user-agent hypertext transfer protocol -- http/1.1 ...
Warning - HTTP
note: the warning header is soon to be deprecated; see warning (https://github.com/httpwg/http-core/issues/1
39) and warning: header & stale-while-revalidate (https://github.com/whatwg/fetch/issues/91
3) for more details.
... 11
3 heuristic expiration sent if a cache heuristically chose a freshness lifetime greater than 24 hours and the response's age is greater than 24 hours.
... 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 72
34, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
Network Error Logging - HTTP
usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age":
31556952 } an origin considered secure by the browser is required.
... the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age":
31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time":
338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "1
37.205.28.66", "status_code": 400, "type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
HTTP Public Key Pinning (HPKP) - HTTP
openssl s_client -servername www.example.com -connect www.example.com:44
3 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 example hpkp header public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws="; pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="c...
...upctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
HTTP range requests - HTTP
curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-102
3" the issued request looks like this: get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-102
3 the server responses with the 206 partial content status: http/1.1 206 partial content content-range: bytes 0-102
3/146515 content-length: 1024 ...
... curl http://www.example.com -i -h "range: bytes=0-50, 100-150" the server responses with the 206 partial content status and a content-type: multipart/byteranges; boundary=
3d6b6a416f9b5 header, indicating that a multipart byterange follows.
... http/1.1 206 partial content content-type: multipart/byteranges; boundary=
3d6b6a416f9b5 content-length: 282 --
3d6b6a416f9b5 content-type: text/html content-range: bytes 0-50/1270 <!doctype html> <html> <head> <title>example do --
3d6b6a416f9b5 content-type: text/html content-range: bytes 100-150/1270 eta http-equiv="content-type" content="text/html; c --
3d6b6a416f9b5-- conditional range requests when resuming to request more parts of a resource, you need to guarantee that the stored resource has not been modified since the last fragment has been received.
Iterators and generators - JavaScript
nextindex, done: false } nextindex += step; iterationcount++; return result; } return { value: iterationcount, done: true } } }; return rangeiterator; } using the iterator then looks like this: const it = makerangeiterator(1, 10, 2); let result = it.next(); while (!result.done) { console.log(result.value); // 1
3 5 7 9 result = it.next(); } console.log("iterated over sequence of size: ", result.value); // [5 numbers returned, that took interval in between: 0 to 10] note: it is not possible to know reflectively whether a particular object is an iterator.
... // if we change it's @@iterator method to a function/generator // which returns a new iterator/generator object, (it) // can iterate many times it[symbol.iterator] = function* () { yield 2; yield 1; }; user-defined iterables you can make your own iterables like this: const myiterable = { *[symbol.iterator]() { yield 1; yield 2; yield
3; } } for (let value of myiterable) { console.log(value); } // 1 // 2 //
3 or [...myiterable]; // [1, 2,
3] built-in iterables string, array, typedarray, map and set are all built-in iterables, because their prototype objects all have a symbol.iterator method.
... let reset = yield current; [current, next] = [next, next + current]; if (reset) { current = 0; next = 1; } } } const sequence = fibonacci(); console.log(sequence.next().value); // 0 console.log(sequence.next().value); // 1 console.log(sequence.next().value); // 1 console.log(sequence.next().value); // 2 console.log(sequence.next().value); //
3 console.log(sequence.next().value); // 5 console.log(sequence.next().value); // 8 console.log(sequence.next(true).value); // 0 console.log(sequence.next().value); // 1 console.log(sequence.next().value); // 1 console.log(sequence.next().value); // 2 you can force a generator to throw an exception by calling its throw() method and passing the exception value it should throw.
Regular expressions - JavaScript
there is a proposal to add such a function to regexp, but it was rejected by tc
39.
... within non-capturing parentheses (?: , the regular expression looks for three 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.
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?
... var o = { a: 2, m: function() { return this.a + 1; } }; console.log(o.m()); //
3 // when calling o.m in this case, 'this' refers to o var p = object.create(o); // p is an object that inherits from o p.a = 4; // creates a property 'a' on p console.log(p.m()); // 5 // when p.m is called, 'this' refers to p.
JavaScript technologies overview - JavaScript
javascript, the core language (ecmascript) the core language of javascript is standardized by the ecma tc
39 committee as a language named ecmascript.
... internationalization api the ecmascript internationalization api specification is an addition to the ecmascript language specification, also standardized by ecma tc
39.
...the w
3c standardizes the core document object model, which defines language-agnostic interfaces that abstract html and xml documents as objects, and also defines mechanisms to manipulate this abstraction.
Memory Management - JavaScript
var n = 12
3; // allocates memory for a number var s = 'azerty'; // allocates memory for a string var o = { a: 1, b: null }; // allocates memory for an object and contained values // (like object) allocates memory for the array and // contained values var a = [1, null, 'abra']; function f(a) { return a + 2; } // allocates a function (which is a callable object) // function expressions also allocate ...
... var d = new date(); // allocates a date object var e = document.createelement('div'); // allocates a dom element some methods allocate new values or objects: var s = 'azerty'; var s2 = s.substr(0,
3); // s2 is a new string // since strings are immutable values, // javascript may decide to not allocate memory, // but just store the [0,
3] range.
... var a = ['ouais ouais', 'nan nan']; var a2 = ['generation', 'nan nan']; var a
3 = a.concat(a2); // new array with 4 elements being // the concatenation of a and a2 elements.
Deprecated and obsolete features - JavaScript
the following traps are obsolete: hasown (bug 980565, firefox
33).
... getenumerablepropertykeys (bug 78
3829, firefox
37) getownpropertynames (bug 1007
334, firefox
33) keys (bug 1007
334, firefox
33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
... string.prototype.quote is removed from firefox
37.
TypeError: setting getter-only property "x" - JavaScript
it doesn't specify a setter, so a typeerror will be thrown upon trying to set the temperature property to
30.
... "use strict"; function archiver() { var temperature = null; object.defineproperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; } }); } var arc = new archiver(); arc.temperature; // 'get!' arc.temperature =
30; // typeerror: setting getter-only property "temperature" to fix this error, you will either need to remove line 16, where there is an attempt to set the temperature property, or you will need to implement a setter for it, for example like this: "use strict"; function archiver() { var temperature = null; var archive = []; object.defineproperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; }, ...
... set: function(value) { temperature = value; archive.push({ val: temperature }); } }); this.getarchive = function() { return archive; }; } var arc = new archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 1
3; arc.getarchive(); // [{ val: 11 }, { val: 1
3 }] ...
TypeError: "x" is not a function - JavaScript
let obj = {a: 1
3, b:
37, c: 42}; obj.map(function(num) { return num * 2; }); // typeerror: obj.map is not a function use an array instead: let numbers = [1, 4, 9]; numbers.map(function(num) { return num * 2; }); // array [2, 8, 18] function shares a name with a pre-existing property sometimes when making a class, you may have a property and a function with the same name.
...tead: var dog = function () { this.age = 11; this.color = "black"; this.dogname = "ralph"; //using this.dogname instead of .name return this; } dog.prototype.name = function(name) { this.dogname = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //dog { age: 11, color: 'black', dogname: 'cassidy' } using brackets for multiplication in math, you can write 2 × (
3 + 5) as 2*(
3 + 5) or just 2(
3 + 5).
... using the latter will throw an error: const sixteen = 2(
3 + 5); alert('2 x (
3 + 5) is ' + string(sixteen)); //uncaught typeerror: 2 is not a function you can correct the code by adding a * operator: const sixteen = 2 * (
3 + 5); alert('2 x (
3 + 5) is ' + string(sixteen)); //2 x (
3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly.
Array.prototype.copyWithin() - JavaScript
if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps
3-5.
... 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 i
32a = new int
32array([1, 2,
3, 4, 5]) i
32a.copywithin(0, 2) // i...
...nt
32array [
3, 4, 5, 4, 5] // on platforms that are not yet es2015 compliant: [].copywithin.call(new int
32array([1, 2,
3, 4, 5]), 0,
3, 4); // int
32array [4, 2,
3, 4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.copywithin' in that specification.
Array.prototype.filter() - JavaScript
function isbigenough(value) { return value >= 10 } let filtered = [12, 5, 8, 1
30, 44].filter(isbigenough) // filtered is [12, 1
30, 44] find all prime numbers in an array the following example returns all prime numbers in the array: const array = [-
3, -2, -1, 0, 1, 2,
3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1
3]; function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log(array.filter(isprime));...
... // [2,
3, 5, 7, 11, 1
3] filtering invalid entries from json the following example uses filter() to create a filtered json of all elements with non-zero, numeric id.
... let arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id:
3 }, { id: 12.2 }, { }, { id: null }, { id: nan }, { id: 'undefined' } ] let invalidentries = 0 function filterbyid(item) { if (number.isfinite(item.id) && item.id !== 0) { return true } invalidentries++ return false; } let arrbyid = arr.filter(filterbyid) console.log('filtered array\n', arrbyid) // filtered array // [{ id: 15 }, { id: -1 }, { id:
3 }, { id: 12.2 }] console.log('number of invalid entries = ', invalidentries) // number of invalid entries = 5 searching in array following example uses filter() to filter array content based on search criteria.
Array.prototype.findIndex() - JavaScript
polyfill // https://tc
39.github.io/ecma262/#sec-array.prototype.findindex if (!array.prototype.findindex) { object.defineproperty(array.prototype, 'findindex', { value: function(predicate) { // 1.
... var len = o.length >>> 0; //
3.
... 8, 9, 12].findindex(isprime)); // -1, not found console.log([4, 6, 7, 9, 12].findindex(isprime)); // 2 (array[2] is 7) find index using arrow function the following example finds the index of a fruit using an arrow function: const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; const index = fruits.findindex(fruit => fruit === "blueberries"); console.log(index); //
3 console.log(fruits[index]); // blueberries specifications specification ecmascript (ecma-262)the definition of 'array.prototype.findindex' 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...
...for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples map() and flatmap() let arr1 = [1, 2,
3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] arr1.flatmap(x => [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatmap(x => [[x * 2]]); // [[2], [4], [6], [8]] while the above could have been achieved by using map itself, here is an example that better showcases the use of flatmap.
... // let's say we want to remove all the negative numbers // and split the odd numbers into an even number and a 1 let a = [5, 4, -
3, 20, 17, -
33, -4, 18] // |\ \ x | | \ x x | // [4,1, 4, 20, 16, 1, 18] a.flatmap( (n) => (n < 0) ?
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.
... let arr = ['a', 'b', 'c'] arr.includes('c',
3) // false arr.includes('c', 100) // false computed index is less than 0 if fromindex is negative, the computed index is calculated to be used as a position in the array at which to begin searching for valuetofind.
... // array length is
3 // fromindex is -100 // computed index is
3 + (-100) = -97 let arr = ['a', 'b', 'c'] arr.includes('a', -100) // true arr.includes('b', -100) // true arr.includes('c', -100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic.
Array.prototype.indexOf() - JavaScript
//
3.
... let len be touint
32(lenvalue).
... var array = [2, 9, 9]; array.indexof(2); // 0 array.indexof(7); // -1 array.indexof(9, 2); // 2 array.indexof(2, -1); // -1 array.indexof(2, -
3); // 0 finding all the occurrences of an element var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexof(element); while (idx != -1) { indices.push(idx); idx = array.indexof(element, idx + 1); } console.log(indices); // [0, 2, 4] finding if an element exists in the array or not and updating the array function updatevegetablescollection (v...
Array.isArray() - JavaScript
array.isarray([1, 2,
3]); // true array.isarray({foo: 12
3}); // false array.isarray('foobar'); // false array.isarray(undefined); // false syntax array.isarray(value) parameters value the value to be checked.
... if (!array.isarray) { array.isarray = function(arg) { return object.prototype.tostring.call(arg) === '[object array]'; }; } examples using array.isarray // all following calls return true array.isarray([]); array.isarray([1]); array.isarray(new array()); array.isarray(new array('a', 'b', 'c', 'd')); array.isarray(new array(
3)); // little known fact: array.prototype itself is an array: array.isarray(array.prototype); // all following calls return false array.isarray(); array.isarray({}); array.isarray(null); array.isarray(undefined); array.isarray(17); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(
32)); array.isarray({ __proto__: array.prototype }); instanceof vs is...
... var iframe = document.createelement('iframe'); document.body.appendchild(iframe); xarray = window.frames[window.frames.length-1].array; var arr = new xarray(1,2,
3); // [1,2,
3] // correctly checking for array array.isarray(arr); // true // considered harmful, because doesn't work through iframes arr instanceof array; // false specifications specification ecmascript (ecma-262)the definition of 'array.isarray' in that specification.
Array.prototype.toLocaleString() - JavaScript
polyfill // https://tc
39.github.io/ecma402/#sup-array.prototype.tolocalestring if (!array.prototype.tolocalestring) { object.defineproperty(array.prototype, 'tolocalestring', { value: function(locales, options) { // 1.
... var len = a.length >>> 0; //
3.
... object: object.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() always display the currency for the strings and numbers in the prices array: var prices = ['￥7', 500, 812
3, 12]; prices.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "￥7,￥500,￥8,12
3,￥12" for more examples, see also the intl, numberformat, and datetimeformat pages.
Atomics - JavaScript
omics const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 5; atomics.add(ta, 0, 12); atomics.load(ta, 0); // 12 atomics.and(ta, 0, 1); atomics.load(ta, 0); // 1 atomics.compareexchange(ta, 0, 5, 12); atomics.load(ta, 0); // 12 atomics.exchange(ta, 0, 12); atomics.load(ta, 0); // 12 atomics.islockfree(1); // true atomics.islockfree(2); // true atomics.islockfree(
3); // false atomics.islockfree(4); // true atomics.or(ta, 0, 1); atomics.load(ta, 0); // 5 atomics.store(ta, 0, 12); // 12 atomics.sub(ta, 0, 2); atomics.load(ta, 0); //
3 atomics.xor(ta, 0, 1); atomics.load(ta, 0); // 4 waiting and notifiying given a shared int
32array: const sab = new sharedarraybuffer(1024); const int
32 = new int
32array(sab); a reading thread is sleeping and waiting o...
...however, once the writing thread has stored a new value, it will be notified by the writing thread and return the new value (12
3).
... atomics.wait(int
32, 0, 0); console.log(int
32[0]); // 12
3 a writing thread stores a new value and notifies the waiting thread once it has written: console.log(int
32[0]); // 0; atomics.store(int
32, 0, 12
3); atomics.notify(int
32, 0, 1); specifications specification ecmascript (ecma-262)the definition of 'atomics' in that specification.
BigInt64Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create a bigint64array // from a length var bigint64 = new bigint64array(2); bigint64[0] = 42n; console.log(bigint64[0]); // 42n console.log(bigint64.length); // 2 console.log(bigint64.bytes_per_element); // 8 // from an array var arr = new bigint64array([21n,
31n]); console.log(arr[1]); //
31n // from another typedarray var x = new bigint64array([21n,
31n]); var y = new bigint64array(x); console.log(y[0]); // 21n // from an arraybuffer var buffer = new arraybuffer(
32); var z = new bigint64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1n, 2n,
3n]; }(); var bigint64 = new bigint64array(iterable); // bigint64array[1n, 2n, ...
...
3n] specifications specification ecmascript (ecma-262)the definition of 'bigint64array' in that specification.
BigUint64Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create a biguint64array // from a length var biguint64 = new biguint64array(2); biguint64[0] = 42n; console.log(biguint64[0]); // 42n console.log(biguint64.length); // 2 console.log(biguint64.bytes_per_element); // 8 // from an array var arr = new biguint64array([21n,
31n]); console.log(arr[1]); //
31n // from another typedarray var x = new biguint64array([21n,
31n]); var y = new biguint64array(x); console.log(y[0]); // 21n // from an arraybuffer var buffer = new arraybuffer(
32); var z = new biguint64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1n, 2n,
3n]; }(); var biguint64 = new biguint64array(iterable); // biguint64array[1n...
..., 2n,
3n] specifications specification ecmascript (ecma-262)the definition of 'biguint64array' in that specification.
DataView.prototype.setBigInt64() - JavaScript
the highest possible value that fits in a signed 64-bit integer is 2n ** (64n -1n) - 1n (922
33720
36854775807n).
... upon overflow, it will be negative (-922
33720
36854775808n).
... examples using the setbigint64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.setbigint64(0,
3n); dataview.getbigint64(0); //
3n specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.setbigint64()' in that specification.
Date.UTC() - JavaScript
as of es2017, it no longer is.) day optional an integer between 1 and
31 representing the day of the month.
... hour optional an integer between 0 and 2
3 representing the hours.
...for example, if 15 is used for month, the year will be incremented by 1 (year + 1) and
3 will be used for the month.
Date.prototype.getHours() - JavaScript
syntax dateobj.gethours() return value an integer number, between 0 and 2
3, representing the hour for the given date according to local time.
... examples using gethours() the second statement below assigns the value 2
3 to the variable hours, based on the value of the date object xmas95.
... let xmas95 = new date('december 25, 1995 2
3:15:
30'); let hours = xmas95.gethours(); console.log(hours); // 2
3 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.gethours' in that specification.
Date.prototype.toLocaleDateString() - JavaScript
var date = new date(date.utc(2012, 11, 12,
3, 0, 0)); // tolocaledatestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaledatestring()); // → "12/11/2012" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...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 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 console.log(date.tolocaledatestring('en-us')); // → "12/19/2012" // british english uses day-month-year order console.log(date.tolocaledatestring('en-gb')); // → "20/12/2012" // korean uses year-month-day order console.log(date.tolocaledatestring('k...
...'ja-jp-u-ca-japanese')); // → "24/12/20" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(date.tolocaledatestring(['ban', 'id'])); // → "20/12/2012" using options the results provided by tolocaledatestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20,
3, 0, 0)); // request a weekday along with a long date var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(date.tolocaledatestring('de-de', options)); // → "donnerstag, 20.
Date.prototype.toLocaleString() - JavaScript
let date = new date(date.utc(2012, 11, 12,
3, 0, 0)); // tolocalestring() without arguments depends on the // implementation, the default locale, and the default time zone console.log(date.tolocalestring()); // → "12/11/2012, 7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...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: let date = new date(date.utc(2012, 11, 20,
3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012, 7:00:00 pm" // british english uses day-month-year order and 24-hour time without am/pm console.log(date.tolocalestring('en-gb')); // → "20/12/2012 0
3:00:00" //...
...japanese')); // → "24/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 date let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(date.tolocalestring('de-de', options)); // → "donnerstag, 20.
Date.prototype.toLocaleTimeString() - JavaScript
var date = new date(date.utc(2012, 11, 12,
3, 0, 0)); // tolocaletimestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaletimestring()); // → "7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all browsers yet.
...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 date = new date(date.utc(2012, 11, 20,
3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "7:00:00 pm" // british english uses 24-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); // → "0
3:00:00" // korean uses 12-hour time with am/pm console.log(date.tolocaletim...
...mestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(date.tolocaletimestring(['ban', 'id'])); // → "11.00.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 24-hour time console.log(date.tolocaletimestring('en-us', { hour12: false })); // → "19:00:00" // show only hours and minutes, use options with the default ...
Function.prototype.bind() - JavaScript
function list() { return array.prototype.slice.call(arguments); } function addarguments(arg1, arg2) { return arg1 + arg2 } const list1 = list(1, 2,
3); // [1, 2,
3] const result1 = addarguments(1, 2); //
3 // create a function with a preset leading argument const leadingthirtysevenlist = list.bind(null,
37); // create a function with a preset first argument.
... const addthirtyseven = addarguments.bind(null,
37); const list2 = leadingthirtysevenlist(); // [
37] const list
3 = leadingthirtysevenlist(1, 2,
3); // [
37, 1, 2,
3] const result2 = addthirtyseven(5); //
37 + 5 = 42 const result
3 = addthirtyseven(5, 10); //
37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object.
... // example can be run directly in your javascript console // ...continued from above // can still be called as a normal function // (although usually this is undesired) yaxispoint(1
3); `${emptyobj.x},${emptyobj.y}`; // > '0,1
3' if you wish to support the use of a bound function only using new, or only by calling it, the target function must enforce that restriction.
Intl - JavaScript
"ja-jp-u-ca-japanese": use the japanese calendar in date and time formatting, so that 201
3 is expressed as the year 25 of the heisei period, or 平成25.
... "en-gb-u-ca-islamic": use british english with the islamic (hijri) calendar, where the gregorian date 14 october, 2017 is the hijri date 24 muharram, 14
39.
... examples formatting dates and numbers you can use intl to format dates and numbers in a form that's conventional for a specific language and region: const count = 26254.
39; const date = new date("2012-05-24"); function log(locale) { console.log( `${new intl.datetimeformat(locale).format(date)} ${new intl.numberformat(locale).format(count)}` ); } log("en-us"); // expected output: 5/24/2012 26,254.
39 log("de-de"); // expected output: 24.5.2012 26.254,
39 specifications specification ecmascript internationalization api (ecma-402)the...
JSON.stringify() - JavaScript
// '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:04:05.000z"' json.stringify({ x: 5, y: 6 }); // '{"x":5,"y":6}' json.stringify([new number(
3), new string('false'), new boolean(false)]); // '[
3,"false",false]' // string-keyed array elements are not enumerable and make no sense in json let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] json.stringify(a); // '["foo","bar"]' json.stringify({ x: [10, undefined, function(){}, symbol('')] }); // '{"x":[10,null,null,null]}' // standard data structures...
... json.stringify([new set([1]), new map([[1, 2]]), new weakset([{a: 1}]), new weakmap([[{a: 1}, 2]])]); // '[{},{},{},{}]' // typedarray json.stringify([new int8array([1]), new int16array([1]), new int
32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clampedarray([1]), new uint16array([1]), new uint
32array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' json.stringify([new float
32array([1]), new float64array([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({...
... object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of json.stringify(): // creating an example of json var session = { 'screens': [], 'state': true }; session.screens.push({ 'name': 'screena', 'width': 450, 'height': 250 }); session.screens.push({ 'name': 'screenb', 'width': 650, 'height':
350 }); session.screens.push({ 'name': 'screenc', 'width': 750, 'height': 120 }); session.screens.push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width':
390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name...
Math.cbrt() - JavaScript
the math.cbrt() function returns the cube root of a number, that is math.cbrt(x)=x
3=the uniqueysuch thaty
3=x\mathtt{math.cbrt(x)} = \sqrt[
3]{x} = \text{the unique} \; y \; \text{such that} \; y^
3 = x the source for this interactive example is stored in a github repository.
... polyfill for all x≥0x \geq 0, have x
3=x1/
3\sqrt[
3]{x} = x^{1/
3} so this can be emulated by the following function: if (!math.cbrt) { math.cbrt = (function(pow) { return function cbrt(x){ // ensure negative numbers remain negative: return x < 0 ?
... -pow(-x, 1/
3) : pow(x, 1/
3); }; })(math.pow); // localize math.pow to increase efficiency } examples using math.cbrt() math.cbrt(nan); // nan math.cbrt(-1); // -1 math.cbrt(-0); // -0 math.cbrt(-infinity); // -infinity math.cbrt(0); // 0 math.cbrt(1); // 1 math.cbrt(infinity); // infinity math.cbrt(null); // 0 math.cbrt(2); // 1.25992104989487
32 specifications specification ecmascript (ecma-262)the definition of 'math.cbrt' in that specification.
Math.max() - JavaScript
examples using math.max() math.max(10, 20); // 20 math.max(-10, -20); // -10 math.max(-10, 20); // 20 getting the maximum element of an array array.reduce() can be used to find the maximum element in a numeric array, by comparing each value: var arr = [1,2,
3]; var max = arr.reduce(function(a, b) { return math.max(a, b); }); the following function uses function.prototype.apply() to get the maximum of an array.
... getmaxofarray([1, 2,
3]) is equivalent to math.max(1, 2,
3), but you can use getmaxofarray() on programmatically constructed arrays.
... function getmaxofarray(numarray) { return math.max.apply(null, numarray); } the new spread operator is a shorter way of writing the apply solution to get the maximum of an array: var arr = [1, 2,
3]; var max = math.max(...arr); however, both spread (...) and apply will either fail or return the wrong result if the array has too many elements, because they try to pass the array elements as function parameters.
Number.MAX_SAFE_INTEGER - JavaScript
the number.max_safe_integer constant represents the maximum safe integer in javascript (25
3 - 1).
...the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(25
3 - 1) and 25
3 - 1.
... polyfill if (!number.max_safe_integer) { number.max_safe_integer = 9007199254740991; // math.pow(2, 5
3) - 1; } examples return value of max_safe_integer number.max_safe_integer; // 9007199254740991 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
the number.min_safe_integer constant represents the minimum safe integer in javascript (-(25
3 - 1)).
...the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(25
3 - 1) and 25
3 - 1.
... examples using min_safe_integer number.min_safe_integer // -9007199254740991 -(math.pow(2, 5
3) - 1) // -9007199254740991 specifications specification ecmascript (ecma-262)the definition of 'number.min_safe_integer' in that specification.
Number.prototype.toFixed() - JavaScript
this can lead to unexpected results, such as 0.1 + 0.2 === 0.
3 returning false .
... examples using tofixed let numobj = 12
345.6789 numobj.tofixed() // returns '12
346': note rounding, no fractional part numobj.tofixed(1) // returns '12
345.7': note rounding numobj.tofixed(6) // returns '12
345.678900': note added zeros (1.2
3e+20).tofixed(2) // returns '12
3000000000000000000.00' (1.2
3e-10).tofixed(2) // returns '0.00' 2.
34.tofixed(1) // returns '2.
3' 2.
35.tofixed(1) // returns '2.4'.
...note it rounds down - see warning above -2.
34.tofixed(1) // returns -2.
3 (due to operator precedence, negative number literals don't return a string...) (-2.
34).tofixed(1) // returns '-2.
3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.tofixed' in that specification.
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", <va...
...lue>:
33 } an empty iterable causes the returned promise to be forever pending: var foreverpendingpromise = promise.race([]); console.log(foreverpendingpromise); settimeout(function(){ console.log('the stack is now empty'); console.log(foreverpendingpromise); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already settled promise, then promise.race will resolve to the first of these values found in the array: var foreverpendingpromise = promise.race([]); var alreadyfulfilledprom = promise.resolve(100); var arr = [foreverpendingpromise, alreadyfulfilledprom, "non-promise value"]; var arr2 = [foreverpendingpromise, "non-promise value", promise.re...
... <value>: "non-promise value" } using promise.race – examples with settimeout var p1 = new promise(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 p
3 = new promise(function(resolve, reject) { settimeout(() => resolve('three'), 100); }); var p4 = new promise(function(resolve, reject) { settimeout(() => reject(new error('four')), 500); }); promise.race([p
3, p4]) .then(function(value) { console.log(value); // "three" // p
3 is faster, so it fulfills }, function(reason) { // not called }); var p5 = new promise(function(resolve, reje...
Promise.resolve() - JavaScript
examples using the static promise.resolve method promise.resolve('success').then(function(value) { console.log(value); // "success" }, function(value) { // not called }); resolving an array var p = promise.resolve([1,2,
3]); p.then(function(v) { console.log(v[0]); // 1 }); resolving another promise var original = promise.resolve(
33); var cast = promise.resolve(original); cast.then(function(value) { console.log('value: ' + value); }); console.log('original === cast ?
...true // value:
33 the inverted order of the logs is due to the fact that the then handlers are called asynchronously.
... = { then: function(resolve) { throw new typeerror('throwing'); resolve('resolving'); }}; var p2 = promise.resolve(thenable); p2.then(function(v) { // not called }, function(e) { console.error(e); // typeerror: throwing }); // thenable throws after callback // promise resolves var thenable = { then: function(resolve) { resolve('resolving'); throw new typeerror('throwing'); }}; var p
3 = promise.resolve(thenable); p
3.then(function(v) { console.log(v); // "resolving" }, function(e) { // not called }); specifications specification ecmascript (ecma-262)the definition of 'promise.resolve' in that specification.
String.fromCodePoint() - JavaScript
its.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 % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x
3fff) { 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(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fromcodepoint(0x1d
306, 0x61, 0x1d
307); // "\ud8
34\udf06a\ud8
34\udf07" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(
3.14); // rangeerror string.fromcodepoint(
3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror compared to fromcharcode() string.fromcharcode() cannot...
...instead, it requires the utf-16 surrogate pair in order to return a supplementary character: string.fromcharcode(0xd8
3c, 0xdf0
3); // code point u+1f
30
3 "night with string.fromcharcode(55
356, 57091); // stars" == "\ud8
3c\udf0
3" 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(0x1f
30
3); // or 127747 in decimal specifications specification ecmascript (ecma-262)the definition of 'string.fromcodepoint' in that specification.
String length - JavaScript
7) established a maximum length of 2^5
3 - 1 elements.
...in firefox, strings have a maximum length of 2**
30 - 2 (~1gb).
... 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\udc04z')); //
3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.prototype, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud87e\udc04z'.charlength); //
3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ console.l...
String.prototype.replace() - JavaScript
if a group n is not present (e.g., if group is
3), it will be replaced as a literal (e.g., $
3).
... (the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthesized submatches it specifies.) the following example will set newstring to 'abc - 12
345 - #$*%': function replacer(match, p1, p2, p
3, offset, string) { // p1 is nondigits, p2 digits, and p
3 non-alphanumerics return [p1, p2, p
3].join(' - '); } let newstring = 'abc12
345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); console.log(newstring); // abc - 12
345 - #$*% examples defining the regular expression in replace() in the following example, the regular expression is defin...
... function f2c(x) { function convert(str, p1, offset, s) { return ((p1 -
32) * 5/9) + 'c'; } let s = string(x); let test = /(-?\d+(?:\.\d*)?)f\b/g; return s.replace(test, convert); } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.replace' in that specification.
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 string
3 = `yet another string primitive`; const string4 = new string("a string object"); string primitives and string objects can be used interchangeably in most situations.
... 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–...
...\u{xxxxxx} (where x…xxxxxx is 1–6 hex digits; range of 0x0–0x10ffff) utf-
32 code unit / unicode code point between u+0000 and u+10ffff \xxx (where xx is 2 hex digits; range of 0x00–0xff) iso-8859-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long.
Uint16Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... var dv = uint16array([1, 2,
3]); // typeerror: calling a builtin uint16array constructor // without new is forbidden var dv = new uint16array([1, 2,
3]); examples different ways to create a uint16array // from a length var uint16 = new uint16array(2); uint16[0] = 42; console.log(uint16[0]); // 42 console.log(uint16.length); // 2 console.log(uint16.bytes_per_element); // 2 // from an array var arr = new uint16array([21,
31...
...]); console.log(arr[1]); //
31 // from another typedarray var x = new uint16array([21,
31]); var y = new uint16array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint16array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,
3]; }(); var uint16 = new uint16array(iterable); // uint16array[1, 2,
3] specifications specification ecmascript (ecma-262)the definition of 'typedarray constructors' in that specification.
Uint8ClampedArray() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 1
337; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,
31]); console.log(arr[1]); //
31 // from another typedarray var x = new uint8clampedarray([21,
31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffe...
...r = 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.Instance - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0exportschrome full support 57edge full support 16firefox full suppo...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Memory() constructor - JavaScript
note: a webassembly page has a constant size of 65,5
36 bytes, i.e., 64kib.
... webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i
32 = new uint
32array(memory.buffer); for (var i = 0; i < 10; i++) { i
32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0shared flagchrome full support 74edge full support 79firefox full s...
Bitwise AND (&) - JavaScript
syntax a & b description the operands are converted to
32-bit integers and expressed by a series of bits (zeroes and ones).
... numbers with more than
32 bits get their most significant bits discarded.
... for example, the following integer with more than
32 bits will be converted to a
32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
Bitwise OR (|) - JavaScript
syntax a | b description the operands are converted to
32-bit integers and expressed by a series of bits (zeroes and ones).
... numbers with more than
32 bits get their most significant bits discarded.
... for example, the following integer with more than
32 bits will be converted to a
32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
Bitwise XOR (^) - JavaScript
syntax a ^ b description the operands are converted to
32-bit integers and expressed by a series of bits (zeroes and ones).
... numbers with more than
32 bits get their most significant bits discarded.
... for example, the following integer with more than
32 bits will be converted to a
32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.
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(iterat...
... function* g
3() { yield* [1, 2]; yield* '
34'; yield* array.from(arguments); } const iterator = g
3(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—s...
... function* g4() { yield* [1, 2,
3]; return 'foo'; } function* g5() { const g4returnvalue = yield* g4(); console.log(g4returnvalue) // 'foo' return g4returnvalue; } const iterator = g5(); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value:
3, done: false} done is false because g5 generator isn't finished, only g4 console.log(iterator.next()); // {value: 'foo', done: true} specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
yield - JavaScript
function* countapplesales () { let salelist = [
3, 7, 5] for (let i = 0; i < salelist.length; i++) { yield salelist[i] } } once a generator function is defined, it can be used by constructing an iterator as shown.
... let applestore = countapplesales() // generator { } console.log(applestore.next()) // { value:
3, done: false } console.log(applestore.next()) // { value: 7, done: false } console.log(applestore.next()) // { value: 5, done: false } console.log(applestore.next()) // { value: undefined, done: true } you can also send a value with next(value) into the generator.
... 'step' evaluates as a return value in this syntax [rv] = yield [expression] function* counter(value) { let step; while (true) { step = yield ++value; if (step) { value += step; } } } const generatorfunc = counter(0); console.log(generatorfunc.next().value); // 1 console.log(generatorfunc.next().value); // 2 console.log(generatorfunc.next().value); //
3 console.log(generatorfunc.next(10).value); // 14 console.log(generatorfunc.next().value); // 15 console.log(generatorfunc.next(10).value); // 26 specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
break - JavaScript
examples break in while loop the following function has a break statement that terminates the while loop when i is
3, and then returns the value
3 * x.
... function testbreak(x) { var i = 0; while (i < 6) { if (i ==
3) { break; } i += 1; } return i * x; } break in labeled blocks the following code uses break statements with labeled blocks.
... function testbreak(x) { var i = 0; while (i < 6) { if (i ==
3) { (function() { break; })(); } i += 1; } return i * x; } testbreak(1); // syntaxerror: illegal break statement block_1: { console.log('1'); ( function() { break block_1; // syntaxerror: undefined label 'block_1' })(); } specifications specification ecmascript (ecma-262)the definition of 'break statement' in that specification.
for - JavaScript
for (let i = 0;; i++) { console.log(i); if (i >
3) break; // more statements } you can also omit all three blocks.
... var i = 0; for (;;) { if (i >
3) break; console.log(i); i++; } using for without a statement the following for cycle calculates the offset position of a node in the final-expression section, and therefore it does not require the use of a statement section, a semicolon is used instead.
...tnode; /* condition */ nleft += oitnode.offsetleft, ntop += oitnode.offsettop, oitnode = oitnode.offsetparent /* final-expression */ ); /* semicolon */ console.log('offset position of \'' + sid + '\' element:\n left: ' + nleft + 'px;\n top: ' + ntop + 'px;'); } /* example call: */ showoffsetpos('content'); // output: // "offset position of "content" element: // left: 0px; // top: 15
3px;" note: this is one of the few cases in javascript where the semicolon is mandatory.
let - JavaScript
ne will throw a referenceerror: // prints out 'undefined' console.log(typeof undeclaredvariable); // results in a 'referenceerror' console.log(typeof i); let i = 10; another example of temporal dead zone combined with lexical scoping due to lexical scoping, the identifier foo inside the expression (foo + 55) evaluates to the if block's foo, and not the overlying variable foo with the value of
33.
... function test(){ var foo =
33; if(foo) { let foo = (foo + 55); // referenceerror } } test(); this phenomenon may confuse you in a situation like the following.
... console.log(n); // object {a: [1,2,
3]} for (let n of n.a) { // referenceerror console.log(n); } } go({a: [1, 2,
3]}); other situations when used inside a block, let limits the variable's scope to that block.
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...
... 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!
...
3 output: name?
var - JavaScript
console.log(x, y); // 0 2 function b() { x =
3; // assigns
3 to existing file scoped x.
... console.log(x, y, z); //
3 4 5 } a(); // also calls b.
... console.log(x, z); //
3 5 console.log(typeof y); // "undefined", as y is local to function a specifications specification ecmascript (ecma-262)the definition of 'variable statement' in that specification.
Strict mode - JavaScript
" + nested(); } function notstrict() { return "i'm not strict."; } strict mode for modules ecmascript 2015 introduced javascript modules and therefore a
3rd way to enter strict mode.
...ws 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
34 requires that all properties named in an object literal be unique.
...this is not part of es5 (or even es
3)!
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 9
3.184.216.
34.
...at 2048 x 15
36, the ipad has over
3,145,000 pixels to be painted to the screen.
...there are specific properties and elements that instantiate a layer, including <video> and <canvas>, and any element which has the css properties of opacity, a
3d transform, will-change, and a few others.
Performance budgets - Web Performance
a ~$200 android device over a
3g connection), using multiple tools.
... a default baseline to reduce bounce rate is to achieve time to interactive under 5 seconds in
3g/4g, and under 2 seconds for subsequent loads.
... file size checks are the first line of defense against regressions but translating size back into time metrics can be difficult since development environments could be missing
3rd party scripts, and optimizations commonly provided by a cdn.
Understanding latency - Web Performance
in the developer tools, under the network table, you can switch the throttling option to 2g,
3g, etc.
...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 4
3seconds!
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
) { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification,
30000); } a new random notification is created every
30 seconds until it becomes too annoying and is disabled by the user.
... push example push needs the server part to work, so we're not able to include it in the js1
3kpwa example hosted on github pages, as it offers hosting of static files only.
...s file starts by registering the service worker: navigator.serviceworker.register('service-worker.js') .then(function(registration) { return registration.pushmanager.getsubscription() .then(async function(subscription) { // registration part }); }) .then(function(subscription) { // subscription part }); it is a little bit more complicated than the service worker we saw in the js1
3kpwa demo.
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.w
3.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
34 10" xmlns="http://www.w
3.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="gr...
... /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="1
3" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
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.w
3.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
34 10" xmlns="http://www.w
3.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="gr...
... /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="1
3" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
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 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w
3.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> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central...
... example svg <svg width="400" height="
300" viewbox="0 0
300
300" xmlns="http://www.w
3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m
30,20 l400,20 m
30,70 l400,70 m
30,120 l400,120 m
30,170 l400,170 m
30,220 l400,220 m
30,270 l400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="70" y="20">auto</...
...baseline="middle" x="70" y="70">middle</text> <text dominant-baseline="baseline" x="70" y="120">baseline</text> <text dominant-baseline="hanging" x="70" y="170">hanging</text> <text dominant-baseline="mathematical" x="70" y="220">mathematical</text> <text dominant-baseline="text-top" x="70" y="270">text-top</text> <!-- materialization of anchors --> <circle cx="60" cy="20" r="
3" fill="red" /> <circle cx="60" cy="70" r="
3" fill="red" /> <circle cx="60" cy="120" r="
3" fill="red" /> <circle cx="60" cy="170" r="
3" fill="red" /> <circle cx="60" cy="220" r="
3" fill="red" /> <circle cx="60" cy="270" r="
3" fill="red" /> <style><![cdata[ text { font: bold
30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> result specifications s...
dx - SVG: Scalable Vector Graphics
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray:
3px; } altglyph warning: a...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="
30%" x2="
30%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- behaviors change based on the num...
...ber of values in the attributes --> <text dx="20%" x="10%" y="25%">svg</text> <text dx="0 10%" x="10%" y="50%">svg</text> <text dx="0 10% 20%" x="10%" y="75%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray:
3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
dy - SVG: Scalable Vector Graphics
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="
30%" y2="
30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="
30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="
30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray:
3px; } altglyph warning:...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w
3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="
30" y2="
30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="50" x2="50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y2="100%" /> <!-- behaviors cha...
...nge based on the number of values in the attributes --> <text dy="20" x="10" y="
30">svg</text> <text dy="0 10" x="50" y="
30">svg</text> <text dy="0 10 20" x="90" y="
30">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray:
3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
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.w
3.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(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w
3.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="6
3" y="6
3" 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.w
3.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"...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w
3.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" stro...
...ke="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="6
3" y="6
3" 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.w
3.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"...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w
3.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" stro...
...ke="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="6
3" y="6
3" 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.
letter-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
... specifications specification status comment css text module level
3the definition of 'letter-spacing' in that specification.
... working draft svg 2 just refers to the definition in css text
3.
order - 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.w
3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="
3 0 0 0 0 0 0 0 -4" order="
3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="
3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#...
...emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value
3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
... it is recommended that only small values (e.g.,
3) be used; higher values may result in very high cpu overhead and usually do not produce results that justify the impact on performance.
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w
3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,
35 2,
35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,
35 2,
35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates b...
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w
3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,
35 2,
35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w
3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,
35 2,
35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0
30 10" xmlns="http://www.w
3.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.
...thus, 5,
3,2 is equivalent to 5,
3,2,5,
3,2.
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0
38
30" xmlns="http://www.w
3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-
3 l7 ,
3 m2,0 l
3.5 ,-
3 l
3.5 ,
3 m2,0 l2 ,-
3 l2 ,
3 m2,0 l0.75,-
3 l0.75,
3 m2,0 l0.5 ,-
3 l0.5 ,
3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black" fil...
...l="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="m1,19 l7 ,-
3 l7 ,
3 m2, 0 l
3.5 ,-
3 l
3.5 ,
3 m2, 0 l2 ,-
3 l2 ,
3 m2, 0 l0.75,-
3 l0.75,
3 m2, 0 l0.5 ,-
3 l0.5 ,
3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p
3" d="m1,29 l7 ,-
3 l7 ,
3 m2, 0 l
3.5 ,-
3 l
3.5 ,
3 m2, 0 l2 ,-
3 l2 ,
3 m2, 0 l0.75,-
3 l0.75,
3 m2, 0 l0.5 ,-
3 l0.5 ,
3" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path stroke="pink" fill="none" stroke-width="0.05" d="m1, 9 l7,-
3 l7,
3 m2,0 l
3.5,-
3 l
3.5,
3 m2,0 l2,-
3 l2,
3 m2,0 l0.75,-
3 l0.75,
3 m2,0 l0.5,-...
...
3 l0.5,
3 m1,19 l7,-
3 l7,
3 m2,0 l
3.5,-
3 l
3.5,
3 m2,0 l2,-
3 l2,
3 m2,0 l0.75,-
3 l0.75,
3 m2,0 l0.5,-
3 l0.5,
3 m1,29 l7,-
3 l7,
3 m2,0 l
3.5,-
3 l
3.5,
3 m2,0 l2,-
3 l2,
3 m2,0 l0.75,-
3 l0.75,
3 m2,0 l0.5,-
3 l0.5,
3" /> </svg> when two line segments meet at a sharp angle and miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path.
text-decoration - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w
3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes for a description of the val...
... specifications specification status comment css text decoration module level
3the definition of 'text-decoration' in that specification.
... candidate recommendation mainly refers to the definition in css text decoration
3 turning the property into a shorthand for text-decoration-line and text-decoration-style.
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w
3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percenta...
...it's pretty basic, with a 1000-by-
300 pixel space mapped into a 10 centimeter by
3 centimeter box.
... <svg width="10cm" height="
3cm" viewbox="0 0 1000
300" xmlns="http://www.w
3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w
3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the css letter-spacing property.
... specifications specification status comment css text module level
3the definition of 'word-spacing' in that specification.
... working draft svg 2 just refers to the definition in css text
3.
writing-mode - SVG: Scalable Vector Graphics
specifications specification status comment css writing modes module level
3the definition of 'writing-mode' in that specification.
... proposed recommendation definition in css writing modes
3 scalable vector graphics (svg) 2the definition of 'writing-mode' in that specification.
... candidate recommendation mainly refers to the definition in css writing modes
3 and defines a mapping between the deprecated svg 1.1 values and the new values.
x - SVG: Scalable Vector Graphics
dropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0
300 100" xmlns="http://www.w
3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... 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.w
3.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 --...
... 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.w
3.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 sing...
x1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w
3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black...
x2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w
3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="bl...
y - SVG: Scalable Vector Graphics
shadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100
300" xmlns="http://www.w
3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w
3.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 --...
... 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.w
3.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 sing...
y1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w
3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
y2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w
3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w
3.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="#0000f...
... <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="
30" width="100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="1
30" width="100%" height="20" style="filter:url(#table)"></rect> <text x="0" y="170">discrete table lookup</text> <rect x="0" y="180" width="100%" height="20" style="fi...
...lter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="2
30" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<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 2
35 2
35 100 120 140 2
35 2
35 200 220 240 2
35 2
35 225 225 255 255 255 225 225 255 255 255 and you define a
3-by-
3 convolution kernel as follows: 1 2
3 4 5 6 7 8 9 let's focus on the color value at the second row and second column of the image (source pixel value is 120).
... assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 +
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+
3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
... example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="
3 0 0 0 0 0 0 0 -
3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w
3.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"> <fepo...
...intlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k
3="0" k4="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="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k
3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightme2)" /> <!
...-- the light source is a fespotlight source --> <text text-anchor="middle" x="
390" y="22">fespotlight</text> <filter id="lightme
3"> <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" k
3="0" k4="0"/> </filter> <circle cx="
390" cy="80" r="50" fill="green" filter="url(#lightme
3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '<fediffuselighting>' in that specificati...
Scripting - SVG: Scalable Vector Graphics
function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w
3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; ...
...} } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer
3.0 automatically includes a window property called svgdocument that points to the svg document.
...this behaviour is specified by the w
3c in the dom level 2 style specification.
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with radius 100 is painted.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green" /> <re...
...hence, if you set a stroke opacity on an element, that also has a fill, the fill will shine through on half of the stroke, while on the other half the background will appear: <svg width="200" height="200" version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <rect x="0" y="0" width="200" height="200" fill="blue" /> <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> </svg> screenshotlive sample you see in this example the red circle on blue background.
Texts - SVG: Scalable Vector Graphics
<text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="
350" height="60" xmlns="http://www.w
3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text.
... textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w
3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w
3.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.w
3.org/1999/xlink" xlink:href="#my_path"> a curve.
Templates - Archive of obsolete content
example
3 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <label uri="rdf:*" value="rdf:http://home.netscape.com/nc-rdf#name rdf:http://home.netscape.com/nc-rdf#url"/> </template> </vbox> how templates are built when an element has a datasources attribute, it indicates that the element is expected to be built from a template.
... rule example the following example demonstrates the earlier example with two rules: example 4 : source <window id="example-window" title="bookmarks list" xmlns:html="http://www.w
3.org/1999/xhtml" xmlns:rdf="http://www.w
3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="16"/> </rule> <rule> <button uri="rdf:*" label="...
Using nsIXULAppInfo - Archive of obsolete content
const firefox_id = "{ec80
30f7-c20a-464f-9b0e-1
3a
3a9e97
384}"; const thunderbird_id = "{
3550f70
3-e582-4d05-9a08-45
3d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b6
3a}"; 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) {...
...etservice(components.interfaces.nsiversioncomparator); if(versionchecker.compare(appinfo.version, "1.5") >= 0) { // running under firefox 1.5 or later } see nsiversioncomparator for details example 2: dealing with nightlies var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.appbuildid >= "200509
3006") { // running on a build after 200509
3006 } you shouldn't rely on build ids for releases, as build id might be different for custom build or a localized version of an application.
XUL element attributes - Archive of obsolete content
persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 152
32).
...firefox
3 provides
3 built-in datasources: 'rdf', default, 'xml' and 'storage'.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option
3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups.
...the manage bookmarks window in firefox 2 or the places window in firefox
3).
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w
3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /...
... original author: ian oeschger other documents: w
3c dom events, mozilla xul events original document information author(s): ian oeschger last updated date: january 18, 2002 copyright information: copyright (c) ian oeschger ...
datepicker - Archive of obsolete content
attributes disabled, firstdayofweek, readonly, type, tabindex, value properties date, dateleadingzero, datevalue, disabled, month, monthleadingzero, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker type="grid" value="2007-0
3-26"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... properties date type: integer the currently selected date of the month from 1 to
31.
description - Archive of obsolete content
</description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width:
300px"></description> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
listitem - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
menu - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
menulist - Archive of obsolete content
table, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option
3" value="
3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
radio - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
richlistitem - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof);
3) use setuserdata() (future-proof and clean, but not easily serializable).
...this property is available for menuitem and menuseparator elements in firefox
3.
scrollbox - Archive of obsolete content
<vbox> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="0
3 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, scroll bars will sprout out of nowhere and allow the user to scroll around the big content in the small view ...
... <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="0
3 this continent, a new nation, "/> <label value="04 conceived in liberty, and "/> <label value="05 dedicated to the proposition "/> <label value="06 that all men are created equal."/> </vbox> the flex="1" above may or may not be needed, or even desired.
splitter - Archive of obsolete content
<tree id="tree1" flex="1" height="
300" enablecolumndrag="true"> <treecols> <treecol id="name" label="name" flex="1"/> <splitter class="tree-splitter"/> <treecol id="id" label="id" flex="1"/> <splitter class="tree-splitter"/> <treecol id="date" label="date" flex="1"/> <splitter class="tree-splitter"/> </treecols> <treechildren/> </tree> splitter resizing and overflow the degree to which a splitter wi...
...(however, because of bug 51
3597, only specifying both minheight and minwidth attributes, or specifying min-height or min-width in css, actually works to allow overflow.) ...
RDF in Fifty Words or Less - Archive of obsolete content
the cgi script actually generatesserialized rdf, which is basically just a way of formatting a graph into xml: <rdf:rdf xmlns:rdf="http://www.w
3.org/tr/wd-rdf-syntax#" xmlns:sm="http://www.mozilla.org/smart-mail/schema#"> <rdf:description about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox"> <sm:message id="402529
3"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> aunt helga "helga@netcenter.net" </sm:sender...
...> <sm:received-by>x-wing.mcom.com</sm:received-by> <sm:subject>great recipe for yam soup!</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=402529
3 </sm:body> </sm:message> <sm:message id="4025294"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> sarah waterson "waterson.2@postbox.acs.ohio-state.edu" </sm:sender> <sm:received-by>x-wing.mcom.com</sm:received-by> <sm:subject>we won our ultimate game</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294 </sm:body> </sm:message> </rdf:description> </rdf:rdf> upon receipt of the above monstrosity, the rdf eng...
XQuery - Archive of obsolete content
xquery is a w
3c standard language which is meant to be for xml what sql is for relational data--i.e., the ability to search, sort, extract, and remold data.
... tutorials w
3schools learn xquery in 10 minutes an introduction to xquery ...
XUL Parser in Python - Archive of obsolete content
it also, i'm afraid, only works on the win
32 platform, where the <tt>dir</tt> command it depends on gets you your xul files.
...after all the xul files in the specified directory and its subdirectories are fed to the parser and parsed (using the win
32 system's <tt>dir /s /b *.xul</tt> command), the dictionary of dictionaries is sorted and written into an html table.
Anatomy of a video game - Game development
the w
3c spec for requestanimationframe does not really define exactly when the browsers must perform the requestanimationframe callbacks.
... different monitors input at different rates:
30 fps, 75 fps, 100 fps, 120 fps, 144 fps, etc.
Game monetization - Game development
they will take care of driving the traffic and will split the earnings — usually in a 70/
30 or 50/50 deal, collected per month.
...it worked with the js1
3kgames competition — every participant got a free t-shirt, and some even gave back a few bucks to help keep it going in years to come.
Building up a basic demo with PlayCanvas - Game development
playcanvas is a popular
3d webgl game engine, originally created by will eastcott and dave evans.
... playcanvas engine built for modern browsers, playcanvas is a fully-featured
3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
Unconventional controls - Game development
we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold =
30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.innerhtml = 'leap motion: <br />' ...
...reshold) { playerx += 5; } if(verticaldegree > degreethreshold) { playery += 5; } else if(verticaldegree < -degreethreshold) { playery -= 5; } if(grabstrength == 1) { alert('boom!'); } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } if the horizontaldegree value is greater than our degreethreshold, which is
30 in this case, then the ship will be moved left 5 pixels on every frame.
Square tilemaps implementation: Static maps - Game development
we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the target coordinates and size (a different tile size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128,
320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128,
320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to compute the source x and y.
...this features an 8 x 8 map with tiles 64 x 64 pixels in size: var map = { cols: 8, rows: 8, tsize: 64, tiles: [ 1,
3,
3,
3, 1, 1,
3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1 ], gettile: function(col, row) { return this.tiles[row * map.cols + col] } }; rendering the map we can render the map by iterating over its columns and rows.
Create the Canvas and draw on it - Game development
tor, 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.
Finishing up - Game development
let's first add a variable to store the number of lives in the same place where we declared our other variables: var lives =
3; drawing the life counter looks almost the same as drawing the score counter — add the following function to your code, below the drawscore() function: function drawlives() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-65, 20); } instead of ending the game immediately, we will decrease the number of lives until they are no longer...
...owing three lines: alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game with this, we can add slightly more complex logic to it as given below: lives--; if(!lives) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-
30; dx = 2; dy = -2; paddlex = (canvas.width-paddlewidth)/2; } now, when the ball hits the bottom edge of the screen, we're subtracting one life from the lives variable.
Build the brick field - Game development
to begin with we've included the brickinfo object, as this will come in handy very soon: function initbricks() { brickinfo = { width: 50, height: 20, count: { row:
3, col: 7 }, offset: { top: 50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the ...
... checking the initbricks() code here is the complete code for the initbricks() function: function initbricks() { brickinfo = { width: 50, height: 20, count: { row:
3, col: 7 }, offset: { top: 50, left: 60 }, padding: 10 } bricks = game.add.group(); for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { var brickx = (c*(brickinfo.width+brickinfo.padding))+brickinfo.offset.left; var bricky = (r*(brickinfo.height+brickinfo.paddin...
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge datagram transport layer security on wikipedia specifications rfc 6
347: datagram transport layer security version 1.2 datagram transport layer security protocol version 1.
3 draft specification related specifications rfc 576
3: framework for establishing a secure real-time transport protocol (srtp) security context using dtls rfc 5764: dtls extension to establish keys for the secure real-time transport protocol (srtp) rfc 608
3: dtls for stream control transm...
...ission protocol (sctp) rfc 8261: datagram transport layer security (dtls) encapsulation of sctp packets rfc 7
350: datagram transport layer security (dtls) as transport for session traversal utilities for nat (stun) rfc 7925: tls / dtls profiles for the internet of things ...
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
a basic request with one header: get /example.http http/1.1 host: example.com redirects have mandatory headers (location):
302 found location: /newpage.html a typical set of headers:
304 not modified access-control-allow-origin: * age: 2
318192 cache-control: public, max-age=
315
360000 connection: keep-alive date: mon, 18 jul 2016 16:06:00 gmt server: apache vary: accept-encoding via: 1.1
3dc
30c7222755f86e824b9
3feb8b5b8c.cloudfront.net (cloudfront) x-amz-cf-id: tol0fem6ui4fgldrkjx0vao5hpkkgzulyn2twd2gawltr7vlnjtvzw== ...
...x-backend-server: developer6.webapp.scl
3.mozilla.com x-cache: hit from cloudfront x-cache-info: cached ...
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
formerly available on mac and unix, microsoft discontinued those versions in 200
3 and 2001 respectively.
... http://windows.microsoft.com/en-us/internet-explorer/internet-explorer-help http://windows.microsoft.com/en-us/internet-explorer/make-ie-default-browser#ie=ie-11 technical reference http://windows.microsoft.com/en-us/internet-explorer/products/ie-8/system-requirements http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/system-requirements http://support.microsoft.com/kb/969
39
3 ...
BaseAudioContext.createConstantSource() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support 56edge full support ≤79firefox full support 5
3ie no support noopera full support 4
3safari no support nowebview android full support 56chrome android full support 56firefox android full support ...
... 5
3opera android full support 4
3safari ios no support nosamsung internet android full support 6.0legend full support full support no support no support ...
BaseAudioContext.createPeriodicWave() - Web APIs
var real = new float
32array(2); var imag = new float
32array(2); var ac = new audiocontext(); var osc = ac.createoscillator(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var wave = ac.createperiodicwave(real, imag, {disablenormalization: true}); osc.setperiodicwave(wave); osc.connect(ac.destination); osc.start(); osc.stop(2); this works because a sound that contains only a fundamental tone is by definiti...
...(a+bi)ei,(c+di)e2i,(f+gi)e
3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{
3i} etc.) and can be positive or negative.
BeforeInstallPromptEvent - Web APIs
ock; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
lay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" ...
...fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.frequency - Web APIs
frequency's default value is
350 with a nominal range of 10 to the nyquist frequency — that is, half of the sample rate.
... syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.frequency.value =
3000; note: though the audioparam returned is read-only, the value it represents is not.
BluetoothDevice - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" ...
...fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
BroadcastChannel - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
CSS - Web APIs
css.em(
3) // cssunitvalue {value:
3, unit: "em"} specifications specification status comment css painting api level 1the definition of 'paintworklet' in that specification.
... css conditional rules module level
3the definition of 'css' in that specification.
CSSMathSum - Web APIs
<div>has width</div> we assign a width div { width: calc(
30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2...
...} console.log( stylemap.get('width').values[0] ); // cssunitvalue {value:
30, unit: "percent"} console.log( stylemap.get('width').values[0].value ); //
30 console.log( stylemap.get('width').values[0].unit ); // 'percent' console.log( stylemap.get('width').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.log( stylemap.get('width').values[1].value ); // -20 console.log( stylemap.get('width').values[1].unit ); // 'px' the specification is still evolving.
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
on: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,
30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="...
...#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
CSSStyleSheet.insertRule() - Web APIs
insertrule; if (originalinsertrule.length === 2){ // 2 mandatory arguments: (selector, rules) sheet_proto.insertrule = function(selectorandrule){ // first, separate the selector from the rule a: for (var i=0, len=selectorandrule.length, isescaped=0, newcharcode=0; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 12
3)) { // 12
3 = "{".charcodeat(0) // secondly, find the last closing bracket var openbracketpos = i, closebracketpos = -1; for (; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 125)) { // 125 = "}".charcodeat(0) closebracketpos = i; } isescaped ^= newcharcod...
... /*else*/ return originalinsertrule.call( this, // the sheet to be changed selectorandrule.substring(0, openbracketpos), // the selector selectorandrule.substring(closebracketpos), // the rule arguments[
3] // the insert index ); } // works by if the char code is a backslash, then isescaped // gets flipped (xor-ed by 1), and if it is not a backslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertr...
CSSValueList - Web APIs
on: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,
30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7...
...f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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 Object Model (CSSOM) - Web APIs
screen orientation api working draft css fonts module level
3 candidate recommendation css animations working draft css transitions working draft css custom properties for cascading variables module level 1 candidate recommendation css conditional rules module level
3 candidate recommendation defined the css interface.
... css device adaptation working draft css counter styles level
3 candidate recommendation document object model (dom) level 2 style specification obsolete initial definition.
CanvasRenderingContext2D.arc() - Web APIs
to make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (
360°).
... html <canvas width="150" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw shapes for (let i = 0; i <=
3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2...
CanvasRenderingContext2D.ellipse() - Web APIs
to make a full ellipse, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (
360°).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50,
30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50,
30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50,
30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'ca...
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the first image is drawn at its natural size, the second is scaled to
3x and drawn with image smoothing enabled, and the third is scaled to
3x but drawn with image smoothing disabled.
... 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, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w *
3, h *
3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w *
3, h *
3); }; result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
: 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 illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25); result data loss due to browser optimization d...
... javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 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...
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10,
30,
30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </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.beginpath(); ctx.rect(10, 10,
30,
30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html livin...
CanvasRenderingContext2D.setLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(
300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(
300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(
300, y); ctx.stroke(); y += 20; } const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15,
3,
3,
3]); drawdashedline([20,
3,
3,
3,
3,
3,
3,
3]); drawdashedline([12,
3,
3]); // equals [12,
3,
3, 12,
3,
3] result specifications specification status comment html living standardthe definition of...
CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width =
350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '
30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 1
30); result direction-dependent ...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '
30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and
30 vertically.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110,
30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.addcolorstop(0, '#2
32256'); lingrad.addcolorstop(1, '#14
3778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } fu...
...nction drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.5257
31) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the center.
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.
Optimizing canvas - Web APIs
ctx.drawimage(myimage, 0.
3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect.
... <div id="stage"> <canvas id="ui-layer" width="480" height="
320"></canvas> <canvas id="game-layer" width="480" height="
320"></canvas> <canvas id="background-layer" width="480" height="
320"></canvas> </div> <style> #stage { width: 480px; height:
320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index:
3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> ...
Canvas API - Web APIs
the webgl api, which also uses the <canvas> element, draws hardware-accelerated 2d and
3d graphics.
... note: see the webgl api for 2d and
3d libaries that use webgl.
console.assert() - Web APIs
a javascript object following the assertion: const errormsg = 'the # is not even'; for (let number = 2; number <= 5; number += 1) { console.log('the # is ' + number); console.assert(number % 2 === 0, {number: number, errormsg: errormsg}); // or, using es2015 object property shorthand: // console.assert(number % 2 === 0, {number, errormsg}); } // output: // the # is 2 // the # is
3 // assertion failed: {number:
3, errormsg: "the # is not even"} // the # is 4 // the # is 5 // assertion failed: {number: 5, errormsg: "the # is not even"} note that, while a string containing a substitution string works as a parameter for console.log in node and many, if not most, browsers...
...chrome v67.0.
3396.87): // assertion failed: the word is %s foo see outputting text to the console in the documentation of console for further details.
console.count() - Web APIs
examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console output will look something like this: "default: 1" "default: 2" "default:
3" "default: 4" the label is displayed as default because no explicit label was supplied.
... if we pass the user variable as the label argument to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count("alice"); we will see output like this: "bob: 1" "alice: 1" "alice: 2" "alice:
3" we're now maintaining separate counts based only on the value of label.
Console.countReset() - Web APIs
examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console.countreset(); console output will look something like this: "default: 1" "default: 2" "default:
3" "default: 4" "default: 0" note that the call to console.counterreset() resets the value of the default counter to zero.
...variable as the label argument with the string "bob" to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.countreset("bob"); console.count("alice"); we will see output like this: "bob: 1" "alice: 1" "alice: 2" "bob: 0" "alice:
3" resetting the value of the counter "bob" only changes the value of that counter.
Using FormData Objects - Web APIs
creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 12
3456); // number 12
3456 is immediately converted to a string "12
3456" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
...simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="
32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="
32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventl...
Guide to the Fullscreen API - Web APIs
document.addeventlistener("keydown", function(e) { if (e.keycode == 1
3) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter key, as seen above.
... full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support 71 full support 71 full support ≤
37alternate name alternate 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 ...
GainNode() - Web APIs
for androidsafari on iossamsung internetgainnode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie no support noopera full support 42safari ?
... 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 5
3opera android full support 42safari ios ?
Using the Gamepad API - Web APIs
in current versions of chrome (version
34 as of this writing) the button values are stored as an array of double values, instead of gamepadbutton objects.
...navigator.webkitgetgamepads : []); if (!gamepads) { return; } var gp = gamepads[0]; if (buttonpressed(gp.buttons[0])) { b--; } else if (buttonpressed(gp.buttons[2])) { b++; } if (buttonpressed(gp.buttons[1])) { a++; } else if (buttonpressed(gp.buttons[
3])) { a--; } ball.style.left = a * 2 + "px"; ball.style.top = b * 2 + "px"; start = requestanimationframe(gameloop); } complete example: displaying gamepad state this example shows how to use the gamepad object, as well as the gamepadconnected and gamepaddisconnected events in order to display the state of all gamepads connected to the system.
GlobalEventHandlers.onanimationcancel - Web APIs
example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width:
300px; height:
300px; border: 1px solid black; } .button { cursor: pointer; width:
300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: c...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #22
33ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.
GlobalEventHandlers.onanimationend - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width:
300px; height:
300px; border: 1px solid black; } .button { cursor: pointer; width:
300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: ce...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #22
33ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width:
300px; height:
300px; border: 1px solid black; } .button { cursor: pointer; width:
300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: ce...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #22
33ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
GlobalEventHandlers.onanimationstart - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width:
300px; height:
300px; border: 1px solid black; } .button { cursor: pointer; width:
300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: ce...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #22
33ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onscroll - Web APIs
html <textarea>1 2
3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size:
3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status...
... living standard document object model (dom) level
3 events specificationthe definition of 'onscroll' in that specification.
HTMLCanvasElement.getContext() - Web APIs
this context is only available on browsers that implement webgl version 2 (opengl es
3.0).
... examples given this <canvas> element: <canvas id="canvas" width="
300" height="
300"></canvas> you can get a 2d context of the canvas with the following code: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); console.log(ctx); // canvasrenderingcontext2d { ...
HTMLCanvasElement.toBlob() - Web APIs
tion blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=
32'); save toblob to disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web sites.
... {tmppath:writepath + '.tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=
32'); specifications specification status comment html living standardthe definition of 'htmlcanvaselement.toblob' in that specification.
HTMLCanvasElement.width - Web APIs
when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of
300 is used.
... syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="
300" height="
300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); //
300 specifications specification status comment html living standardthe definition of 'htmlcanvaselement.width' in that specification.
HTMLElement.innerText - Web APIs
html <h
3>source element:</h
3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h
3>result of textcontent:</h
3> <textarea id="textcontentoutput" rows="6" cols="
30" readonly>...</textarea> <h
3>result of innertext:</h
3> <textar...
...ea id="innertextoutput" rows="6" cols="
30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that specification.
HTMLFormControlsCollection - Web APIs
ative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,
30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260...
..." height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
311" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width:
37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcrossoriginchrome full support 1
3edge full support 12firefox full support yesie full support 9opera full support yessafari full support yeswebview android full support ...
HTMLImageElement.height - Web APIs
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/17
37
3/clock-demo-200px.png" alt="clock" srcset="/files/17
37
3/clock-demo-200px.png 200w, /files/17
374/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.
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.
...*/ input.stepdown(); } } css input:invalid { border: red solid
3px; } result note if you don't pass a parameter to the stepdown() method, it defaults to 1.
HTMLInputElement.stepUp() - Web APIs
input type default step value example step declaration date 1 (day) 7 day (one week) increments: <input type="date" min="2019-12-25" step="7"> month 1 (month) 12 month (one year) increments: <input type="month" min="2019-12" step="12"> week 1 (week) two week increments: <input type="week" min="2019-w2
3" step="2"> time 60 (seconds) 900 second (15 minute) increments: <input type="time" min="09:00" step="900"> datetime-local 1 (day) same day of the week: <input type="datetime-local" min="019-12-25t19:
30" step="7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type...
...try it with 0 */ input.stepup() } } css input:invalid { border: red solid
3px; } result note if you don't pass a parameter to the stepup method, it defaults to 1.
HTMLOptionsCollection - Web APIs
ative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,
30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" hei...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLSelectElement.selectedOptions - Web APIs
html the html that creates the selection box and the <option> elements representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="
3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall.
...x = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length <
3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.
Dragging and Dropping Multiple Items - Web APIs
for example: var dt = event.datatransfer; dt.mozsetdataat("text/uri-list", "url1", 0); dt.mozsetdataat("text/plain", "url1", 0); dt.mozsetdataat("text/uri-list", "url2", 1); dt.mozsetdataat("text/plain", "url2", 1); dt.mozsetdataat("text/uri-list", "url
3", 2); dt.mozsetdataat("text/plain", "url
3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item
3] data=url
3, index=2 after you added three items in two different formats, dt.mozcleardataat("text/uri-list", 1); dt.mozcleardataat("text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
... // [item1] data=url1, index=0 // [item2] data=url
3, index=1 fortunately, you don't normally need to clear items often; it's more common to just add the items only when you know they are needed.
HashChangeEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fi...
...ll="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
IDBCursor.key - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeychrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
... opera android full support 4
3safari ios full support 10.
3samsung internet android full support 7.0legend full support full support partial support partial support comp...
IDBDatabase.deleteObjectStore() - Web APIs
for version <
3, 4...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteobjectstorechrome full support 24 full support 24 no support 2
3 — 24prefixed 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 ...
IDBDatabase.onclose - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonclosechrome full support
31notes full support
31notes notes approxedge full support ≤18firefox full support 50ie ?
... opera full support yessafari full support 10.1webview android full support yeschrome android full support
31firefox android full support 50opera android full support yessafari ios full support 10.
3samsung internet android full support 2.0legend full support full support compatibility unknown ...
databases - Web APIs
oid 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 9
34640.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 9
34640.opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support full support no support no supportexperimental.
IDBIndex.getAll() - Web APIs
if it is lower than 0 or greater than 2
32-1 a typeerror exception will be thrown.
... a typeerror exception is thrown if the count parameter is not between 0 and 2
32-1 included.
IDBIndex.getAllKeys() - Web APIs
if it is lower than 0 or greater than 2
32-1 a typeerror exception will be thrown.
... a typeerror exception is thrown if the count parameter is not between 0 and 2
32-1 included.
IDBKeyRange.includes() - Web APIs
opera full support
39safari full support 10.1webview android full support 52chrome android full support 52firefox android full support yesopera android full support 41safari ios f...
...ull support 10.
3samsung internet android full support 6.0legend full support full support compatibility unknown compatibility unknown ...
IDBObjectStore.add() - Web APIs
// 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: 24, month: "december", year: 201
3, 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.one...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.autoIncrement - Web APIs
// 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: 24, month: "december", year: 201
3, 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.one...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.createIndex() - Web APIs
locale currently firefox-only (4
3+), this allows you to specify a locale for the index.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateindexchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.getAll() - Web APIs
if it is lower than 0 or greater than 2
32-1 a typeerror exception will be thrown.
... a typeerror exception is thrown if the count parameter is not between 0 and 2
32-1 included.
IDBObjectStore.indexNames - Web APIs
// 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: 24, month: "december", year: 201
3, 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.on...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.keyPath - Web APIs
// 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: 24, month: "december", year: 201
3, 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.one...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.name - Web APIs
// 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: 24, month: "december", year: 201
3, 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.one...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBObjectStore.transaction - Web APIs
// 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: 24, month: "december", year: 201
3, 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.one...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBOpenDBRequest - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill=...
..."#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,
30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
371" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits m...
IDBRequest - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill=...
..."#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction.abort() - Web APIs
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: 24, month: "december", year: 201
3, 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>'; }; transactio...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabortchrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBTransaction.db - Web APIs
// 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: 24, month: "december", year: 201
3, 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...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBTransaction.error - Web APIs
// 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: 24, month: "december", year: 201
3, 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>'; }; transactio...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
IDBTransaction.mode - Web APIs
// 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: 24, month: "december", year: 201
3, 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...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodechrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBTransaction.objectStore() - Web APIs
// 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: 24, month: "december", year: 201
3, 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...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorechrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBTransaction.onabort - Web APIs
// 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: 24, month: "december", year: 201
3, 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...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBTransaction.oncomplete - Web APIs
// 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: 24, month: "december", year: 201
3, 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...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoncompletechrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBTransaction.onerror - Web APIs
// 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: 24, month: "december", year: 201
3, 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>'; }; transactio...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 24 full support 24 full support 2
3prefixed 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 ...
IDBVersionChangeEvent.oldVersion - Web APIs
for version <
3, 4...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support 24 full support 24 no support 2
3 — 57prefixed 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 ...
Basic concepts - Web APIs
indexeddb used to have a competing spec, websql database, but the w
3c deprecated it on november 18, 2010.
...note, however, that locale-aware sorting has been allowed with an experimental flag enabled (currently for firefox only) since firefox 4
3.
InputEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="2
31" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inpute...
KeyboardEvent.initKeyEvent() - Web APIs
this method is based on early drafts of document object model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented keyboardevent.initkeyboardevent based on early drafts of document object model (dom) level
3 events specification.
... the initkeyevent is the current gecko equivalent of the dom level
3 events (initially drafted and also deprecated in favor of keyboardevent() keyboard.initkeyboardevent() method with the following arguments : typearg of type domstring canbubblearg of type boolean cancelablearg of type boolean viewarg of type views::abstractview keyidentifierarg of type domstring keylocationarg of type unsigned long modifierslist of type domstring); ...
Location - Web APIs
me" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:2
30%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {b...
...ackground:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:
3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of ...
MediaConfiguration - Web APIs
example //create a video configuration to be tested const videodecoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate :
30 // number of frames making up that 1s.
... } }; const audioencoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 1
32700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDeviceInfo.deviceId - Web APIs
droidsafari on iossamsung internetdeviceidchrome full support 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfilledge full support 12firefox full support
39ie no support noopera no support nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari no support nowebview android full support ...
...tes notes for earlier versions, this interface is available through the adapter.js polyfillchrome android full support 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfillfirefox android full support
39opera android no support nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari ios no support nosamsung internet android full support 6.0notes full...
MediaDeviceInfo.kind - Web APIs
r androidsafari on iossamsung internetkindchrome full support 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfilledge full support 12firefox full support
39ie no support noopera no support nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari no support nowebview android full support ...
...tes notes for earlier versions, this interface is available through the adapter.js polyfillchrome android full support 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfillfirefox android full support
39opera android no support nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari ios no support nosamsung internet android full support 6.0notes full...
MediaDeviceInfo - Web APIs
navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua5
3cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz
368xcndm0= or if one or more media streams are active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua5
3cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvld...
...mxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz
368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevicesinfo' in that specification.
MediaDevices.enumerateDevices() - Web APIs
navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua5
3cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz
368xcndm0= or if one or more mediastreams are active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua5
3cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0ykety...
...cibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz
368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevices: enumeratedevices' in that specification.
MediaKeyMessageEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="5...
...0" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" ...
...fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" ...
...fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaKeyStatusMap.forEach() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeach experimentalchrome full support 42edge full support 1
3firefox ?
... webview android full support 4
3chrome android full support 42firefox android ?
MediaKeyStatusMap.get() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetget experimentalchrome full support 42edge full support 1
3firefox full support yesie ?
... webview android full support 4
3chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaKeyStatusMap.has() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethas experimentalchrome full support 42edge full support 1
3firefox full support yesie ?
... webview android full support 4
3chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaKeyStatusMap.size - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalchrome full support 42edge full support 1
3firefox full support yesie ?
... webview android full support 4
3chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaRecorder.audioBitsPerSecond - Web APIs
era 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 ?
... opera android full support
36safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
MediaRecorder.ignoreMutedMedia - Web APIs
ie no support noopera no support
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.
MediaSession.playbackState - Web APIs
example the following example sets up event handlers, for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp
3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment media session standardthe defin...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetplaybackstate experimentalchrome full support 7
3edge full support ≤79firefox no support noie no support noopera full support yessafari ?
MediaSource - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill...
...="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
MediaStream.id - Web APIs
the mediastream.id() read-only property is a domstring containing
36 characters denoting a unique identifier (guid) for the object.
...—
39safari full support yeswebview android no support ?
MediaStreamTrack.applyConstraints() - Web APIs
the advanced property further specifies that an image size of 1920 by 1280 is the preferred or an aspect ratio of 1.
333 if that is not available.
... const constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal: 720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.
333} ] }; navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
MediaStreamTrackEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="...
...50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
Using the MediaStream Recording API - Web APIs
instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0
3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9.
...first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size:
3rem; position: absolute; top: 2px; right:
3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow ...
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 1
3.
333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
Metadata.modificationTime - Web APIs
true }, function(fileentry) { fileentry.getmetadata(function(metadata) { if ((new date().getfullyear() - metadata.modificationtime.getfullyear()) >= 5) { fileentry.remove(function() { workingdirectory.getfile("tmp/workfile.json", { create: true }, function(newentry) { fileentry = newentry; }); }); } }); }, handleerror); this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodificationtime experimentalnon-standardchrome full support 1
3edge full support ≤79firefox no support noie no support noopera no support nosafari no support nowebview android no support noch...
Metadata.size - Web APIs
workingdirectory.getfile("log/important.log", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { fileentry.remove(function() { /* log file removed; do something clever here */ }); } }); }, handleerror); this api has no official w
3c or whatwg specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalnon-standardchrome full support 1
3edge full support ≤79firefox no support noie no support noopera no support nosafari no support nowebview android no support noch...
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment
3 gl.color_attachment4 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_attachment1
3 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_atta...
...chment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment
3_webgl ext.color_attachment4_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_attachment1
3_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
on iossamsung internetofflineaudiocompletionevent() constructorchrome full support 57notes full support 57notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie no support noopera full support 42safari ?
... full support 57notes notes before version 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 5
3opera android full support 42safari ios ?
OfflineAudioContext - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fil...
...l="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,
30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="
311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="
311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor of...
PageTransitionEvent - Web APIs
lay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50...
..." fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
PaymentAddress.country - Web APIs
the country read-only property of the paymentaddress interface is a string identifying the address's country using the iso
3166-1 alpha-2 standard.
... syntax var paymentcountry = paymentaddress.country; value a domstring which contains the iso
3166-1 alpha-2 code identifying the country in which the address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." usage notes if the payment handler validates the address and determines that the value of country is invalid, a call to paymentrequestupdateevent.updatewith() will be made with a details object containing a shippingaddresserrors field.
PaymentAddress.regionCode - Web APIs
the code is derived from the iso
3166-2 standard, which defines codes for identifying the subdivisions (e.g., states, provinces, autonomous regions, etc.) of all countries in the world.
...this should correspond to region, but should be the iso
3166--2 standard's region code.
PaymentAddress - Web APIs
paymentaddress.country read only a domstring specifying the country in which the address is located, using the iso-
3166-1 alpha-2 standard.
... paymentaddress.regioncode read only a domstring specifying the region of the address, represented as a "code element" of an iso
3166-2 country subdivision name (e.g.
PaymentRequest.abort() - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 5
3firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentRequest.canMakePayment() - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 5
3firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentRequest.prototype.id - Web APIs
const details = { id: "super-store-order-12
3-12
312", total: { label: "total due", amount: { currency: "usd", value: "65.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-12
3-12
312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute.
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 8.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable thi...
PaymentRequest.onshippingaddresschange - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 5
3firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentRequest.onshippingoptionchange - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 5
3firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentRequest.shippingOption - Web APIs
to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 5
3firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 11.
3samsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
Performance.timeOrigin - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimentalchrome full support 62edge full support 16firefox full support 5
3ie ?
... opera full support 49safari no support nowebview android full support 62chrome android full support 62firefox android full support 5
3opera android full support 46safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
PerformanceMark - Web APIs
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height=...
..."50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" heig...
...ht="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="...
...270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
336" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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".
PerformancePaintTiming - Web APIs
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" ...
...height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
311" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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".
PerformanceResourceTiming.nextHopProtocol - Web APIs
the nexthopprotocol read-only property is a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7
301).
... syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as identified by the alpn protocol id (rfc7
301).
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=2
3.2, db;dur=5
3, 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 ent...
...ries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 2
3.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 5
3, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.
Performance API - Web APIs
high resolution time level
3 editor's draft add timeorigin property to performance interface.
... resource timing level
3 editor's draft user timing recommendation adds mark(), clearmarks(), measure() and clearmeasures() methods to the performance interface.
PeriodicWave - Web APIs
var real = new float
32array(2); var imag = new float
32array(2); var ac = new audiocontext(); var osc = ac.createoscillator(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var wave = ac.createperiodicwave(real, imag, {disablenormalization: true}); osc.setperiodicwave(wave); osc.connect(ac.destination); osc.start(); osc.stop(2); this works because a sound that contains only a fundamental tone is by definiti...
...(a+bi)ei,(c+di)e2i,(f+gi)e
3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{
3i} etc.) and can be positive or negative.
Using the Permissions API - Web APIs
this article provides a basic guide to using the w
3c permissions api, which provides a programmatic way to query the status of api permissions attributed to the current context.
... 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 4
3 and later.
PointerEvent - Web APIs
pen stylus) around its major axis in degrees, with a value in the range 0 to
359.
... specifications specification status comment pointer events – level
3the definition of 'pointerevent' in that specification.
PopStateEvent - Web APIs
chrome did until version
34, while safari did until version 10.0.
...he popstate event as an example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page:
3}, "title
3", "?page=
3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=
3, state: {"page":
3} note that even though the original history entry (for http://example.com/example.html) has no state...
ProgressEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="1
30" height="50" fill...
...="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
lay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="...
...50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PushEvent.PushEvent() - Web APIs
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/0
3/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
... nochrome android full support 57firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android full support 4
3safari ios no support nosamsung internet android full support 4.0legend full support full support no support no supportexperimental.
Response.redirect() - Web APIs
status optional an optional status code for the response (e.g.,
302.) return value a response object.
... example responseobj.redirect('https://www.example.com',
302); specifications specification status comment fetchthe definition of 'redirect()' in that specification.
format - Web APIs
if the font is in one of the formats listed in css2([css2], section15.
3.5), then its value is the corresponding <string> parameter of the font.
... syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.
3.5).
SVGAnimationElement: endEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w
3.org/2000/svg" width="
300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h
300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; ...
... padding: 10px
30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.app...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w
3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="
30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in cir...
...cle console.log('point at 40,
30:', circle.ispointinfill(new dompoint(40,
30))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w
3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="
30" r="5" fill="seagreen"/> <circle cx="8
3" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispo...
...intinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,
30:', circle.ispointinstroke(new dompoint(40,
30))); // point in circle stroke console.log('point at 8
3,17:', circle.ispointinstroke(new dompoint(8
3, 17))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w
3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="
32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="
3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke...
...="#ff0000" stroke-width="
3" fill="none"></rect> </svg> javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.queryselector('#rect_2'); var groupelement = document.queryselector('#group_text_1'); var bboxgroup = groupelement.getbbox(); rectbbox.setattribute('x', bboxgroup.x); rectbbox.setattribute('y', bboxgroup.y); rectbbox.setattribute('width', bboxgroup.width); rectbbox.setattribute('height', bboxgroup.height); var boundingclientrectgroup = groupelement.getboundingclientrect(); rectboundingclientrect.setattribute('x', boundingclientrectgroup.x); rectboundingclientrect.setattribute('y', boundingclientrectgroup.y); rectboundingclientrect.setattribute('width', boundingclientrectgroup.width); rectboundingclientrect.setattribute('height', bound...
SVGPreserveAspectRatio - Web APIs
interface overview also implement none methods none properties unsigned short align unsigned short meetorslice constants svg_preserveaspectratio_unknown = 0 svg_preserveaspectratio_none = 1 svg_preserveaspectratio_xminymin = 2 svg_preserveaspectratio_xmidymin =
3 svg_preserveaspectratio_xmaxymin = 4 svg_preserveaspectratio_xminymid = 5 svg_preserveaspectratio_xmidymid = 6 svg_preserveaspectratio_xmaxymid = 7 svg_preserveaspectratio_xminymax = 8 svg_preserveaspectratio_xmidymax = 9 svg_preserveaspectratio_xmaxymax = 10 svg_meetorslice_unknown = 0 svg_meetorslice_meet = 1 svg_meetorslice_slice = 2...
... svg_preserveaspectratio_xmidymin
3 corresponds to value xmidymin for attribute preserveaspectratio.
SVGRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 2
3.
333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
SVGRenderingIntent - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
... rendering_intent_relative_colorimetric
3 corresponds to the value relative-colorimetric.
SVGTransform - Web APIs
(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale =
3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types.
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale
3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx 5 a skewx(…) transformation svg_transform_skewy 6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* constants defined on this interface.
SVGTransformList - Web APIs
<svg id="my-svg" viewbox="0 0
300 280" xmlns="http://www.w
3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that h...
...t.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 1
30,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications ...
ScreenOrientation.angle - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanglechrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support ...
ScreenOrientation.lock() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlockchrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support ...
ScreenOrientation.onchange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonchangechrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support ...
ScreenOrientation.type - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettypechrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support ...
ScreenOrientation.unlock() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetunlockchrome full support
38edge full support 79firefox full support 4
3ie no support noopera full support 25safari no support nowebview android full support ...
...
38chrome android full support
38firefox android full support 4
3opera android full support 25safari ios no support nosamsung internet android full support
3.0legend full support full support no support no support ...
ScriptProcessorNode - Web APIs
the buffer size must be a power of 2 between 256 and 16
384, that is 256, 512, 1024, 2048, 4096, 8192 or 16
384.
...its value can be a power of 2 value in the range 256–16
384.
ServiceWorkerGlobalScope - Web APIs
relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="2
36" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="
321,25
331,20
331,
30
321,25" stroke="#d4dde4" fill="none"/><line x1="
331" y1="25" x2="
361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="
361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SourceBuffer - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fil...
...l="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
SourceBufferList - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="2
31" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="1
30" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="1
31,25 141,20 141,
30 1
31,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/doc...
...s/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
roidsafari on iossamsung internetstereopannernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5
3ie 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 support...
...ed.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 5
3opera 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 ...
StorageEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill=...
..."#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
Streams API concepts - Web APIs
as an example, let's take a chunk size of 1, and a high water mark of
3.
... this means that up to
3 chunks can be enqueued before the high water mark is reached and backpressure is applied.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-
384", 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 = `$...
...{buffer}...[${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-
384" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-
384" }, 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", () => { // ali...
SubtleCrypto.digest() - Web APIs
supported values are: sha-1 (but don't use this in cryptographic applications) sha-256 sha-
384 sha-512.
... sha-
384 this algorithm is specified in fips 180-4, section 6.5, and produces an output
384 bits long.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength:
32, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-
384"}, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
SubtleCrypto.wrapKey() - Web APIs
aes-kw is specified in rfc
3394.
...(16)); const wrappingkey = await getkey(keymaterial, salt); iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.wrapkey( "jwk", keytowrap, wrappingkey, { name: "aes-gcm", iv: iv } ); } /* generate a sign/verify key pair, then wrap the private key */ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-
384" }, true, ["sign", "verify"] ) .then((keypair) => { return wrapcryptokey(keypair.privatekey); }) .then((wrappedkey) => { console.log(wrappedkey); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.wrapkey()' in that specification.
SyncEvent - Web APIs
ock; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fi...
...ll="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,
30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="
306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="
306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
351" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent...
TaskAttributionTiming - Web APIs
ive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,
30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" h...
...eight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
306" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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.
HTMLSlotElement.assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslotchrome full support 5
3edge full support ≤18firefox full support yesie ?
... opera full support 40safari full support 10.1webview android full support 5
3chrome android full support 5
3firefox android full support yesopera android full support 41safari ios full support 10.
3samsung internet android full support 6.0legend full support full support compatibility unknown ...
TextDecoder.prototype.decode() - Web APIs
syntax b1 = decoder.decode(buffer, options); b2 = decoder.decode(buffer); b
3 = decoder.decode(); parameters buffer optional is either an arraybuffer or an arraybufferview containing the text to decode.
... html <p>encoded value: <span id="encoded-value"></span></p> <p>decoded value: <span id="decoded-value"></span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(
3) [226, 1
30, 172] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "€" document.getelementbyid('decoded-value').textcontent = str; result specifications specification status comment encodingthe definition of 'textdecoder.decode()' in that specification.
TextDecoder.prototype.encoding - Web APIs
the legacy single-byte encodings: 'ibm866', 'iso-8859-2', 'iso-8859-
3', 'iso-8859-4', 'iso-8859-5', 'iso-8859-6', 'iso-8859-7', 'iso-8859-8'', 'iso-8859-8i', 'iso-8859-10', 'iso-8859-1
3', 'iso-8859-14', 'iso-8859-15', 'iso-8859-16', 'koi8-r', 'koi8-u', 'macintosh', 'windows-874', 'windows-1250', 'windows-1251', 'windows-1252', 'windows-125
3', 'windows-1254', 'windows-1255', 'windows-1256', 'windows-1257', 'windows-1258', or 'x-mac-cyrillic'.
... the legacy multi-byte chinese (simplified) encodings: 'gbk', 'gb180
30', and 'hz-gb-2
312'.
TextEncoder() - Web APIs
syntax encoder = new textencoder(); parameters textencoder() takes no parameters since firefox 48 and chrome 5
3 note: prior to firefox 48 and chrome 5
3, 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 5
3 note: prior to firefox 48 and chrome 5
3 an exception would be thrown for an unknown encoding type.
TimeEvent - Web APIs
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4...
...f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" 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
ck; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
38.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,
30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff"...
... stroke="#d4dde4" stroke-width="2px" /><text x="15
3.5" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,
30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="2
31" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="2
31" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchev...
Using Touch Events - Web APIs
// touchstart handler function process_touchstart(ev) { // use the event's data to call out to the appropriate gesture handlers switch (ev.touches.length) { case 1: handle_one_touch(ev); break; case 2: handle_two_touches(ev); break; case
3: handle_three_touches(ev); break; default: gesture_not_supported(ev); break; } } access the attributes of a touch point.
...lauke) community touch events community group mail list w
3c #touchevents irc channel related topics and resources pointer events standard ...
Touch events - Web APIs
function colorfortouch(touch) { var r = touch.identifier % 16; var g = math.floor(touch.identifier /
3) % 16; var b = math.floor(touch.identifier / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; console.log("color for touch with identifier " + touch.identifier + " = " + color); return color; } the result from this function is a string that can be used when calling...
...for example, for a touch.identifier value of 10, the resulting string is "#a
31".
UIEvent.layerX - Web APIs
alue = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d
3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <d...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d
3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications ...
UIEvent.layerY - Web APIs
alue = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d
3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <d...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d
3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications ...
UIEvent.pageY - Web APIs
lue = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d
3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <d...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d
3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this prope...
ULongRange - Web APIs
properties max a numeric value in the range of signed
32-bit integers, specifying the largest permissible value of the property it describes.
... min a numeric value in the range of signed
32-bit integers, specifying the smallest permissible value of the property it describes.
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 44
3 respectively, if explicitely specified).
... examples const url = new url("blob:https://mozilla.org:44
3/") console.log(url.origin); // logs 'https://mozilla.org' specifications specification status comment urlthe definition of 'url.origin' in that specification.
URLSearchParams.set() - Web APIs
params.set('baz',
3); params.tostring(); // "foo=1&bar=2&baz=
3" below is a real-life example demonstrating how to create a url and set some search parameters.
... line #4
3: dumps the generated object and it's string representation to the console (info).
URLUtilsReadOnly.hash - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethash experimentalchrome no support noedge no support nofirefox full support
38 full support
38 no support
3.5 —
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
38 full support
38 no support 4 —
38notes notes before firefox
38, firefox returned the hash percent encoded.
WebGLRenderingContext.scissor() - Web APIs
clear) // turn off scissor test again gl.disable(gl.scissor_test); to get the current scissor box dimensions, query the scissor_box constant which returns an int
32array.
... gl.scissor(0, 0, 200, 200); gl.getparameter(gl.scissor_box); // int
32array[0, 0, 200, 200] specifications specification status comment webgl 1.0the definition of 'scissor' in that specification.
Hello vertex attributes - Web APIs
margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.
34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersour...
...program(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float
32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float
32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addev...
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform
3d rendering in an html <canvas> in browsers that support it without the use of plug-ins.
... creating
3d objects using webgl shows how to create and animate a
3d object (in this case, a cube).
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
the real-time transport protocol (rtp), defined in rfc
3550, is an ietf standard protocol to enable real-time connectivity for exchanging data that needs real-time priority.
... since rtp is simply a data transport, it is augmented by the closely-related rtp control protocol (rtcp), which is defined in rfc
3550, section 6.
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 64-bit addressing system.
... but they realized that it would take longer to complete the transition than
32-bit addresses would last, so other smart people came up with a way to let multiple computers share the same
32-bit ip address.
Using bounded reference spaces - Web APIs
there are many uses for bounded reference spaces, including projects such as virtual paint studios or
3d construction, modeling, or sculpting systems; training simulations or lesson scenarios; dance or other performance-based games; or the preview of
3d objects in the real world using augmented reality.
... this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); let startposition = vec
3.fromvalues(0, 1.5, 0); const startorientation = vec
3.fromvalues(0, 0, 1.0); xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, startorientation)); xrsession.requestanimationframe(ondrawframe); } in this code, executed after the reference space has been created, we create an xrrigidtransform representing the transform that will move ...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
note: this article presumes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of
3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for individual objects or movable components within a scene.
... the world space; the origin of this space is the origin of the webgl coordinate system underlying the entire
3d canvas.
Starting up and shutting down a WebXR session - Web APIs
assuming you're already familiar with
3d graphics in general and webgl in particular, taking that next bold step into mixed reality—the idea of presenting artificial scenery or objects in addition to or in place of the real world—is not overly complicated.
... session.onvisibilitychange = (event) => { switch(event.session.visibilitystate) { case "hidden": myframerate = 10; break; case "blurred-visible": myframerate =
30; break; case "visible": default: myframerate = 60; break; } }; this example changes a variable myframerate depending on the visibility state as it changes.
Using the Web Speech API - Web APIs
browser support support for web speech api speech recognition is curently limited to chrome for desktop and android — chrome has supported it since around version
33 but with prefixed interfaces, so you need to include prefixed versions of them, e.g.
... chrome for desktop and android have supported it since around version
33, without prefixes.
window.cancelIdleCallback() - Web APIs
idopera for androidsafari on iossamsung internetcancelidlecallback experimentalchrome full support 47edge full support 79firefox full support 55 full support 55 full support 5
3disabled disabled from version 5
3: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
... no support nowebview android full support 47chrome android full support 47firefox android full support 55 full support 55 full support 5
3disabled disabled from version 5
3: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
Window.devicePixelRatio - Web APIs
ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10,
300,
300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the va...
...ratiochrome full support 1edge full support 12firefox full support 18ie full support 11opera full support 11.1safari full support
3webview android full support 1chrome android full support 18firefox android full support 18opera android full support 11.1safari ios full support 1samsung internet android ...
Window.event - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneteventchrome full support 1edge full support 12firefox full support 6
3notes disabled full support 6
3notes disabled notes this was briefly enabled by default in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).disabled from version 6
3: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
...ull support 4opera full support 7safari full support 1.1webview android full support 1chrome android full support 18firefox android full support 6
3notes disabled full support 6
3notes disabled notes this was briefly enabled by default in 65, then removed again while related compatibility issues are sorted out (see bug 1520756).disabled from version 6
3: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
Window.getComputedStyle() - Web APIs
<style> h
3::after { content: ' rocks!'; } </style> <h
3>generated content</h
3> <script> var h
3 = document.queryselector('h
3'); var result = getcomputedstyle(h
3, ':after').content; console.log('the generated content is: ', result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains active values for css property longhand names.
...so if you apply top:auto and bottom:0 on an element with height:
30px and a containing block of height:100px, firefox's computed style for top returns 70px, as 100 −
30 = 70.
Window.getDefaultComputedStyle() - Web APIs
<style> h
3:after { content: ' rocks!'; } </style> <h
3>generated content</h
3> <script> var h
3 = document.queryselector('h
3'), result = getdefaultcomputedstyle(h
3, ':after').content; console.log('the generated content is: ', result); // returns 'none' </script> notes the returned value is, in certain known cases, expressly incorrect by deliberate intent.
...see http://blog.mozilla.com/security/2010/0
3/
31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/0
3/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/5
37.
36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.
3396.87 mobile safari/5
37.
36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/5
37.
36 (khtml, like gecko) chrome/70.0.
35
38.102 safari/5
37.
36 opr/57.0.
3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft inte...
...rnet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom
3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/5
37.
36 (khtml, like gecko) chrome/58.0.
3029.110 safari/5
37.
36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/5
37.
36 (khtml, like gecko) ubuntu chromium/66.0.
3359.181 chrome/66.0.
3359.181 safari/5
37.
36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1
306" }...
Window.open() - Web APIs
google chrome (55.0.288
3.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener").
... in a few years, the target property of the css
3 hyperlink module may be implemented (if css
3 hyperlink module as it is right now is approved).
Window.pkcs11 - Web APIs
note: this property has been returned null since gecko 1.9.0.14 (firefox
3.0.14) and removed in gecko 29.0 (firefox 29 / thunderbird 29 / seamonkey 2.26)) for security reasons.
...see bug
326628 for details on why the property was removed.
Window.print() - Web APIs
ndbox 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...
...unless its sandbox attribute has the value allow-modals.firefox android no support nonotes no support nonotes notes see bug 1247609.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 insi...
Window.prompt() - Web APIs
desktop versions of ie do implement this function.opera full support
3notes full support
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 ...
... 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 insi...
window.requestIdleCallback() - Web APIs
no support 5
3 — 55notes notes implemented but disabled by default.ie no support noopera full support
34safari no support nowebview android full support 47chrome android full support 47fi...
... no support 5
3 — 55notes notes implemented but disabled by default.opera android full support
34safari ios no support nosamsung internet android full support 5.0legend full support full support no support no supportexperimental.
Window.scroll() - Web APIs
droidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support
3safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full s...
... full support 1.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support noopera full support
32safari no support nowebview android full support 45chrome android full support 45firefox android full support yesopera android full support
32safari ios no su...
Window.scrollBy() - Web APIs
79 no support 12 — 79notes notes only scrollby(x-coord, y-coord) is supported.firefox full support 1ie partial support 11notes partial support 11notes notes only scrollby(x-coord, y-coord) is supported.opera full support
3safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full s...
... full support 1.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support noopera full support
32safari no support nowebview android full support 45chrome android full support 45firefox android full support yesopera android full support
32safari ios no su...
Window.showModalDialog() - Web APIs
this method was removed in chrome 4
3 and firefox 56.
...— 4
3edge no support nofirefox no support
3 — 56ie full support 4opera no support nosafari full support 5.1notes full support 5.1notes notes see webkit...
WindowOrWorkerGlobalScope.btoa() - Web APIs
for example, you can encode control characters such as ascii values 0 through
31.
...so if you pass a string into btoa() containing characters that occupy more than one byte, you will get an error, because this is not considered binary data: const ok = "a"; console.log(ok.codepointat(0).tostring(16)); // 61: occupies < 1 byte const notok = "✓" console.log(notok.codepointat(0).tostring(16)); // 271
3: occupies > 1 byte console.log(btoa(ok)); // yq== console.log(btoa(notok)); // error if you need to encode unicode text as ascii using btoa(), one option is to convert the string such that each 16-bit unit occupies only one byte.
WorkerGlobalScope.navigator - Web APIs
er (which would basically be the equivalent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.9
3 safari/5
37.
36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.9
3 safari/5
37.
36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/5
37.
36 (khtml, like gecko) chrome/40.0.2214.9
3 safari/5
37.
36" hardwareconcurrency: 4 online: t...
...rue platform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/5
37.
36 (khtml, like gecko) chrome/40.0.2214.9
3 safari/5
37.
36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
WorkerNavigator.permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissions experimentalchrome full support 4
3edge full support ≤79firefox no support noie ?
... opera full support
30safari no support nowebview android full support 4
3chrome android full support 4
3firefox android no support noopera android full support
30safari ios no support nosamsung internet android full support 4.0legend full support full support no support no support ...
XMLDocument.load() - Web APIs
document.load() is a part of an old version of the w
3c dom level
3 load & save module.
...(to test this functionality, create the files on your local disk or on a webserver rather than loading the load.html file from the lxr-generated page, which will serve the text.xml file as html.) specifications old w
3c working draft of the dom level
3 load & save module ...
Sending and Receiving Binary Data - Web APIs
}; var blob = new blob(['abc12
3'], {type: 'text/plain'}); oreq.send(blob); sending typed arrays as binary data you can send javascript typed arrays as binary data as well.
... note: this non-standard sendasbinary method is considered deprecated as of gecko
31 (firefox
31 / thunderbird
31 / seamonkey 2.28) and will be removed soon.
XMLHttpRequestEventTarget - Web APIs
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,
30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" he...
...ight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="
30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e5
3" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
border-style - CSS: Cascading Style Sheets
html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b
3">dotted</td> <td class="b4">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: #52e
396; } tr, td { padding: 2px; } ...
... /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b
3 {border-style:dotted;} .b4 {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;} result specifications specification status comment css backgrounds and borders module level
3the definition of 'border-style' in that specification.
border-top-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius:
3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... 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
syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius:
3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... 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="b
3">dotted</td> <td class="b4">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: #52e
385; } tr, td { padding:
3px; } ...
... /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b
3 {border-top-style: dotted;} .b4 {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-top-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width:
3vmax; border-top-width: 6px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
...line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css backgrounds and borders module level
3the definition of 'border-top-width' in that specification.
border-width - CSS: Cascading Style Sheets
right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.
3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.
3em 0 9px; } #fourval { border: solid lightgreen; border-width: thi...
...n medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment css backgrounds and borders module level
3the definition of 'border-width' in that specification.
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 th...
box-align - CSS: Cascading Style Sheets
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; /* as specified */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /*...
... 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
3prefixed prefixed implemented with the vendor prefix: -webkit- no support 1.1 —
3prefixed prefixed implemented with the vendor prefix: -khtml-webview android full support ≤
37prefixed full support ≤
37prefixed ...
<dimension> - CSS: Cascading Style Sheets
3sec the seconds unit is abbreviated "s" not "sec".
... editor's draft adds cap, ic, lh, rlh, vi, vb css values and units module level
3the definition of '<dimension>' in that specification.
<display-inside> - CSS: Cascading Style Sheets
these keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the level
3 specification alongside a value from the <display-outside> keywords.
...content inside the container.</p> </div> css .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } result specifications specification status css display module level
3the definition of 'display-inside' in that specification.
<display-outside> - CSS: Cascading Style Sheets
these keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the level
3 specification alongside a value from the <display-inside> keywords.
... html <span>span 1</span> <span>span 2</span> css span { display: block; border: 1px solid rebeccapurple; } result specifications specification status css display module level
3the definition of 'display-outside' in that specification.
flex-direction - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.
3 explanations understanding success criterion 1.
3.2 | w
3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" styl...
...ightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </div> css #content { width: 200px; height: 200px; border: 1px solid #c
3c
3c
3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c
3c
3c
3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status comment css flexible box layout modulethe definition of '...
flex-grow - CSS: Cascading Style Sheets
syntax /* <number> values */ flex-grow:
3; flex-grow: 0.6; /* global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; the flex-grow property is specified as a single <number>.
...div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> <div class="box" style="background-color:brown;">f</div> </div> css #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border:
3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border:
3px solid rgba(0,0,0,.2); } result specifications specification status comment css flexible box layout modulethe definition of 'flex-grow' in that specification.
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 <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">
3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</div> <div class="green">2</div> <div class="blue">
3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">
3</div> </div> css /* common styles */ .content, .content1, .con...
...tent2 { color: #fff; font: 100 24px/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 specification.
flex - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex:
30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1
30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values.
...v> </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: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1b5
385; color: white; font-family: monospace; font-size: 1
3px; } .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-style - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations w
3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements.
... working draft adds the ability to specify an angle after oblique css fonts module level
3the definition of 'font-style' in that specification.
<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 14khz the unit is case-insensitive, though non-si capitalization is not recommended.
... editor's draft css values and units module level
3the definition of '<frequency-percentage>' in that specification.
<gradient> - CSS: Cascading Style Sheets
<div class="radial-gradient">radial gradient</div> div { width: 240px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(
30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... working draft adds conic-gradient css images module level
3the definition of '<gradient>' in that specification.
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="item
3"></div> <div id="item4"></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-te...
...mplate: 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; } #item
3 { background-color: blue; } #item4 { 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-auto-rows - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows:
33.
3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows:
3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px
390px; grid-auto-rows: 10%
33.
3%; grid-auto-rows: 0.5fr
3fr 1fr; grid-auto-rows: m...
...rack-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item
3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' 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 span, or a default span of 1.
...] | [ 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="box
3">three</div> <div class="box4">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 {...
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="box
3">three</div> <div class="box4">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 {...
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 span of 1.
...] | [ 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="box
3">three</div> <div class="box4">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 {...
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="box
3">three</div> <div class="box4">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 {...
grid-row - CSS: Cascading Style Sheets
rthand for the following css properties: grid-row-end grid-row-start syntax /* keyword values */ grid-row: auto; grid-row: auto / auto; /* <custom-ident> values */ grid-row: somegridarea; grid-row: somegridarea / someothergridarea; /* <integer> + <custom-ident> values */ grid-row: somegridarea 4; grid-row: 4 somegridarea / 6; /* span + <integer> + <custom-ident> values */ grid-row: span
3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span
3 / 6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /* global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an auto...
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item
3"></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; } #item
3 { background-color: blue; grid-row: span 2 / 7; } result specifications specification status comment css grid layoutthe d...
grid-template-columns - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename
3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(
3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px)
300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [li...
...nename2] repeat(auto-fit, [linename
3 linename4]
300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1]
300px) [linename
3]; /* global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid.
grid-template - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: grid-template-areas grid-template-columns grid-template-rows syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1]
30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" "b b b"; grid-template: "a a a" 20% "b b b" auto; grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto ...
...<track-size> ]+ <line-names>?where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head"
30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot"
30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot;...
grid - CSS: Cascading Style Sheets
values */ grid: 200px / auto-flow; grid:
30% / auto-flow dense; grid: repeat(
3, [line1 line2 line
3] 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 line
3] 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.
height - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w
3c 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.
... editor's draft css box sizing module level
3the definition of 'height' in that specification.
ime-mode - CSS: Cascading Style Sheets
users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following css into their user stylesheet: input[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox
3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value.
... specifications specification status comment css basic user interface module level
3the definition of 'ime-mode' in that specification.
initial-letter - CSS: Cascading Style Sheets
/* keyword values */ initial-letter: normal; /* numeric values */ initial-letter: 1.5; /* initial letter occupies 1.5 lines */ initial-letter:
3.0; /* initial letter occupies
3 lines */ initial-letter:
3.0 2; /* initial letter occupies
3 lines and sinks 2 lines */ /* global values */ initial-letter: inherit; initial-letter: initial; initial-letter: unset; syntax the keyword value normal, or a <number> optionally followed by an <integer>.
...] examples setting initial letter size html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies
3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter:
3.0; initial-letter:
3.0; } result specifications specification status comment css inline layoutthe definition of 'initial-letter' 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 the same values as the left property.
...ept 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 1the definition of 'inset' in that specification.
justify-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width:
300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(
3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specificatio...
...n status comment css box alignment module level
3the definition of 'justify-self' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin:
3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing:
3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefo...
... editor's draft css values and units module level
3the definition of '<length-percentage>' in that specification.
list-style - CSS: Cascading Style Sheets
ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.
3 explanations understanding success criterion 1.
3.1 | w
3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position...
...: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> <li>list item
3</li> </ul> list 2 <ul class="two"> <li>list item a</li> <li>list item b</li> <li>list item c</li> </ul> css .one { list-style: circle; } .two { list-style: square inside; } result specifications specification status comment css lists module level
3the definition of 'list-style' in that specification.
mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice:
30%; /* vertical | horizontal */ mask-border-slice: 10%
30%; /* top | horizontal | bottom */ mask-border-slice:
30
30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... mask-border-slice:
30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-slice — with a prefix: -webkit-mask-box-image-slice:
30 fill; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width:
3; /* vertical | horizontal */ mask-border-width: 2em
3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
... mask-border-width:
30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-type - CSS: Cascading Style Sheets
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: ...
...solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
max-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ max-block-size:
300px; max-block-size: 25em; /* <percentage> values */ max-block-size: 75%; /* keyword values */ max-block-size: auto; max-block-size: max-content; max-block-size: min-content; max-block-size: fit-content(20em); /* global values */ max-block-size: inherit; max-block-size: initial; max-block-size: unset; values the max-block-size property's value can be any value that's legal for the max-width...
...of max-block-size to max-width or max-height as follows: values of writing-mode max-block-size is equivalent to horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-mode values sideways-lr and sideways-rl were removed from the css writing modes level
3 specification late in its design process.
min-height - CSS: Cascading Style Sheets
syntax /* <length> value */ min-height:
3.5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value.
... editor's draft css box sizing module level
3the definition of 'min-height' in that specification.
<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 10e
3 scientific notation -
3.4e-2 complicated scientific notation invalid numbers 12.
... css values and units module level
3the definition of '<number>' in that specification.
offset-position - CSS: Cascading Style Sheets
yword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right
3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move
3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status comment motion path module level 1the definition of 'offset-position' in that specification.
order - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.
3 explanations understanding success criterion 1.
3.2 | w
3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a con...
... html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order:
3; } result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification.
outline-width - CSS: Cascading Style Sheets
typically equivalent to
3px in desktop browsers (including firefox).
...tline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specifications specification status comment css basic user interface module level
3the definition of 'outline-width' in that specification.
outline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid
3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below.
...ted value is 0outline-style: as specifiedanimation typeas each of the properties of the 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 #e7
3; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user interface module level
3the definition of 'outline' in that specification.
overflow-inline - CSS: Cascading Style Sheets
des the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div
3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div
3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow...
...-inline: hidden;} #div2 { overflow-inline: scroll;} #div
3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specifications specification status comment css overflow module level
3the definition of 'overflow-inline' in that specification.
overflow-x - CSS: Cascading Style Sheets
de> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div
3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div
3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: h...
...idden;} #div2 { overflow-x: scroll;} #div
3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications specification status comment css overflow module level
3the definition of 'overflow-x' in that specification.
overflow-y - CSS: Cascading Style Sheets
</div> </li> <li><code>overflow-y:visible</code> — displays the text outside the box if needed <div id="div
3"> 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, #div
3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div
3 { overflow-y: visible; margin-bottom: 120px;} #div4 { overflow-y: auto; margin-bottom: 120px;} result specifications specification status comment css overflow module level
3the definit...
overflow - CSS: Cascading Style Sheets
[1] as of firefox 6
3, this feature is behind a feature preference setting.
... specifications specification status comment css overflow module level
3the definition of 'overflow' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height:
3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height:
300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; ...
... background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width:
340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width:
3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height:
300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-imag...
...e: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width:
360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
padding - CSS: Cascading Style Sheets
rcentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h
3>the padding is huge in this element!</h
3> css h4 { background-color: lime; padding: 20px 50px; } h
3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px pa...
...dding */ /* left and right: 20px padding */ padding: 10px
3% 20px; /* top: 10px padding */ /* left and right:
3% padding */ /* bottom: 20px padding */ padding: 1em
3px
30px 5px; /* top: 1em padding */ /* right:
3px padding */ /* bottom:
30px padding */ /* left: 5px padding */ specifications specification status comment css basic box modelthe definition of 'padding' in that specification.
page-break-after - CSS: Cascading Style Sheets
css paged media module level
3the definition of 'page-break-after' in that specification.
... 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 14safari ios full support ...
page-break-before - CSS: Cascading Style Sheets
css paged media module level
3the definition of 'page-break-before' in that specification.
... 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 14safari ios full support ...
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 1
3</li> <li>item 14</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'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(
3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled,
3px); } li:nth-of-type(
3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:
30%; margin-left:60%; background-color:pink;"> width:
30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (
36px)</span></p> </div> the above html will output: specifications specification statu...
... css values and units module level
3the definition of '<percentage>' in that specification.
place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width:
300px; } span:nth-child(2) { place-self: start center; } span:nth-child(
3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status ...
...comment css box alignment module level
3the definition of 'place-self' in that specification.
quotes - CSS: Cascading Style Sheets
<q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <div> <hr> <div lang="en"> <q>this is an english quote.</q> <div> css /*q { quotes: auto; }*/ result specifications specification status comment css generated content module level
3the definition of 'quotes' in that specification.
...dge full support 12firefox full support 1.5ie full support 8opera full support 4safari full support 9webview android full support
37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 9samsung internet android full support 1.0auto keywordchrome ...
radial-gradient() - CSS: Cascading Style Sheets
class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f
35 0%, #4
3e 100%); } more radial-gradient examples please see using css gradients for more examples.
... specifications specification status comment css images module level
3the definition of 'radial-gradients()' in that specification.
repeat() - CSS: Cascading Style Sheets
t> 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 [col-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.
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 finishing red.
... specifications specification status comment css images module level
3the definition of 'repeating-linear-gradient()' in that specification.
repeating-radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green, with the colors repeating every
30px */ repeating-radial-gradient(circle at center, red 0, blue, green
30px); /* an elliptical gradient near the top left of its container, starting red, changing to green and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20...
... specifications specification status comment css images module level
3the definition of 'repeating-radial-gradient()' in that specification.
resize - CSS: Cascading Style Sheets
</p> </div> css .resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height:
300px; width:
300px; } p { height: 200px; width: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'resize' in that specification.
... css basic user interface module level
3the definition of 'resize' in that specification.
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.
...width: 200px; height: 200px; background-color: #ffc7e4; 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.
ruby-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruby-position experimentalchrome no support noedge no support 12 — 79firefox full support
38ie no support nonotes no support nonotes notes internet explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).opera no support nosafari no support ...
...of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).webview android no support nochrome android no support nofirefox android full support
38opera android no support nosafari ios no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the...
scroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-
3">
3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-
3">
3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width:
339px; padding: 5px; border: 1px soli...
...d black; } scroll-container { display: block; width:
350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; } result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
<shape> - CSS: Cascading Style Sheets
atedchrome full support 1edge full support 12firefox full support 1ie full 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 14safari ios full support 1samsung internet android ...
...for internet explorer 8 and later versions, only the standard comma-separated syntax is supported.opera full support 9.5safari full support 1.
3webview android full support
37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android ...
text-emphasis-style - CSS: Cascading Style Sheets
the filled triangle is '▲' (u+25b2), and the open triangle is '△' (u+25b
3).
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment css text decoration module level
3the definition of 'text-emphasis' in that specification.
text-emphasis - CSS: Cascading Style Sheets
the filled triangle is '▲' (u+25b2), and the open triangle is '△' (u+25b
3).
... css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2> result specifications specification status comment css text decoration module level
3the definition of 'text-emphasis' in that specification.
text-indent - CSS: Cascading Style Sheets
syntax /* <length> values */ text-indent:
3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
... background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent:
30%; background: plum; } result specifications specification status comment css text module level
3the definition of 'text-indent' in that specification.
<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 14ms the unit is case-insensitive, although capital letters are not recommended.
... editor's draft css values and units module level
3the 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 14ms the unit is case-insensitive, although capital letters are not recommended.
... editor's draft css values and units module level
3the 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.
...tax <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.
Accept-Encoding - HTTP
quest header forbidden header name yes syntax accept-encoding: gzip accept-encoding: compress accept-encoding: deflate accept-encoding: br accept-encoding: identity accept-encoding: * // multiple algorithms, weighted with the quality value syntax: accept-encoding: deflate, gzip;q=1.0, *;q=0.5 directives gzip a compression format using the lempel-ziv coding (lz77), with a
32-bit crc.
... examples accept-encoding: gzip accept-encoding: gzip, compress, br accept-encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 specifications specification title rfc 72
31, section 5.
3.4: accept-encoding hypertext transfer protocol (http/1.1): semantics and context ...
Accept-Language - HTTP
this consists of a 2-
3 letter base language tag representing the language, optionally followed by additional subtags separated by '-'.
... examples accept-language: de accept-language: de-ch accept-language: en-us,en;q=0.5 specifications specification title rfc 72
31, section 5.
3.5: accept-language hypertext transfer protocol (http/1.1): semantics and context bcp 47 tags for the identification of language ...
Accept-Ranges - HTTP
though bytes is the only range unit formally defined by rfc 72
33, additional range units may be registered in the http range unit registry.
... examples accept-ranges: bytes specifications specification title rfc 72
33, section 2.
3: accept-ranges hypertext transfer protocol (http/1.1): range requests ...
Alt-Svc - HTTP
examples include h2 for http/2 and h
3-25 for draft 25 of the http/
3 protocol.
... example alt-svc: h2=":44
3"; ma=2592000; alt-svc: h2=":44
3"; ma=2592000; persist=1 alt-svc: h2="alt.example.com:44
3", h2=":44
3" alt-svc: h
3-25=":44
3"; ma=
3600, h2=":44
3"; ma=
3600 specifications specification status comment rfc 78
38 ietf rfc initial definition.
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.
... cache-control: no-cache cache-control: no-cache, max-age=0 specifications specification status comment rfc 8246: http immutable responses ietf rfc rfc 72
34: hypertext transfer protocol (http/1.1): caching ietf rfc rfc 5861: http cache-control extensions for stale content ietf rfc initial definition ...
Content-Language - HTTP
note: language tags are formaly defined in rfc 5646, which rely on the iso 6
39 standard (quite often the iso 6
39-1 code list) for language codes to be used.
... content-language: de, en specifications specification title rfc 72
31, section
3.1.
3.2: content-language hypertext transfer protocol (http/1.1): semantics and content ...
Content-Type - HTTP
<form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 681
37 content-type: multipart/form-data; boundary=---------------------------9747672998524989295
31610575 -----------------------------9747672998524989295
31610575 content-disposition: form-data; name="description" some text -----------------------------9747672998524989295
31610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file ...
...foo.txt) -----------------------------9747672998524989295
31610575-- specifications specification title rfc 72
33, section 4.1: content-type in multipart hypertext transfer protocol (http/1.1): range requests rfc 72
31, section
3.1.1.5: content-type hypertext transfer protocol (http/1.1): semantics and content ...
Cookie - HTTP
header type request header forbidden header name yes syntax cookie: <cookie-list> cookie: name=value cookie: name=value; name2=value2; name
3=value
3 <cookie-list> a list of name-value pairs in the form of <cookie-name>=<cookie-value>.
... examples cookie: phpsessid=298zf09hf012fh2; csrftoken=u
32t4o
3tb
3gg4
3; _gat=1 specifications specification title rfc 6265, section 5.4: cookie http state management mechanism ...
Expect - HTTP
put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-length: 12
34567890987 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met.
... specifications specification title rfc 72
31, section 5.1.1: expect hypertext transfer protocol (http/1.1): semantics and content ...
Forwarded - HTTP
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=20
3.0.11
3.4
3 # multiple values can be appended using a comma forwarded: for=192.0.2.4
3, 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: 12
3.
34.567.89 forwarded: for=12
3.
34.567.89 x-forwarded-for: 192.0.2.4
3, "[2001:db8:cafe::17]" forwarded: for=192.0.2.4
3, for="[2001:db8:cafe::17]" specifications specification title rfc 72
39, section 4: forwarded forwarded http extension ...
Host - HTTP
if no port is included, the default port for the service requested (e.g., 44
3 for an https url, and 80 for an http url) is implied.
... examples host: developer.cdn.mozilla.net specifications specification title rfc 72
30, section 5.4: host hypertext transfer protocol (http/1.1): message syntax and routing ...
If-Match - HTTP
they are a string of ascii characters placed between double quotes (like "675af
3456
3dc-tr
34").
... examples if-match: "bfc1
3a64729c4290ef5b2c27
30249c88ca92d82d" if-match: "67ab4
3", "54ed21", "7892dd" if-match: * specifications specification title rfc 72
32, section
3.1: if-match hypertext transfer protocol (http/1.1): conditional requests ...
Public-Key-Pins-Report-Only - HTTP
example public-key-pins-report-only: pin-sha256="cupctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws="; pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
Public-Key-Pins - HTTP
public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws="; pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy
3obake
3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha256="m8hztczm
3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
Save-Data - HTTP
with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 1028
32 vary: accept-encoding, save-data cache-control: public, max-age=
315
36000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=
315
36000 content-type: image/jpeg [...] specifications specification title draf...
...t-grigorik-http-client-hints-0
3, section 7: save-data http client hints ...
TypeError: "x" is read-only - JavaScript
'use strict'; var obj = object.freeze({name: 'elsa', score: 157}); obj.score = 0; // typeerror 'use strict'; object.defineproperty(this, 'lung_count', {value: 2, writable: false}); lung_count =
3; // typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray[0]++; // typeerror there are also a few read-only properties built into javascript.
...he infamous "undefined is not a function" error by doing this: 'use strict'; undefined = function() {}; // typeerror: "undefined" is read-only valid cases 'use strict'; var obj = object.freeze({name: 'score', points: 157}); obj = {name: obj.name, points: 0}; // replacing it with a new object works 'use strict'; var lung_count = 2; // a `var` works, because it's not read-only lung_count =
3; // ok (anatomically unlikely, though) ...
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...
...() { return
3 + 4 // ok: semicolon-less return with expression on the same line } ...
Default parameters - JavaScript
e this, which demonstrates how many edge cases are handled: function go() { return ':p' } function withdefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return [a, b, c, d, e, f, g] } function withoutdefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: a; case 1: b = 5; case 2: c = b; case
3: d = go(); case 4: e = this; case 5: f = arguments; case 6: g = this.value; default: } return [a, b, c, d, e, f, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] scope effects if default p...
... function f(x = 1, y) { return [x, y] } f() // [1, undefined] f(2) // [2, undefined] destructured parameter with default value assignment you can use default value assignment with the destructuring assignment notation: function f([x, y] = [1, 2], {z: z} = {z:
3}) { return x + y + z } f() // 6 specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
Method definitions - JavaScript
// using a named property const obj
3 = { f: async function () { await some_promise } } // the same object using shorthand syntax const obj
3 = { async f() { await some_promise } } async generator methods generator methods can also be async.
... const obj4 = { f: async function* () { yield 1 yield 2 yield
3 } }; // the same object using shorthand syntax const obj4 = { async* f() { yield 1 yield 2 yield
3 } } method definitions are not constructable methods cannot be constructors!
The arguments object - JavaScript
for example, if a function is passed
3 arguments, you can access them as follows: arguments[0] // first argument arguments[1] // second argument arguments[2] // third argument each argument can also be set or reassigned: arguments[1] = 'new value'; the arguments object is not an array.
... function foo(...args) { return args; } foo(1, 2,
3); // [1, 2,
3] while the presence of rest, default, or destructured parameters does not alter the behavior of the arguments object in strict mode code, there are subtle differences for non-strict code.
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 num
3 = [7, 8, 9]; const numbers = num1.concat(num2, num
3); console.log(numbers); // results in [1, 2,
3, 4, 5, 6, 7, 8, 9] concatenating values to an array the following code concatenates three val...
...ues 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.of() - JavaScript
array.of(7); // [7] array.of(1, 2,
3); // [1, 2,
3] array(7); // array of 7 empty slots array(1, 2,
3); // [1, 2,
3] syntax array.of(element0[, element1[, ...[, elementn]]]) parameters elementn elements used to create the array.
... if (!array.of) { array.of = function() { return array.prototype.slice.call(arguments); // or let vals = []; for(let prop in arguments){ vals.push(arguments[prop]); } return vals; } } examples using array.of array.of(1); // [1] array.of(1, 2,
3); // [1, 2,
3] array.of(undefined); // [undefined] specifications specification ecmascript (ecma-262)the definition of 'array.of' in that specification.
Array.prototype.reverse() - JavaScript
const a = [1, 2,
3]; console.log(a); // [1, 2,
3] a.reverse(); console.log(a); // [
3, 2, 1] reversing the elements in an array-like object the following example creates an array-like object a, containing three elements and a length property, then reverses the array-like object.
... const a = {0: 1, 1: 2, 2:
3, length:
3}; console.log(a); // {0: 1, 1: 2, 2:
3, length:
3} array.prototype.reverse.call(a); //same syntax for using apply() console.log(a); // {0:
3, 1: 2, 2: 1, length:
3} specifications specification ecmascript (ecma-262)the definition of 'array.prototype.reverse' in that specification.
Array.prototype.unshift() - JavaScript
see example: let arr = [4, 5, 6] arr.unshift(1, 2,
3) console.log(arr); // [1, 2,
3, 4, 5, 6] arr = [4, 5, 6] // resetting the array arr.unshift(1) arr.unshift(2) arr.unshift(
3) console.log(arr) // [
3, 2, 1, 4, 5, 6] examples using unshift let arr = [1, 2] arr.unshift(0) // result of the call is
3, which is the new array length // arr is [0, 1, 2] arr.unshift(-2, -1) // the new array length is 5 // arr is [-2, -1, 0,...
... 1, 2] arr.unshift([-4, -
3]) // the new array length is 6 // arr is [[-4, -
3], -2, -1, 0, 1, 2] arr.unshift([-7, -6], [-5]) // the new array length is 8 // arr is [ [-7, -6], [-5], [-4, -
3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.unshift' in that specification.
ArrayBuffer() constructor - JavaScript
exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 ** 5
3) or negative.
... var dv = arraybuffer(10); // typeerror: calling a builtin arraybuffer constructor // without new is forbidden var dv = new arraybuffer(10); examples creating an arraybuffer in this example, we create a 8-byte buffer with a int
32array view referring to the buffer: var buffer = new arraybuffer(8); var view = new int
32array(buffer); specifications specification ecmascript (ecma-262)the definition of 'arraybuffer' in that specification.
Atomics.or() - JavaScript
one of int8array, uint8array, int16array, uint16array, int
32array, uint
32array, bigint64array, or biguint64array.
... 5 0101 1 0001 ---- 5 0101 examples using or const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 2; atomics.or(ta, 0, 1); // returns 2, the old value atomics.load(ta, 0); //
3 specifications specification ecmascript (ecma-262)the definition of 'atomics.or' in that specification.
Atomics.sub() - JavaScript
one of int8array, uint8array, int16array, uint16array, int
32array, uint
32array, bigint64array, or biguint64array.
... examples using sub const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 48; atomics.sub(ta, 0, 12); // returns 48, the old value atomics.load(ta, 0); //
36 specifications specification ecmascript (ecma-262)the definition of 'atomics.sub' in that specification.
BigInt.prototype.toString() - JavaScript
an integer in the range 2 through
36 specifying the base to use for representing numeric values.
... exceptions rangeerror if tostring() is given a radix less than 2 or greater than
36, a rangeerror is thrown.
BigInt64Array - JavaScript
examples different ways to create a bigint64array // from a length var bigint64 = new bigint64array(2); bigint64[0] = 42n; console.log(bigint64[0]); // 42n console.log(bigint64.length); // 2 console.log(bigint64.bytes_per_element); // 8 // from an array var arr = new bigint64array([21n,
31n]); console.log(arr[1]); //
31n // from another typedarray var x = new bigint64array([21n,
31n]); var y = new bigint64array(x); console.log(y[0]); // 21n // from an arraybuffer var buffer = new arraybuffer(
32); var z = new bigint64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1n, 2n,
3n]; }(); var bigint64 = new bigint64array(iterable); // bigint64array[1n, 2n, ...
...
3n] specifications specification ecmascript (ecma-262)the definition of 'bigint64array' in that specification.
Generator.prototype.return() - JavaScript
function* gen() { yield 1; yield 2; yield
3; } const g = gen(); g.next(); // { value: 1, done: false } g.return('foo'); // { value: "foo", done: true } g.next(); // { value: undefined, done: true } if return(value) is called on a generator that is already in "completed" state, the generator will remain in "completed" state.
... function* gen() { yield 1; yield 2; yield
3; } const g = gen(); g.next(); // { value: 1, done: false } g.next(); // { value: 2, done: false } g.next(); // { value:
3, done: false } g.next(); // { value: undefined, done: true } g.return(); // { value: undefined, done: true } g.return(1); // { value: 1, done: true } specifications specification ecmascript (ecma-262)the definition of 'generator.prototype.return' in that specification.
Int16Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create an int16array // from a length var int16 = new int16array(2); int16[0] = 42; console.log(int16[0]); // 42 console.log(int16.length); // 2 console.log(int16.bytes_per_element); // 2 // from an array var arr = new int16array([21,
31]); console.log(arr[1]); //
31 // from another typedarray var x = new int16array([21,
31]); var y = new int16array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new int16array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,
3]; }(); var int16 = new int16array(iterable); // int16array[1, 2,
3] specifications s...
Int8Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create an int8array // from a length var int8 = new int8array(2); int8[0] = 42; console.log(int8[0]); // 42 console.log(int8.length); // 2 console.log(int8.bytes_per_element); // 1 // from an array var arr = new int8array([21,
31]); console.log(arr[1]); //
31 // from another typedarray var x = new int8array([21,
31]); var y = new int8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new int8array(buffer, 1, 4); // from an iterable var iterable = function*(){ yield* [1,2,
3]; }(); var int8 = new int8array(iterable); // int8array[1, 2,
3] specifications specifi...
Intl.DateTimeFormat.prototype.format() - JavaScript
април 201
3." using format with map use the format getter function for formatting all dates in an array.
... var a = [new date(2012, 08), new date(2012, 11), new date(2012, 0
3)]; var options = { year: 'numeric', month: 'long' }; var datetimeformat = new intl.datetimeformat('pt-br', options); var formatted = a.map(datetimeformat.format); console.log(formatted.join('; ')); // → "setembro de 2012; dezembro de 2012; abril de 2012" avoid comparing formatted date values to static values most of the time, the formatting returned by format() is consistent.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); let date
3 = new date(date.utc(2007, 0, 20, 10, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' // > 'sat, 20 jan 2007 10:00:00 gmt' let fmt1 = new intl.datetimeformat("en", { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }); console.log(fmt1.format(date1)); console.log(fmt1.formatrange(date1, date2)); console.log...
...(fmt1.formatrange(date1, date
3)); // > '1/10/07, 10:00 am' // > '1/10/07, 10:00 – 11:00 am' // > '1/10/07, 10:00 am – 1/20/07, 10:00 am' let fmt2 = new intl.datetimeformat("en", { year: 'numeric', month: 'short', day: 'numeric' }); console.log(fmt2.format(date1)); console.log(fmt2.formatrange(date1, date2)); console.log(fmt2.formatrange(date1, date
3)); // > 'jan 10, 2007' // > 'jan 10, 2007' // > 'jan 10 – 20, 2007' specifications specification intl.datetimeformat.formatrangethe definition of 'formatrange()' in that specification.
Intl.Locale.prototype.calendar - JavaScript
549
3 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,1
3,16,18,21,24,26,2...
...9] - astronomical epoch) islamic-civil islamic calendar, tabular (intercalary years [2,5,7,10,1
3,16,18,21,24,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.
Intl.Locale.prototype.hourCycle - JavaScript
h2
3 hour system using 0–2
3; corresponds to 'h' in patterns.
... let fr24hour = new intl.locale("fr-fr-u-hc-h2
3"); console.log(fr24hour.hourcycle); // prints "h2
3" adding an hour cycle via the configuration object argument the intl.locale constructor has an optional configuration object argument, which can contain any of several extension types, including hour cycle types.
Intl.NumberFormat.prototype.format() - JavaScript
examples using format use the format getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654
321.987)); // → "654
321,99 руб." using format with map use the format getter function for formatting all numbers in an array.
... var a = [12
3456.789, 987654.
321, 456789.12
3]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "12
3.456,789; 987.654,
321; 456.789,12
3" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification.
JSON.parse() - JavaScript
value * 2 // return value * 2 for numbers : value // return everything else unchanged ); // { p: 10 } json.parse('{"1": 1, "2": 2, "
3": {"4": 4, "5": {"6": 6}}}', (key, value) => { console.log(key); // log the current property name, the last is "".
...}); // 1 // 2 // 4 // 6 // 5 //
3 // "" json.parse() does not allow trailing commas // both will throw a syntaxerror json.parse('[1, 2,
3, 4, ]'); json.parse('{"foo" : 1, }'); json.parse() does not allow single quotes // will throw a syntaxerror json.parse("{'foo': 1}"); specifications specification ecmascript (ecma-262)the definition of 'json.parse' in that specification.
Math.LN10 - JavaScript
the math.ln10 property represents the natural logarithm of 10, approximately 2.
302: math.ln10=ln(10)≈2.
302\mathtt{\mi{math.ln10}} = \ln(10) \approx 2.
302 the source for this interactive example is stored in a github repository.
... examples using math.ln10 the following function returns the natural log of 10: function getnatlog10() { return math.ln10; } getnatlog10(); // 2.
302585092994046 specifications specification ecmascript (ecma-262)the definition of 'math.ln10' in that specification.
Math.LN2 - JavaScript
the math.ln2 property represents the natural logarithm of 2, approximately 0.69
3: math.ln2=ln(2)≈0.69
3\mathtt{\mi{math.ln2}} = \ln(2) \approx 0.69
3 the source for this interactive example is stored in a github repository.
... examples using math.ln2 the following function returns the natural log of 2: function getnatlog2() { return math.ln2; } getnatlog2(); // 0.69
3147180559945
3 specifications specification ecmascript (ecma-262)the definition of 'math.ln2' in that specification.
Math.LOG10E - JavaScript
the math.log10e property represents the base 10 logarithm of e, approximately 0.4
34: math.log10e=log10(e)≈0.4
34\mathtt{\mi{math.log10e}} = \log_10(e) \approx 0.4
34 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.4
3429448190
32518 specifications specification ecmascript (ecma-262)the definition of 'math.log10e' in that specification.
Math.PI - JavaScript
the math.pi property represents the ratio of the circumference of a circle to its diameter, approximately
3.14159: math.pi=π≈
3.14159\mathtt{\mi{math.pi}} = \pi \approx
3.14159 the source for this interactive example is stored in a github repository.
... function calculatecircumference(radius) { return math.pi * (radius + radius); } calculatecircumference(1); // 6.28
3185
307179586 specifications specification ecmascript (ecma-262)the definition of 'math.pi' in that specification.
Math.asinh() - JavaScript
polyfill math.asinh can be emulated with the following function: if (!math.asinh) math.asinh = function(x) { var absx = math.abs(x), w if (absx <
3.725290298461914e-9) // |x| < 2^-28 return x if (absx > 2684
35456) // |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.881
37
358701954
3 math.asinh(0); // 0 specifications specification ecmascript (ecma-262)the definition of 'math.asinh' in that specification.
Math.atan2() - JavaScript
examples using math.atan2() math.atan2(90, 15); // 1.405647649
3802699 math.atan2(15, 90); // 0.1651486774146268
3 math.atan2(±0, -0); // ±pi.
...math.atan2(±infinity, -infinity); // ±
3*pi/4.
Math.log() - JavaScript
examples using math.log() math.log(-1); // nan, out of range math.log(0); // -infinity math.log(1); // 0 math.log(10); // 2.
302585092994046 using math.log() with a different base the following function returns the logarithm of y with base x (ie.
... logxy\log_x y): function getbaselog(x, y) { return math.log(y) / math.log(x); } if you run getbaselog(10, 1000) it returns 2.9999999999999996 due to floating-point rounding, which is very close to the actual answer of
3.
Math.log1p() - JavaScript
instead, you will end up taking the logarithm of 1.00000000000000111022 (the roundoff is in binary so sometimes it gets ugly), so you get the answer 1.11022...e-15, with only
3 correct digits.
...x : x * (math.log(x + 1) / nearx); }; examples using math.log1p() math.log1p(1); // 0.69
3147180559945
3 math.log1p(0); // 0 math.log1p(-1); // -infinity math.log1p(-2); // nan specifications specification ecmascript (ecma-262)the definition of 'math.log1p' in that specification.
Math.pow() - JavaScript
examples using math.pow() // simple math.pow(7, 2); // 49 math.pow(7,
3); //
34
3 math.pow(2, 10); // 1024 // fractional exponents math.pow(4, 0.5); // 2 (square root of 4) math.pow(8, 1/
3); // 2 (cube root of 8) math.pow(2, 0.5); // 1.41421
3562
37
30951 (square root of 2) math.pow(2, 1/
3); // 1.25992104989487
32 (cube root of 2) // signed exponents math.pow(7, -2); // 0.02040816
3265
30612 (1/49) math.pow(8, -1/
3); // 0.5 // signed bases math.pow(-7, 2); // 4...
...9 (squares are positive) math.pow(-7,
3); // -
34
3 (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.EPSILON - JavaScript
property attributes of number.epsilon writable no enumerable no configurable no description the epsilon property has a value of approximately 2.220446049250
31
308084726
33361816e-16, or 2-52.
... polyfill if (number.epsilon === undefined) { number.epsilon = math.pow(2, -52); } examples testing equality x = 0.2; y = 0.
3; z = 0.1; equal = (math.abs(x - y + z) < number.epsilon); specifications specification ecmascript (ecma-262)the definition of 'number.epsilon' in that specification.
Number.parseInt() - JavaScript
radix optional an integer between 2 and
36 that represents the radix (the base in mathematical numeral systems) of the string.
... if the radix is smaller than 2 or bigger than
36, and the first non-whitespace character cannot be converted to a number, nan is returned.
Number.prototype.toPrecision() - JavaScript
examples using toprecision let numobj = 5.12
3456 console.log(numobj.toprecision()) // logs '5.12
3456' console.log(numobj.toprecision(5)) // logs '5.12
35' console.log(numobj.toprecision(2)) // logs '5.1' console.log(numobj.toprecision(1)) // logs '5' numobj = 0.00012
3 console.log(numobj.toprecision()) // logs '0.00012
3' console.log(numobj.toprecision(5)) // logs '0.00012
300' console.log(numobj.toprecision(2)) // logs '0.000...
...12' console.log(numobj.toprecision(1)) // logs '0.0001' // note that exponential notation might be returned in some circumstances console.log((12
34.5).toprecision(2)) // logs '1.2e+
3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.toprecision' in that specification.
Number.prototype.toString() - JavaScript
an integer in the range 2 through
36 specifying the base to use for representing numeric values.
... exceptions rangeerror if tostring() is given a radix less than 2 or greater than
36, a rangeerror is thrown.
Object.prototype.constructor - JavaScript
let o = {} o.constructor === object // true let o = new object o.constructor === object // true let a = [] a.constructor === array // true let a = new array a.constructor === array // true let n = new number(
3) n.constructor === number // true examples displaying the constructor of an object the following example creates a constructor (tree) and an object of that type (thetree).
...dded for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},false,false // new boolean() function boolean() { [native code] },false,true // true function type() {},false,mon sep 01 2014 16:0
3:49 gmt+0600 // new date() function type() {},false,error // new error() function type() {},false,function anonymous() { } // new function() function type() {},false,function () {} // function () {} function type() {},false,[object math] // math function type(...
Object.prototype.toString() - JavaScript
parameters for numbers and bigints tostring() takes an optional parameter radix the value of radix must be minimum 2 and maximum
36.
... by using radix you can also convert base 10 numbers (like 1,2,
3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected output is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected output is "10100" some common radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for hexadecimal numbers.
Promise - JavaScript
it creates a promise that will be fulfilled, using window.settimeout(), to the promise count (number starting from 1) every 1-
3 seconds, at random.
... "use strict"; var promisecount = 0; function testpromise() { let thispromisecount = ++promisecount; let log = document.getelementbyid('log'); // begin log.insertadjacenthtml('beforeend', thispromisecount + ') started (sync code started)'); // we make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting
3s) let p1 = new promise((resolve, reject) => { // the executor function is called with the ability to resolve or reject the promise log.insertadjacenthtml('beforeend', thispromisecount + ') promise started (async code started)'); // this is only an example to create asynchronism window.settimeout(function() { // we fulfill the promise !
Reflect.construct() - JavaScript
ass.prototype) oneclass.apply(obj2, args) console.log(obj1.name) // 'one' console.log(obj2.name) // 'one' console.log(obj1 instanceof oneclass) // false console.log(obj2 instanceof oneclass) // false console.log(obj1 instanceof otherclass) // true console.log(obj2 instanceof otherclass) // true //another example to demonstrate below: function func1(a, b, c, d) { console.log(arguments[
3]); } function func2(d, e, f, g) { consol.log(arguments[
3]); } let obj1 = reflect.construct(func1, ['i', 'love', 'my', 'india']) obj1 however, while the end result is the same, there is one important difference in the process.
...} let obj
3 = object.create(otherclass.prototype); oneclass.apply(obj
3, args) // output: // oneclass // undefined examples using reflect.construct() let d = reflect.construct(date, [1776, 6, 4]) d instanceof date // true d.getfullyear() // 1776 specifications specification ecmascript (ecma-262)the definition of 'reflect.construct' in that specification.
RegExp.prototype[@@replace]() - JavaScript
var result = str; for (var i = 0; i < this.count; i++) { result = regexp.prototype[symbol.replace].call(this, result, replacement); } return result; } } var re = new myregexp('\\d', '',
3); var str = '012
34567'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
... console.log(newstr); // ###
34567 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@replace]' in that specification.
RegExp - JavaScript
5 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("12
3 456")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '12
3 456', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '12
3 456', groups: undefined ] and re.lastindex 2 // [ '
3', index: 2, input: '12
3 456', groups: undefined ] and re.lastindex
3 // ...
... with the global flag g, all 6 digits would be matched, not just
3.
Planned changes to shared memory - JavaScript
cross-origin-opener-policy: whatwg/html issue #
3740, draft specification.
... postmessage() changes and self.crossoriginisolated: whatwg/html issue #47
32, whatwg/html issue #4872, draft specification.
String.raw() - JavaScript
examples using string.raw() string.raw`hi\n${2+
3}!`; // 'hi\n5!', the character after 'hi' // is not a newline character, // '\' and 'n' are two characters.
... // normally you would not call string.raw() as a function, // but to simulate `foo${2 +
3}bar${'java' + 'script'}baz` you can do: string.raw({ raw: ['foo', 'bar', 'baz'] }, 2 +
3, 'java' + 'script'); // 'foo5barjavascriptbaz' // notice the first argument is an object with a 'raw' property, // whose value is an iterable representing the separated strings // in the template literal.
String.prototype.repeat() - JavaScript
count = +count; // check nan if (count != count) count = 0; if (count < 0) throw new rangeerror('repeat count must be non-negative'); if (count == infinity) throw new rangeerror('repeat count must be less than infinity'); count = math.floor(count); if (str.length == 0 || count == 0) return ''; // ensuring count is a
31-bit integer allows us to heavily optimize the // main part.
...ng size'); var maxcount = str.length * count; count = math.floor(math.log(count) / math.log(2)); while (count) { str += str; count--; } str += str.substring(0, maxcount - str.length); return str; } } examples using repeat 'abc'.repeat(-1) // rangeerror 'abc'.repeat(0) // '' 'abc'.repeat(1) // 'abc' 'abc'.repeat(2) // 'abcabc' 'abc'.repeat(
3.5) // 'abcabcabc' (count will be converted to integer) 'abc'.repeat(1/0) // rangeerror ({ tostring: () => 'abc', repeat: string.prototype.repeat }).repeat(2) // 'abcabc' (repeat() is a generic method) specifications specification ecmascript (ecma-262)the definition of 'string.prototype.repeat' in that specification.
String.prototype.split() - JavaScript
harry trump ;fred barney; helen rigby ; bill abel ;chris hand [ "harry trump", "fred barney", "helen rigby", "bill abel", "chris hand", "" ] returning a limited number of splits in the following example, split() looks for spaces in a string and returns the first
3 splits that it finds.
...how are you doing?' const splits = mystring.split(' ',
3) console.log(splits) this script displays the following: ["hello", "world.", "how"] splitting with a regexp to include parts of the separator in the result if separator is a regular expression that contains capturing parentheses (), matched results are included in the array.
Symbol.isConcatSpreadable - JavaScript
property attributes of symbol.isconcatspreadable writable no enumerable no configurable no examples arrays by default, array.prototype.concat() spreads (flattens) arrays into its result: let alpha = ['a', 'b', 'c'], let numeric = [1, 2,
3] let alphanumeric = alpha.concat(numeric) console.log(alphanumeric) // result: ['a', 'b', 'c', 1, 2,
3] when setting symbol.isconcatspreadable to false, you can disable the default behavior: let alpha = ['a', 'b', 'c'], let numeric = [1, 2,
3] numeric[symbol.isconcatspreadable] = false let alphanumeric = alpha.concat(numeric) console.log(alphanumeric) // result: ['a', 'b', 'c', [1, 2,
3]...
...symbol.isconcatspreadable needs to be set to true in order to get a flattened array: let x = [1, 2,
3] let fakearray = { [symbol.isconcatspreadable]: true, length: 2, 0: 'hello', 1: 'world' } x.concat(fakearray) // [1, 2,
3, "hello", "world"] note: the length property is used to control the number of object properties to be added.
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] cons...
...ole.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, 1
30, 44]).every(isbigenough); // false new uint8array([12, 54, 18, 1
30, 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, 1
30, 44]).every(elem => elem >= 10); // false new uint8array([12, 54, 18, 1
30, 44]).every(elem => elem >= 10); // true specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.every' in that specification.
TypedArray.prototype.fill() - JavaScript
// https://tc
39.github.io/ecma262/#sec-%typedarray%.prototype.fill if (!uint8array.prototype.fill) { uint8array.prototype.fill = array.prototype.fill; } examples using fill new uint8array([1, 2,
3]).fill(4); // uint8array [4, 4, 4] new uint8array([1, 2,
3]).fill(4, 1); // uint8array [1, 4, 4] new uint8array([1, 2,
3]).fill(4, 1, 2); // uint8array [1, 4,
3] new uint8array([1, 2,
3]).fill(4, ...
...1, 1); // uint8array [1, 2,
3] new uint8array([1, 2,
3]).fill(4, -
3, -2); // uint8array [4, 2,
3] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.fill' in that specification.
TypedArray.prototype.filter() - JavaScript
function isbigenough(element, index, array) { return element >= 10; } new uint8array([12, 5, 8, 1
30, 44]).filter(isbigenough); // uint8array [ 12, 1
30, 44 ] filtering typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([12, 5, 8, 1
30, 44]).filter(elem => elem >= 10); // uint8array [ 12, 1
30, 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 int
32array uint
32array float
32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a typed array.
... copy_data.push(obj[i]); } copy_data = copy_data.map(func, thisobj); var typed_array = new this(copy_data.length); for(var i = 0; i < typed_array.length; i++) { typed_array[i] = copy_data[i]; } return typed_array; } })(); } examples from an iterable object (set) const s = new set([1, 2,
3]); uint8array.from(s); // uint8array [ 1, 2,
3 ] from a string int16array.from('12
3'); // int16array [ 1, 2,
3 ] use with arrow function and map using an arrow function as the map function to manipulate the elements float
32array.from([1, 2,
3], x => x + x); // float
32array [ 2, 4, 6 ] generate a sequence of numbers uint8array.from({length: 5}, (v, k) => k); // uint8array [ 0, 1, 2,
3, 4...
TypedArray.prototype.join() - JavaScript
// https://tc
39.github.io/ecma262/#sec-%typedarray%.prototype.join if (!uint8array.prototype.join) { object.defineproperty(uint8array.prototype, 'join', { value: array.prototype.join }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable.
... examples using join var uint8 = new uint8array([1,2,
3]); uint8.join(); // '1,2,
3' uint8.join(' / '); // '1 / 2 /
3' uint8.join(''); // '12
3' specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.join' 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().valu...
...e); //
3 console.log(earr.next().value); // 4 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.keys()' in that specification.
TypedArray.of() - JavaScript
syntax typedarray.of(element0[, element1[, ...[, elementn]]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int
32array uint
32array float
32array float64array bigint64array biguint64array parameters elementn elements of which to create the typed array.
... examples using of uint8array.of(1); // uint8array [ 1 ] int8array.of('1', '2', '
3'); // int8array [ 1, 2,
3 ] float
32array.of(1, 2,
3); // float
32array [ 1, 2,
3 ] int16array.of(undefined); // int16array [ 0 ] specifications specification ecmascript (ecma-262)the definition of '%typedarray%.of' in that specification.
TypedArray.prototype.slice() - JavaScript
for example, slice(1,4) extracts the second element through the fourth element (elements indexed 1, 2, and
3).
... examples return a portion of an existing typed array const uint8 = new uint8array([1,2,
3]); uint8.slice(1); // uint8array [ 2,
3 ] uint8.slice(2); // uint8array [
3 ] uint8.slice(-2); // uint8array [ 2,
3 ] uint8.slice(0,1); // uint8array [ 1 ] specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.slice' in that specification.
Uint8Array() constructor - JavaScript
typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int
32array), the typedarray gets copied into a new typed array.
... examples different ways to create a uint8array // from a length var uint8 = new uint8array(2); uint8[0] = 42; console.log(uint8[0]); // 42 console.log(uint8.length); // 2 console.log(uint8.bytes_per_element); // 1 // from an array var arr = new uint8array([21,
31]); console.log(arr[1]); //
31 // from another typedarray var x = new uint8array([21,
31]); var y = new uint8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8array(buffer, 1, 4); // from an iterable var iterable = function*(){ yield* [1,2,
3]; }(); var uint8 = new uint8array(iterable); // uint8array[1, 2,
3] specifications s...
Uint8ClampedArray - JavaScript
examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 1
337; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,
31]); console.log(arr[1]); //
31 // from another typedarray var x = new uint8clampedarray([21,
31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffe...
...r = 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.
WeakMap() constructor - JavaScript
examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm
3 = new weakmap(); const o1 = {}, o2 = function() {}, o
3 = window; wm1.set(o1,
37); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o
3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o
3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o
3); // true (even if the value itself is 'undefined') wm
3.set(o1,
37); wm
3.get(o1); //
37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false specifications specification ecmascript (ecma-262)the definition of 'weakmap constructor' in that specification.
WeakMap - JavaScript
examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm
3 = new weakmap(); const o1 = {}, o2 = function() {}, o
3 = window; wm1.set(o1,
37); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a function wm2.set(o
3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o
3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o
3); // true (even if the value itself is 'undefined') wm
3.set(o1,
37); wm
3.get(o1); //
37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false implementing a weakmap-like class with a .clear() method class clearableweakmap { constructor(init) { this._wm = new weakmap(init); } clear() { this._wm = new weakmap(); } delete(k) { return this._wm.delete(k); } get(k) { return this._wm.get(k); } has(k) { return this._wm.has(k); } set(k, v) { this._wm.set(k, v); return this; } } specifications specification ...
WebAssembly.CompileError - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.LinkError - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Memory.prototype.buffer - JavaScript
webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i
32 = new uint
32array(memory.buffer); for (var i = 0; i < 10; i++) { i
32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); specifications specification webassembly javascript interfacethe definition of 'buffer' in that specification.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.RuntimeError - JavaScript
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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support 57edge full support 16firefox ...
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Table() constructor - JavaScript
the table2.wasm module contains two functions (one that returns 42 and another that returns 8
3) and stores both into elements 0 and 1 of the imported table (see text representation).
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Table.prototype.get() - JavaScript
webassembly.instantiatestreaming(fetch('table.wasm')) .then(function(obj) { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 1
3 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.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Table.prototype.grow() - JavaScript
var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "
3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
WebAssembly.Table.prototype.length - JavaScript
var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "
3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification.
...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 4
3safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support ...
Conditional (ternary) operator - JavaScript
value2 : condition
3 ?
... value
3 : value4; } // equivalent to: function example(…) { if (condition1) { return value1; } else if (condition2) { return value2; } else if (condition
3) { return value
3; } else { return value4; } } specifications specification ecmascript (ecma-262)the definition of 'conditional operator' in that specification.
Equality (==) - JavaScript
/ true "hello" == "hello"; // true comparison with type conversion "1" == 1; // true 1 == "1"; // true 0 == false; // true 0 == null; // false 0 == undefined; // false 0 == !!null; // true, look at logical not operator 0 == !!undefined; // true, look at logical not operator null == undefined; // true const number1 = new number(
3); const number2 = new number(
3); number1 ==
3; // true number1 == number2; // false comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 == object2 // false object2 == object2 // true comparing strings and string objects note that strings constructed using new string() are objects.
...however, if both operands are string objects, then they are compared as objects and must reference the same object for comparison to succeed: const string1 = "hello"; const string2 = string("hello"); const string
3 = new string("hello"); const string4 = new string("hello"); console.log(string1 == string2); // true console.log(string1 == string
3); // true console.log(string2 == string
3); // true console.log(string
3 == string4); // false console.log(string4 == string4); // true comparing dates and strings const d = new date('december 17, 1995 0
3:24:00'); const s = d.tostring(); // for example: "sun dec 17 1995 0
3:24:00 gmt-0800 (pacific standard tim...
Greater than (>) - JavaScript
examples string to string comparison console.log("a" > "b"); // false console.log("a" > "a"); // false console.log("a" > "
3"); // true string to number comparison console.log("5" >
3); // true console.log("
3" >
3); // false console.log("
3" > 5); // false console.log("hello" > 5); // false console.log(5 > "hello"); // false console.log("5" >
3n); // true console.log("
3" > 5n); // false number to number comparison console.log(5 >
3); // true co...
...nsole.log(
3 >
3); // false console.log(
3 > 5); // false number to bigint comparison console.log(5n >
3); // true console.log(
3 > 5n); // false comparing boolean, null, undefined, nan console.log(true > false); // true console.log(false > true); // false console.log(true > 0); // true console.log(true > 1); // false console.log(null > 0); // false console.log(1 > null); // true console.log(undefined >
3); // false console.log(
3 > undefined); // false console.log(
3 > nan); // false console.log(nan >
3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Greater than or equal (>=) - JavaScript
examples string to string comparison console.log("a" >= "b"); // false console.log("a" >= "a"); // true console.log("a" >= "
3"); // true string to number comparison console.log("5" >=
3); // true console.log("
3" >=
3); // true console.log("
3" >= 5); // false console.log("hello" >= 5); // false console.log(5 >= "hello"); // false number to number comparison console.log(5 >=
3); // true console.log(
3 >=
3); // true console.log(
3 >= 5); // false number to bigint comp...
...arison console.log(5n >=
3); // true console.log(
3 >=
3n); // true console.log(
3 >= 5n); // false comparing boolean, null, undefined, nan console.log(true >= false); // true console.log(true >= true); // true console.log(false >= true); // false console.log(true >= 0); // true console.log(true >= 1); // true console.log(null >= 0); // true console.log(1 >= null); // true console.log(undefined >=
3); // false console.log(
3 >= undefined); // false console.log(
3 >= nan); // false console.log(nan >=
3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Inequality (!=) - JavaScript
like the equality operator, the inequality operator will attempt to convert and compare operands of different types:
3 != "
3"; // false to prevent this, and require that different types are considered to be different, use the strict inequality operator instead:
3 !== "
3"; // true examples comparison with no type conversion 1 != 2; // true "hello" != "hola"; // true 1 != 1; // false "hello" != "hello"; // false comparison with type conversion "1" != 1; // false 1 !=...
... "1"; // false 0 != false; // false 0 != null; // true 0 != undefined; // true 0 != !!null; // false, look at logical not operator 0 != !!undefined; // false, look at logical not operator null != undefined; // false const number1 = new number(
3); const number2 = new number(
3); number1 !=
3; // false number1 != number2; // true comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 != object2 // true object2 != object2 // false specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
Less than (<) - JavaScript
examples string to string comparison console.log("a" < "b"); // true console.log("a" < "a"); // false console.log("a" < "
3"); // false string to number comparison console.log("5" <
3); // false console.log("
3" <
3); // false console.log("
3" < 5); // true console.log("hello" < 5); // false console.log(5 < "hello"); // false console.log("5" <
3n); // false console.log("
3" < 5n); // true number to number comparison console.log(5 <
3); // false ...
...console.log(
3 <
3); // false console.log(
3 < 5); // true number to bigint comparison console.log(5n <
3); // false console.log(
3 < 5n); // true comparing boolean, null, undefined, nan console.log(true < false); // false console.log(false < true); // true console.log(0 < true); // true console.log(true < 1); // false console.log(null < 0); // false console.log(null < 1); // true console.log(undefined <
3); // false console.log(
3 < undefined); // false console.log(
3 < nan); // false console.log(nan <
3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Less than or equal (<=) - JavaScript
examples string to string comparison console.log("a" <= "b"); // true console.log("a" <= "a"); // true console.log("a" <= "
3"); // false string to number comparison console.log("5" <=
3); // false console.log("
3" <=
3); // true console.log("
3" <= 5); // true console.log("hello" <= 5); // false console.log(5 <= "hello"); // false number to number comparison console.log(5 <=
3); // false console.log(
3 <=
3); // true console.log(
3 <= 5); // true number to bigint com...
...parison console.log(5n <=
3); // false console.log(
3 <=
3n); // true console.log(
3 <= 5n); // true comparing boolean, null, undefined, nan console.log(true <= false); // false console.log(true <= true); // true console.log(false <= true); // true console.log(true <= 0); // false console.log(true <= 1); // true console.log(null <= 0); // true console.log(1 <= null); // false console.log(undefined <=
3); // false console.log(
3 <= undefined); // false console.log(
3 <= nan); // false console.log(nan <=
3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Logical AND (&&) - JavaScript
a1 = true && true // t && t returns true a2 = true && false // t && f returns false a
3 = false && true // f && t returns false a4 = false && (
3 == 4) // f && f returns false a5 = 'cat' && 'dog' // t && t returns "dog" a6 = false && 'cat' // f && t returns false a7 = 'cat' && false // t && f returns false a8 = '' && false // f && f returns "" a9 = false && '' // f && f returns false conversion rules for booleans converting and to or the foll...
... the following composite operation involving booleans: bcondition1 || (bcondition2 && bcondition
3) is always equal to: bcondition1 || bcondition2 && bcondition
3 specifications specification ecmascript (ecma-262)the definition of 'logical and expression' in that specification.
Logical NOT (!) - JavaScript
n1 = !true // !t returns false n2 = !false // !f returns true n
3 = !'' // !f returns true n4 = !'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
3 = !!(new boolean(false)) // ...even boolean objects with a false .valueof()!
Logical OR (||) - JavaScript
o1 = true || true // t || t returns true o2 = false || true // f || t returns true o
3 = true || false // t || f returns true o4 = false || (
3 == 4) // f || f returns false o5 = 'cat' || 'dog' // t || t returns "cat" o6 = false || 'cat' // f || t returns "cat" o7 = 'cat' || false // t || f returns "cat" o8 = '' || false // f || f returns false o9 = false || '' // f || f returns "" o10 = false || varobject // f || object returns varobject no...
... the following composite operation involving booleans: bcondition1 && (bcondition2 || bcondition
3) is always equal to: !(!bcondition1 || !bcondition2 && !bcondition
3) specifications specification ecmascript (ecma-262)the definition of 'logical or expression' in that specification.
Right shift (>>) - JavaScript
9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) likewise, -9 >> 2 yields -
3, because the sign is preserved: .
... -9 (base 10): 11111111111111111111111111110111 (base 2) -------------------------------- -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -
3 (base 10) examples using right shift 9 >> 2; // 2 -9 >> 2; // -
3 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification.
Strict inequality (!==) - JavaScript
like the strict equality operator, the strict inequality operator will always consider operands of different types to be different:
3 !== "
3"; // true examples comparing operands of the same type console.log("hello" !== "hello"); // false console.log("hello" !== "hola"); // true console.log(
3 !==
3); // false console.log(
3 !== 4); // true console.log(true !== true); // false console.log(true !== false); // true console.log(null !== null); // false comparing operands...
... of different types console.log("
3" !==
3); // true console.log(true !== 1); // true console.log(null !== undefined); // true comparing objects const object1 = { name: "hello" } const object2 = { name: "hello" } console.log(object1 !== object2); // true console.log(object1 !== object1); // false specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
async function expression - JavaScript
examples simple example function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); }; const add = async function(x) { // async function expression assigned to a variable let a = await resolveafter2seconds(20); let b = await resolveafter2seconds(
30); return x + a + b; }; add(10).then(v => { console.log(v); // prints 60 after 4 seconds.
... }); (async function(x) { // async function expression used as an iife let p_a = resolveafter2seconds(20); let p_b = resolveafter2seconds(
30); return x + await p_a + await p_b; })(10).then(v => { console.log(v); // prints 60 after 2 seconds.
await - JavaScript
async function f
3() { var y = await 20; console.log(y); // 20 } f
3(); promise rejection if the promise is rejected, the rejected value is thrown.
... async function f4() { try { var z = await promise.reject(
30); } catch(e) { console.error(e); //
30 } } f4(); handling rejected promises handle rejected promise without try block.
export - JavaScript
* x; } const foo = math.pi + math.sqrt2; var graph = { options: { color:'white', thickness:'2px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = { color:'blue', thickness:'
3px' }; graph.draw(); console.log(cube(
3)); // 27 console.log(foo); // 4.555806215962888 it is important to note the following: you need to include this script in your html with a <script> element of type="module", so that it gets recognised as a module and dealt with appropriately.
... using the default export if we want to export a single value or to have a fallback value for your module, you could use a default export: // module "my-module.js" export default function cube(x) { return x * x * x; } then, in another script, it is straightforward to import the default export: import cube from './my-module.js'; console.log(cube(
3)); // 27 using export from let's take an example where we have the following hierarchy: childmodule1.js: exporting myfunction and myvariable childmodule2.js: exporting myclass parentmodule.js: acting as an aggregator (and doing nothing else) top level module: consuming the exports of parentmodule.js this is what it would look like using code snippets: // in childmodule1.js let myfunct...
for...in - JavaScript
var obj = {a: 1, b: 2, c:
3}; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); } // output: // "obj.a = 1" // "obj.b = 2" // "obj.c =
3" iterating own properties the following function illustrates the use of hasownproperty(): the inherited properties are not displayed.
... var triangle = {a: 1, b: 2, c:
3}; function coloredtriangle() { this.color = 'red'; } coloredtriangle.prototype = triangle; var obj = new coloredtriangle(); for (const prop in obj) { if (obj.hasownproperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // output: // "obj.color = red" specifications specification ecmascript (ecma-262)the definition of 'for...in statement' in that specification.
if...else - JavaScript
if (condition1) statement1 else if (condition2) statement2 else if (condition
3) statement
3 ...
... else statementn to see how this works, this is how it would look if the nesting were properly indented: if (condition1) statement1 else if (condition2) statement2 else if (condition
3) ...
label - JavaScript
examples using a labeled continue with for loops var i, j; loop1: for (i = 0; i <
3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j <
3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // "i = 2, j = 0" // "i = 2, j = 1" /...
... var itemspassed = 0; var i, j; top: for (i = 0; i < items.length; i++) { for (j = 0; j < tests.length; j++) { if (!tests[j].pass(items[i])) { continue top; } } itemspassed++; } using a labeled break with for loops var i, j; loop1: for (i = 0; i <
3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j <
3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break loop1; } console.log('i = ' + i + ', j = ' + j); } } // output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // notice the difference with the previous c...
throw - JavaScript
* * accepted formats for a zip code are: * 12
345 * 12
345-6789 * 12
3456789 * 12
345 6789 * * if the argument passed to the zipcode constructor does not * conform to one of these patterns, an exception is thrown.
...tch (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 12
34'); // returns 95060 12
34 rethrow an exception you can use throw to rethrow an exception after you catch it.
while - JavaScript
var n = 0; var x = 0; while (n <
3) { n++; x += n; } each iteration, the loop increments n and adds it to x.
... therefore, x and n take on the following values: after the first pass: n = 1 and x = 1 after the second pass: n = 2 and x =
3 after the third pass: n =
3 and x = 6 after completing the third pass, the condition n <
3 is no longer true, so the loop terminates.
with - JavaScript
consider this example: function f(foo, values) { with (foo) { console.log(values); } } if you call f([1,2,
3], obj) in an ecmascript 5 environment, then the values reference inside the with statement will resolve to obj.
...so, in a javascript environment that supports ecmascript 2015, the values reference inside the with statement could resolve to [1,2,
3].values.
Values - MathML
constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace => 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 introd...
...uced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) (bug 6505
30) negativeveryverythinmathspace -1/18em negativeverythinmathspace -2/18em negativethinmathspace -
3/18em negativemediummathspace -4/18em negativethickmathspace -5/18em negativeverythickmathspace -6/18em negativeveryverythickmathspace -7/18em note: namedspace binding is deprecated in mathml
3 and has been removed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) (bug 67
3759).
<math> - MathML
<mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> xhtml notation <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w
3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w
3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w
3.org/1999/xhtml"> <head> <title>mathml in xhtml</title> </head> <body> <math xmlns="http://www.w
3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> ...
... specifications specification status comment mathml
3.0the definition of 'the top-level math element' in that specification.
<mpadded> - MathML
prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) the mathml2 pseudo-unit lspace was allowed, which is no longer present in the mathml
3 recommendation and has been removed now.
... examples <math> <mpadded height="+150px" width="100px" lspace="2height"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </mpadded> </math> specifications specification status comment mathml
3.0the definition of 'mpadded' in that specification.
<mspace> - MathML
starting with mathml
3, it is preferred to use <mo> to control linebreaking.
... examples <math> <mspace depth="40px" height="20px" /> <mspace width="100px" /> </math> specifications specification status comment mathml
3.0the definition of 'mspace' in that specification.
MathML
for a quick overview, see the slides for the innovation fairs at mozilla summit 201
3.
... mailing list newsgroup rss feed matrix chat room wiki used by mozilla contributors w
3c math home www-math w
3.org mail archive tools w
3c validator mathzilla firefox add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser javascript...
OpenSearch description format
in firefox 6
3 onwards, type="application/json" is accepted as an alias of this.
... remotely fetched favicons must not be larger than 10kb (see bug
36192
3).
Installing and uninstalling web apps - Progressive web apps (PWAs)
installation is supported by chrome for android and android webview version
31 and later, opera for android
32 onward, samsung internet from version 4 onward, and firefox for android version 58 and later.
...ios 1
3 introduced a much more comparable install experience, which is also described here.
Progressive web apps (PWAs)
progressive loadingin previous articles we covered apis that help us make our js1
3kpwa example a progressive web app: service workers, web manifests, notifications and push.
...we will start with analyzing the js1
3kpwa application, why it is built that way, and what benefits it brings.pwa developer guidein the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).structural overview of progressive web appsin this structural overview, we'll look at the features that make up a standard web application, as well as some design patterns you can follow when building your pwa.
alignment-baseline - SVG: Scalable Vector Graphics
example <svg width="
300" height="120" viewbox="0 0
300 120" xmlns="http://www.w
3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,10 l60,110 m
30,10 l
300,10 m
30,65 l
300,65 m
30,110 l
300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="10">a hanging</text> <text ali...
...gnment-baseline="middle" x="60" y="65">a middle</text> <text alignment-baseline="baseline" x="60" y="110">a baseline</text> <!-- materialisation of anchors --> <circle cx="60" cy="10" r="
3" fill="red" /> <circle cx="60" cy="65" r="
3" fill="red" /> <circle cx="60" cy="110" r="
3" fill="red" /> <style><![cdata[ text{ font: bold
36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> for object alignment in other elements (such as <text>), see dominant-baseline.
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default val...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w
3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications ...
clipPathUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <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="r
3" x="55" y="55" width="45" height="45" /> <rect id="r4" 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="url(#myclip1)" xlink:href="#r
3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element.
font-family - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace default value ...
... css fonts module level
3the definition of 'font-family' in that specification.
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
... specifications specification status comment css fonts module level
3the definition of 'font-size-adjust' in that specification.
font-size - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
... specifications specification status comment css fonts module level
3the definition of 'font-size' in that specification.
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property.
... working draft no change css fonts module level
3the definition of 'font-style' in that specification.
font-variant - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styl...
... working draft no change css fonts module level
3the definition of 'font-variant' in that specification.
font-weight - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200
30" xmlns="http://www.w
3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the css font-weight property.
... css fonts module level
3the definition of 'font-weight' in that specification.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" f...
...y="100" gradienttransform="skewx(20) translate(-
35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w
3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
image-rendering - SVG: Scalable Vector Graphics
specifications specification status comment css images module level
3the definition of 'image-rendering' in that specification.
... candidate recommendation no significant change, only added a reference to css images
3 scalable vector graphics (svg) 1.1 (second edition)the definition of 'image-rendering' 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.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.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/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" inter...
...cept="0"/> <fefuncb type="linear" intercept="0"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0.
3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification stat...
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="
300" height="150" xmlns="http://www.w
3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="
300" lengthadjust="spacing"> stretched using spacing only.
... </text> <text x="0" y="50" textlength="
300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs.
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect 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="r
3" x="55" y="55" width="45" height="45" /> <rect id="r4" 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)" xlink:href="#r
3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="
35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="
35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" ...
... y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r
3" x="55" y="55" width="45" height="45" /> <rect id="r4" 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)" xlink:href="#r
3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" 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.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="
3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="2...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w
3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="
3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects modu...
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.w
3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be per...
... 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 + k
3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k
3,and k4 indicate the values of the attributes with the same name.
orient - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> ...
... <polyline points="15,80 29,50 4
3,60 57,
30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w
3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
... in that case, 100 user units --> <path d="m 0,10 h100"/> <!-- compute everything like if the path length was 90 user units long --> <path d="m 0,20 h100" pathlength="90"/> <!-- compute everything like if the path length was 50 user units long --> <path d="m 0,
30 h100" pathlength="50"/> <!-- compute everything like if the path length was
30 user units long --> <path d="m 0,40 h100" pathlength="
30"/> <!-- compute everything like if the path length was 10 user units long --> <path d="m 0,50 h100" pathlength="10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units.
rotate - SVG: Scalable Vector Graphics
examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w
3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount=...
...anslate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(
300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications sp...
seed - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default va...
...lue 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w
3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w
3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: tra...
...nslate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(
320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(
320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions ...
stroke-dashoffset - 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="-
3 0
33 10" xmlns="http://www.w
3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="
30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="
3" x2="
30" y2="
3" stroke="black" stroke-dasharray="
3 1" /> <!-- the start of the dash array computation is pulled by
3 user units --> <line x1="0" y1="5" x2="
30" y2="5" stroke="black" stroke-dasharra...
...y="
3 1" stroke-dashoffset="
3" /> <!-- the start of the dash array computation is pushed by
3 user units --> <line x1="0" y1="7" x2="
30" y2="7" stroke="black" stroke-dasharray="
3 1" stroke-dashoffset="-
3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="
30" y2="9" stroke="black" stroke-dasharray="
3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-
3 m0,7 h
3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the...
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.w
3.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].
text-anchor - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w
3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m
30,40 l90,40 m
30,75 l90,75 m
30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r="
3" fill...
...="red" /> <circle cx="60" cy="75" r="
3" fill="red" /> <circle cx="60" cy="110" r="
3" fill="red" /> <style><![cdata[ text { font: bold
36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position.
values - SVG: Scalable Vector Graphics
lue 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 a0
3 a04 a10 a11 ...
... a
34), separated by whitespace and/or a comma.
viewBox - SVG: Scalable Vector Graphics
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.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.w
3.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.w
3.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%"/> <!-- ...
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w
3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | collapse ...
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w
3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 1
3.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.8
3l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } butto...
width - SVG: Scalable Vector Graphics
>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100
300" xmlns="http://www.w
3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
... note: in an html document if both the viewbox and width attributes are omitted, the svg element will be rendered with a width of
300px value auto | <length> | <percentage> default value auto (treated as 100%) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a css property for <svg>.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w
3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="
30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="
30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w
3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="
30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" ...
... scale="
30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
<a> - SVG: Scalable Vector Graphics
@namespace svg url(http://www.w
3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w
3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="
35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's co...
...nsidered best practice to add some */ @namespace svg url(http://www.w
3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
<animate> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w
3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style eve...
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w
3c understanding wcag 2.0 specifications specification status comment svg animations level 2the definition of '<animate>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0
30 10" xmlns="http://www.w
3.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="shadow
3"> <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(#shadow
3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow.
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="2
30" height="120" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg widt...
...h="120" height="120" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="
3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
examples filtering svg content svg <svg xmlns="http://www.w
3.org/2000/svg" width="
300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="
3em">fattened text</text> </svg> css text { font-family: arial, helvetica, sans-serif...
...; font-size:
3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w
3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size:
3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" ...
... k1="0" k2="1" k
3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
example svg <svg width="400px" height="
300px" version="1.1" xmlns="http://www.w
3.org/2000/svg"> <!-- example copied from https://www.w
3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="
300" alphabetic="0" mathe...
...matical="
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,
300l400,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.
<solidcolor> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w
3.org/2000/svg" viewbox="0 0
300 200" height="150"> <defs> <!-- solidcolor is experimental.
...--> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="150" cy="65" r="
35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="
35" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="150" cy="165" r="
35" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="
35" fill="url(#mygradient)"/> </svg> result ...
<symbol> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 80 20" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" stroke="pink" /> <!-- all in...
...stances of our symbol --> <use xlink:href="#mydot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="
35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol.
<view> - SVG: Scalable Vector Graphics
categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w
3.org/2000/svg" xmlns:xlink="http://www.w
3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 2...
...00"/> <view id="doublesizeview" viewbox="0 0
300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="60" font-size="20">double size</text> </a> </svg> result dom interface this element implements the svgviewelement interface.
Linking - SVG: Scalable Vector Graphics
when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w
3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w
3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird
3.
3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
... css backgrounds and borders module level
3the definition of 'svg within 'background-image' css property' in that specification.
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="
300" height="200" xmlns="http://www.w
3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
...see the server configuration page on the w
3.org for a range of simple solutions.
Patterns - SVG: Scalable Vector Graphics
<svg width="200" height="200" xmlns="http://www.w
3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="...
...all three of the preceding examples are shown below on a rectangle that has been slightly elongated to a height of
300px, but i should note that it's not an exhaustive picture, and there are other options available depending on your application.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="
3"/> </filter> </defs> <g id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired output.
...<femerge> primitive contains the nodes <femergenode> taking as input the result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="
3" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
ieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="
30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...like in the following example: var img = document.createelementns("http://www.w
3.org/2000/svg", "image"); img.setattributens("http://www.w
3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.
SVG fonts - SVG: Scalable Vector Graphics
internet explorer hasn't considered implementing this, the functionality has been removed from chrome
38 (and opera 25) and firefox has postponed its implementation indefinitely to concentrate on woff.
... <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="
300" alphabetic="0" mathematical="
350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="
300"><!-- outline of exclam.
Mixed content - Web security
starting in firefox 2
3, mixed active content is blocked by default (and mixed display content can be blocked by setting a preference).
... note: since firefox 55, the loading of mixed content is allowed on http://127.0.0.1/ (see bug 90
3966).