Search completed in 2.06 seconds.
Migrating from Firebug - Firefox Developer Tools
the devtools share the same shortcuts, but also prov
ide shortcuts for the different panels.
...the developer tools console offers similar functionality via the filter buttons ins
ide its toolbar — centralized at one place.
... command line api the command line api in firebug prov
ides some special functions for your convenience.
...And 52 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
in this article, i will describe mozilla's quirks mode, which prov
ides strong backwards html compatibility with internet explorer and other legacy browsers.
...they include: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment
identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
... var elm; if (ns4) elm = document.layers["my
id"]; else if (ie4) elm = document.all["my
id"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the web application.
...And 51 more matches
Multiple-column layout - Learn web development
prerequisites: html basics (study introduction to html), and an
idea of how css works (study introduction to css.) objective: to learn how to create multiple-column layout on webpages, such as you might find in a newspaper.
... our starting point contains some very simple html; a wrapper with a class of container ins
ide which is a heading and some paragraphs.
...we switch on multicol by using one of two properties column-count or column-w
idth.
...And 51 more matches
nsIAnnotationService
toolkit/components/places/public/nsiannotationservice.
idlscriptable stores arbitrary data about a web page.
... method overview vo
id setpageannotation(in nsiuri auri, in autf8string aname, in nsivariant avalue, in long aflags, in unsigned short aexpiration); vo
id setitemannotation(in long long aitem
id, in autf8string aname, in nsivariant avalue, in long aflags, in unsigned short aexpiration); vo
id setpageannotationstring(in nsiuri auri, in autf8string aname, in astring avalue, in long aflags, in unsigned shor...
...t aexpiration); boolean setitemannotationstring(in long long aitem
id, in autf8string aname, in astring avalue, in long aflags, in unsigned short aexpiration); vo
id setpageannotationint32(in nsiuri auri, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); vo
id setitemannotationint32(in long long aitem
id, in autf8string aname, in long avalue, in long aflags, in unsigned short aexpiration); vo
id setpageannotationint64(in nsiuri auri, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); vo
id setitemannotationint64(in long long aitem
id, in autf8string aname, in long long avalue, in long aflags, in unsigned short aexpiration); vo
id setpageannotationdouble(in nsiuri auri, in...
...And 51 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
if you're implementing controls/w
idgets, you should also see the accessible toolkit checklist.
... third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening ins
ide mozilla.
...msaa is supposed to be the "right way" for accessibility a
ids to get information, but sometimes the hacks are more effective.
...And 51 more matches
<input type="number"> - HTML: Hypertext Markup Language
they include built-in val
idation to reject non-numerical entries.
... the browser may opt to prov
ide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
... events change and input supported common attributes autocomplete, list, placeholder, readonly
idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty.
...And 51 more matches
<input type="tel"> - HTML: Hypertext Markup Language
unlike <input type="email"> and <input type="url"> , the input value is not automatically val
idated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
... despite the fact that inputs of type tel are functionally
identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers.
... using a specific input type for telephone numbers also makes adding custom val
idation and handling of phone numbers more convenient.
...And 51 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
for web developers, it is now fairly common to be called upon to create a web site or app that changes its user interface depending on the browser or device accessing the site to prov
ide an optimized experience.
... flu
id gr
ids the best place to start is with flu
id measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed w
idths such as pixels.
... we've written a simple-but-fun prototype for an application called snapshot, which takes a v
ideo stream from your webcam (using getusermedia()) then allows you to capture stills from that v
ideo stream (using html5 <canvas>), and save them to a gallery.
...And 51 more matches
Modularization techniques - Archive of obsolete content
introduction the purpose of this document is prov
ide all the information you need to create a new mozilla module or break existing code into a module.
... the mechanism we're using is based on the principles la
id down by com, so pretty much anything you know about com can be applied here, and any reference on com can prov
ide you with more interesting and complex examples than the ones prov
ided here.
...a pure virtual interface is simply a class where every method is defined as pure virtual, that is: virtual int foo(int bar) = 0; pure virtual interfaces prov
ide an easy mechanism for passing function tables between modules that may res
ide in separate, possibly dynamically loaded, libraries.
...And 50 more matches
Digital audio concepts - Web media technologies
this gu
ide is an overview examining how audio is represented digitally, and how codecs are used to encode and decode audio for use on the web.
...the granularity of an audio wave in the real world, then, is that of an indiv
idual molecule of the medium through which the sound wave is traveling.
... the first factor affecting the f
idelity of the captured audio is the audio bandw
idth; that is, the range of audio frequencies the a/d converter is capable of capturing and converting into digital form.
...And 50 more matches
Capabilities, constraints, and settings - Web APIs
the constraint exerciser lets you experiment with the results of different constraint sets being applied to the audio and v
ideo tracks coming from the computer's a/v input devices (such as its webcam and microphone).
... determining if a constraint is supported if you need to know whether or not a given constriant is supported by the user agent, you can find out by calling navigator.mediadevices.getsupportedconstraints() to get a list of the constrainable properties which the browser knows, like this: let supported = navigator.mediadevices.getsupportedconstraints(); document.getelementby
id("frameratesl
ider").disabled = !supported["framerate"]; in this example, the supported constraints are fetched, and a control that lets the user configure the frame rate is disabled if the framerate constraint isn't supported.
...this object contains zero or more indiv
idual constraints, as well as an optional sub-object named advanced, which contains another set of zero or more constraints which the user agent must satisfy if at all possible.
...And 49 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
in other words, an implementation should allow any val
id combination of year, month, day, hour, and minute - even if such a combination is inval
id in the user's local time zone (such as times within a daylight saving time spring-forward transition gap).
...another option is to use separate date and time inputs, each of which is more w
idely supported than datetime-local.
... some browsers may resort to a text-only input element that val
idates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it.
...And 49 more matches
Floats - Learn web development
previous overview: css layout next originally for floating images ins
ide blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... with the advent of flexbox and gr
id it has now returned to its original purpose, as this article explains.
... prerequisites: html basics (study introduction to html), and an
idea of how css works (study introduction to css.) objective: to learn how to create floated features on webpages, and to use the clear property and other methods of clearing floats.
...And 48 more matches
Performance best practices for Firefox front-end engineers
this gu
ide will help firefox developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox.
... always keep in mind the s
ide effects your changes may have, from blocking other tasks, to interfering with other user interface elements.
... avo
id the main thread where possible the main thread is where we process user events and do painting.
...And 48 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 vo
id onbeforeitemremoved(in long long aitem
id, in unsigned short aitemtype, in long long aparent
id, in acstring agu
id, in acstring aparentgu
id); obsolete since gecko 21.0 vo
id onbeginupdatebatch(); vo
id onendupdatebatch(); vo
id onfolderadded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 vo
id onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 vo
id onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 ...
... vo
id onfolderremoved(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 vo
id onitemadded(in long long aitem
id, in long long aparent
id, in long aindex, in unsigned short aitemtype, in nsiuri auri, in autf8string atitle, in prtime adateadded, in acstring agu
id, in acstring aparentgu
id); vo
id onitemchanged(in long long aitem
id, in acstring aproperty, in boolean aisannotationproperty, in autf8string anewvalue, in prtime alastmodified, in unsigned short aitemtype, in long long aparent
id, in acstring agu
id, in acstring aparentgu
id); vo
id onitemmoved(in long long aitem
id, in long long aoldparent
id, in long aoldindex, in long long anewparent
id, in long anewindex, in unsigned short aitemtype, in acstring agu
id, in acstring aoldparentgu
id, i...
...And 48 more matches
MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont"
id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latinmodern">latin modern</option> <option value="libertinus">libertinus</option> <option value="luc
idabright">luc
ida 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="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> ...
... <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" w
idth="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" w
idth="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="...
... <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" w
idth="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn...
...And 37 more matches
nsIAppShellService
xpfe/appshell/nsiappshellservice.
idlscriptable prov
ides the appshellservice.
... inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/appshell/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .getservice(components.interfaces.nsiappshellservice); method overview vo
id closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 vo
id createh
iddenwindow(in nsiappshell aappshell); native code only!
... boolean createstartupstate(in long awindoww
idth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialw
idth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) vo
id destroyh
iddenwindow(); vo
id doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 vo
id ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 vo
id enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 vo
id exitlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 vo
id geth
iddenwindowandjscontext(out ...
...And 37 more matches
nsISelectionController
content/base/public/nsiselectioncontroller.
idlscriptable please add a summary to this article.
... inherits from: nsiselectiondisplay last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview vo
id characterextendforbackspace(); native code only!
... vo
id characterextendfordelete(); native code only!
...And 37 more matches
AddressErrors - Web APIs
the addresserrors dictionary is used by the payment request api to to report val
idation errors in a physical address (typically a billing address or a shipping address).
... any members which is present indicates that a val
idation 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 shippingaddresschange event handler if a change to the address resulted in a val
idation error occurring.
...And 37 more matches
HTMLInputElement - Web APIs
the htmlinputelement interface prov
ides special properties and methods for manipulating the options, layout, and presentation of <input> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 37 more matches
<input type="month"> - HTML: Hypertext Markup Language
in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic val
idation of the entered text to ensure it's formatted as expected.
...clicking the down arrow on the right hand s
ide brings up a date picker that lets you select the month and year.
...
idl attributes value methods select(), stepdown(), stepup().
...And 37 more matches
The Essentials of an Extension - Archive of obsolete content
<em:
id>helloworld@xulschool.com</em:
id> this is the unique
identifier for the extension.
... firefox needs this to distinguish your extension from other extensions, so it is required that you have an
id that is unique.
... there are two accepted standards for add-on
ids.
...And 36 more matches
React interactivity: Events and state - Learn web development
previous overview: client-s
ide 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.
...once we have our callback prop, we can call it ins
ide <form /> to send the right data to <app />.
... handling form submission via callbacks ins
ide the top of our app() component function, create a function named addtask() which has a single parameter of name: function addtask(name) { alert(name); } next, we'll pass addtask() into <form /> as a prop.
...And 36 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-s
ide javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
... create a <script> section at the top of src/components/todos.svelte and give it some content, as follows: <script> let todos = [ {
id: 1, name: 'create a svelte starter app', completed: true }, {
id: 2, name: 'create your first component', completed: true }, {
id: 3, name: 'complete the rest of the tutorial', completed: false } ] let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length </script> now let's do something with that information.
...find the <h2> heading with an
id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2
id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array.
...And 36 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
f 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 vo
id 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 <serialnumbe...
...30s - certificate 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); } /* * val
idate the options used for generate csr command */ static vo
id val
idategeneratecsrcommand(const char *progname, const char *dbdir, certname *subject, const char *subjectstr, const char *certreqfilename) { prbool val
idationfailed = pr_false; if (!subject) { pr_fpri...
...ntf(pr_stderr, "%s -g -d %s -s: improperly formatted name: \"%s\"\n", progname, dbdir, subjectstr); val
idationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not found\n", progname, dbdir, subjectstr); val
idationfailed = pr_true; } if (val
idationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-g -d <dbdirpath> -s <subject> -r <csr> \n"); exit(-1); } } /* * val
idate the options used for add cert to db command */ static vo
id val
idateaddcerttodbcommand(const char *progname, const char *dbdir, const char *nicknamestr, ...
...And 36 more matches
Web Replay
timeline the timeline is shown above the developer tools and prov
ides several features to help with navigating the recording: the timeline changes color depending on whether the tab is currently recording (red) or replaying (blue).
...logpoints cannot have s
ide-effects or diverge from the recording in any othe way in this mode.
... ipc integration communication between the chrome process and a recording or replaying process — hereafter referred to as the child process — is managed via a separate m
iddleman content process.
...And 36 more matches
Places utilities for JavaScript
its not an interface, and as such it will never be frozen, but it prov
ides some easy to use functions that can save you from reinventing the wheel and cluttering up your own classes/functions when you need it.
...these are: qi_node qi_node(anode, ai
id) runs a query interface on a bookmark node to expose the interface available to that type.
... anode - the bookmark ai
id - the return interface wanted.
...And 36 more matches
IAccessibleText
other-licenses/ia2/accessibletext.
idlnot scriptable a structure containing a substring and the start and end offsets in the enclosing string.
...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 w
idth, [out] long height ); [propget] hresult ncharacters([out] long ncharacters ); [propget] hresult newtext([out] ia2textsegment newtext ); [propget] hresult nselections([out] long nselections ); [propget] hresult offsetatpoint([in] long x, [in] long y, [in] enum ia2coordinatetype coordtype, [out] long offset ); [propget] hresult oldtext([out] ia2textsegment oldtext ); hresult removesel...
... return value e_inval
idarg if bad [in] passed.
...And 36 more matches
nsIMsgFolder
check //github.com/realityripple/uxp/blob/master/mailnews/base/public/nsimsgfolder.
idl for the newer methods (esp.
... inherits from: nsisupports method overview vo
id startfolderloading(); vo
id endfolderloading(); vo
id updatefolder(in nsimsgwindow awindow); nsimsgfilterlist getfilterlist(in nsimsgwindow msgwindow); vo
id setfilterlist(in nsimsgfilterlist filterlist); vo
id forcedbclosed(); vo
id delete(); vo
id deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); vo
id propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); vo
id recursivedelete(in boolean deletestorage, in nsimsgwindow msgwindow); vo
id createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); ...
... vo
id createstorageifmissing(in nsiurllistener urllistener); vo
id compact(in nsiurllistener alistener, in nsimsgwindow amsgwindow); vo
id compactall(in nsiurllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); vo
id compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); vo
id emptytrash(in nsimsgwindow amsgwindow, in nsiurllistener alistener); vo
id rename(in astring name, in nsimsgwindow msgwindow); vo
id renamesubfolders( in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); vo
id updatesummarytotal...
...And 36 more matches
Fullscreen API - Web APIs
see the article gu
ide to the fullscreen api for details on how to use the api.
...you may wish to cons
ider using a library such as fscreen for vendor agnostic access to the fullscreen api.
...instead, it augments several other interfaces to add the methods, properties, and event handlers needed to prov
ide full-screen functionality.
...And 36 more matches
How to structure a web form - Learn web development
previous overview: forms next with the basics out of the way, we'll now look in more detail at the elements used to prov
ide structure and meaning to the different parts of a form.
...each time you want to create an html form, you must start it by using this element, nesting all the contents ins
ide.
... warning: it's strictly forb
idden to nest a form ins
ide another form.
...And 34 more matches
Images in HTML - Learn web development
fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) ins
ide web pages was added.
... there are other types of multimedia to cons
ider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage.
... so for example, if your image is called dinosaur.jpg, and it sits in the same directory as your html page, you could embed the image like so: <img src="dinosaur.jpg"> if the image was in an images subdirectory, which was ins
ide the same directory as the html page (which google recommends for seo/indexing purposes), then you'd embed it like this: <img src="images/dinosaur.jpg"> and so on.
...And 34 more matches
Looping code - Learn web development
previous overview: building blocks next programming languages are very useful for rap
idly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
... let's cons
ider the case of a farmer that is making sure he has enough food to feed his family for the week.
... at this point, you probably understand the high-level concepts behind loops, but you are probably thinking "ok, great, but how does this help me write better javascript code?" as we sa
id earlier, loops are all to do with doing the same thing over and over again, which is great for rap
idly completing repetitive tasks.
...And 34 more matches
Creating localizable web applications
the language_config class expects arrays of val
id languages & supported languages.
... use the locale code in the urls depending on how you detect user's locale, you may want to prov
ide a way of overr
iding the autodetection.
...avo
id using it in a subdomain, as it can cause problems with certificates (this is wrong: http://en-us.example.com/foo/bar).
...And 34 more matches
NSS functions
section headings are links to the indiv
idual pages where you can edit them.
...the mozilla cross reference (mxr) link for each function prov
ides access to the function definition, prototype definition, and source code references.
... ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherprefget mxr 3.2 and later ssl_cipherprefgetdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpservers
idcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversession
idcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.4 and later ssl_getchannelinfo mxr 3.4 and later ssl_getciphersuiteinfo...
...And 34 more matches
nsIComponentRegistrar
xpcom/components/nsicomponentregistrar.
idlscriptable this interface prov
ides methods to access and modify the xpcom component registry.
... inherits from: nsisupports last changed in gecko 1.0 method overview vo
id autoregister(in nsifile aspec); vo
id autounregister(in nsifile aspec); string c
idtocontract
id(in nsc
idref aclass); nsc
idptr contract
idtoc
id(in string acontract
id); nsisimpleenumerator enumeratec
ids(); nsisimpleenumerator enumeratecontract
ids(); boolean isc
idregistered(in nsc
idref aclass); boolean iscontract
idregistered(in string acontract
id); vo
id registerfactory(in nsc
idref aclass, in string aclassname, in string acontract
id, in nsifactory afactory); vo
id registerfactorylocation(in nsc
idref aclass, in string aclassname, in string acontract
id, in nsifile afile, in string aloaderstr, in string atype); vo
id unregisterfactory(in nsc
idref aclass, in nsifactory afactory); vo
id unregisterfactor...
...ylocation(in nsc
idref aclass, in nsifile afile); methods autoregister() register a component (.manifest) file or all component files in a directory.
...And 34 more matches
nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.
idlscriptable the window mediator is a mozilla component that keeps track of open windows.
... implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview vo
id addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiw
idget inbelow, out unsigned long outposition, out nsiw
idget outbelow); native code only!
... nsisimpleenumerator getenumerator(in wstring awindowtype); ns
idomwindow getmostrecentwindow(in wstring awindowtype); ns
idomwindow getouterwindowwith
id(in unsigned long long aouterwindow
id); nsisimpleenumerator getxulwindowenumerator(in wstring awindowtype); pruint32 getzlevel(in nsixulwindow awindow); native code only!
...And 34 more matches
Index
the account provisioner gives the user the chance to search for and order a vanity email account from a list of partner prov
iders.
... 3 account examples extensions, thunderbird this article prov
ides examples on accessing and manipulating thunderbird accounts.
... account interfaces prov
ides an overview of the related interfaces.
...And 34 more matches
WebRTC API - Web APIs
webrtc (web real-time communication) is a technology which enables web applications and sites to capture and optionally stream audio and/or v
ideo media, as well as to exchange arbitrary data between browsers without requiring an intermediary.
... interoperability because implementations of webrtc are still evolving, and because each browser has different levels of support for codecs and webrtc features, you should strongly cons
ider making use of the adapter.js library prov
ided by google before you begin to write your code.
... webrtc concepts and usage webrtc serves multiple purposes; together with the media capture and streams api, they prov
ide powerful multimedia capabilities to the web, including support for audio and v
ideo conferencing, file exchange, screen sharing,
identity management, and interfacing with legacy telephone systems including support for sending dtmf (touch-tone dialing) signals.
...And 34 more matches
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div
id="container"> <div class="group section"> <div
id="preview" class="col span_12"> <div
id="subject"> <div
id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div
id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div
id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div
id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div
id="radi...
...us-ui-sl
iders"> <div
id="tlr" class="ui-input-sl
ider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div
id="tlw" class="ui-input-sl
ider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div
id="tlh" class="ui-input-sl
ider" data-topic="top-left-h" data-unit=" px" data-sensivity="2"></div> <div
id="trr" class="ui-input-sl
ider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div
id="trw" class="ui-input-sl
ider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div
id="trh" class...
...="ui-input-sl
ider" data-topic="top-right-h" data-unit=" px" data-sensivity="2"></div> <div
id="brr" class="ui-input-sl
ider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></div> <div
id="brw" class="ui-input-sl
ider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> <div
id="brh" class="ui-input-sl
ider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></div> <div
id="blr" class="ui-input-sl
ider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div
id="blw" class="ui-input-sl
ider" data-topic="bottom-left...
...And 34 more matches
Cascade and inheritance - 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 cascade and specificity, and how inheritance works in css.
...the h1 ends up being colored blue — these rules have an
identical selector and therefore carry the same specificity, so the last one in the source order wins.
... specificity specificity is how the browser dec
ides which rule applies if multiple rules have different selectors, but could still apply to the same element.
...And 33 more matches
Basic native form controls - Learn web development
next we will look at the functionality of the different form controls, or w
idgets, in detail — studying all the different options available to collect different types of data.
... objective: to understand in detail the original set of native form w
idgets available in browsers for collecting data, and how to implement them using html.
...this article covers: the common input types button, checkbox, file, h
idden, image, password, radio, reset, submit, and text.
...And 33 more matches
An overview of NSS Internals
it's free and open source software, and many other software projects have dec
ided to use it.
... in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which prov
ides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming.
...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 such modules as a plugin that prov
ides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
...And 33 more matches
Component; nsIPrefBranch
component: nsiprefbranch modules/libpref/public/nsiprefbranch.
idlscriptable this interface is used to manipulate the preferences data.
...for example, if this object is created with the root "browser.startup.", the preferences "browser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_overr
ide" can be accessed by simply passing "page", "homepage", or "homepage_overr
ide" to the various get/set methods.
... method overview vo
id addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); vo
id clearuserpref(in string aprefname); vo
id deletebranch(in string astartingat); boolean getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); vo
id getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); vo
id getcomplexvalue(in string aprefname, in nsi
idref atype, [i
id_is(atype), retval] out nsqiresult avalue); ...
...And 33 more matches
Drawing and Event Handling - Plugins
the content prov
ider who writes the web page determines its display mode: whether the plug-in is embedded, or displayed in its own separate page.
...a windowed plug-in is opaque, h
iding the part of the page beneath its display window.
... //the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { vo
id* window; /* platform-specific handle */ uint32 x; /* position of top-left corner */ uint32 y; /* relative to a netscape page */ uint32 w
idth; /* maximum window size */ uint32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix vo
id * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindow...
...And 33 more matches
XBL Example - Archive of obsolete content
a sl
ideshow element let's construct a full example of an xbl element.
... this will be a w
idget that stores a deck of objects, each displayed one at a time.
... navigation buttons along the bottom will allow the user to cycle through the objects while a text w
idget between the buttons will display the current page.
...And 22 more matches
Styling links - Learn web development
link states the first thing to understand is the concept of link states — different states that links can exist in, which can be styled using different pseudo-classes: link (unvisited): the default state that a link res
ides in, when it isn't in any other state.
...s on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the m
id-1990s.
...the outline is a useful accessibility a
id, so think carefully before turning it off; you should at least double up the styles given to the link hover state on the focus state too.
...And 22 more matches
NSS_3.12_release_notes.html
17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path val
idation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...both debug and optimized builds are prov
ided.
...d with nss3.12: utilrename.h new functions in the nss shared library: cert_checknamespace (see cert.h) cert_encodecertpoliciesextension (see cert.h) cert_encodeinfoaccessextension (see cert.h) cert_encodeinhibitanyextension (see cert.h) cert_encodenoticereference (see cert.h) cert_encodepolicyconstraintsextension (see cert.h) cert_encodepolicymappingextension (see cert.h) cert_encodesubjectkey
id (see certdb/cert.h) cert_encodeusernotice (see cert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_getu...
...And 22 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 prov
iders for cryptographic operations.
...a password is equivalent to a personal
identification number (pin).
... -default modulename specify the security mechanisms for which the named module will be a default prov
ider.
...And 22 more matches
JIT Optimization Strategies
prov
ide a repository of jit optimization strategy information which the jit coach tool can parse to display in its ui.
...prov
ide a user-browsable documentation of optimization strategies, how they work, how they are defeated, and options for how to re-enable them.
... sp
idermonkey's optimizing jit, ionmonkey, uses various strategies to optimize operations.
...And 22 more matches
nsIEditorIMESupport
editor/
idl/nsieditorimesupport.
idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview vo
id begincomposition(in nstexteventreplyptr areply); native code only!
... obsolete since gecko 2.0 vo
id endcomposition(); obsolete since gecko 2.0 vo
id forcecompositionend(); vo
id getpreferredimestate(out unsigned long astate); native code only!
...And 22 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.
...method overview vo
id batching(in boolean atogglemode); vo
id containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 vo
id containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 vo
id containerstatechanged(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); vo
id i...
...nval
idatecontainer(in nsinavhistorycontainerresultnode acontainernode); vo
id nodeannotationchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); vo
id nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); vo
id nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); vo
id nodeiconchanged(in nsinavhistoryresultnode anode); vo
id nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long anewindex); vo
id nodekeywordchanged(in nsinavhistoryresultnode anode, in autf8string anewkeyword); vo
id nodelastmodifiedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); vo
id nodemoved(in nsinavhistoryresultnode anode, in nsinavhistory...
...And 22 more matches
nsITreeView
layout/xul/base/src/tree/public/nsitreeview.
idlscriptable this interface is used by the tree w
idget to get information about what and how to display a tree w
idget.
... method overview boolean candrop(in long index, in long orientation, in ns
idomdatatransfer datatransfer); boolean candropbeforeafter(in long index, in boolean before); obsolete since gecko 1.8 boolean candropon(in long index); obsolete since gecko 1.8 vo
id cyclecell(in long row, in nsitreecolumn col); vo
id cycleheader(in nsitreecolumn col); vo
id drop(in long row, in long orientation, in ns
idomdatatransfer datatransfer); ...
...(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); vo
id performaction(in wstring action); vo
id performactiononcell(in wstring action, in long row, in nsitreecolumn col); vo
id performactiononrow(in wstring action, in long row); vo
id selectionchanged(); vo
id setcelltext(in long row, in nsitreecolumn col, in astring value); vo
id setcellvalue(in long row, in nsitreecolumn col, in astring value); vo
id ...
...And 22 more matches
nsIXPCScriptable
js/src/xpconnect/
idl/nsixpcscriptable.
idlnot scriptable please add a summary to this article.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview vo
id precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); vo
id create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); vo
id postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool addproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval
id, in jsvalptr vp); prbool delproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval
id, in jsvalptr vp); prbool getproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval
id...
..., in jsvalptr vp); prbool setproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval
id, in jsvalptr vp); prbool enumerate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool newenumerate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 enum_op, in jsvalptr statep, out js
id idp); prbool newresolve(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval
id, in pruint32 flags, out jsobjectptr objp); prbool convert(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 type, in jsvalptr vp); vo
id finalize(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool checkaccess(i...
...And 22 more matches
The HTML DOM API - Web APIs
management of media connected to the html media elements (<audio> and <v
ideo>).
... nodes may be strictly organizational, prov
iding a means for grouping other nodes together or for prov
iding a point at which a hierarchy can be constructed; other nodes may represent visible components of a document.
... each node is based on the node interface, which prov
ides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the dom.
...And 22 more matches
MediaDevices.getUserMedia() - Web APIs
that stream can include, for example, a v
ideo track (produced by either a hardware or virtual v
ideo source such as a camera, v
ideo recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, a/d converter, or the like), and possibly other track types.
... the constraints parameter is a mediastreamconstraints object with two members: v
ideo and audio, describing the media types requested.
... the following requests both audio and v
ideo without any specific requirements: { audio: true, v
ideo: true } if true is specified for a media type, the resulting stream is required to have that type of track in it.
...And 22 more matches
Using DTMF with WebRTC - Web APIs
in order to more fully support audio/v
ideo conferencing, webrtc supports sending dtmf to the remote peer on an rtcpeerconnection.
... this article offers a brief high-level overview of how dtmf works over webrtc, then prov
ides a gu
ide for everyday developers about how to send dtmf over an rtcpeerconnection.
...when you wish to transmit dtmf signals, you first need to dec
ide which track to send them on, since dtmf is sent as a series of out-of-band payloads on the rtcrtpsender responsible for transmitting that track's data to the other peer.
...And 22 more matches
Using Web Workers - Web APIs
this article prov
ides a detailed introduction to using web workers.
... note: see the web workers api landing page for reference documentation on workers and additional gu
ides.
... you can run whatever code you like ins
ide the worker thread, with some exceptions.
...And 22 more matches
Operable - Accessibility
this article prov
ides practical advice on how to write your web content so that it conforms to the success criteria outlined in the operable principle of the web content accessibility gu
idelines (wcag) 2.0 and 2.1.
... note: to read the w3c definitions for operable and its gu
idelines and success criteria, see principle 2: operable — user interface components and navigation must be operable.
... gu
ideline 2.1 — keyboard accessible: make all functionality available from a keyboard this gu
ideline covers the necessity of making core website functionality available via a keyboard in addition to other means (e.g.
...And 22 more matches
Text labels and names - Accessibility
examples the following example show a simple image map (taken from h24: prov
iding text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
... select an area for more information on that area." /> <map
id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
... see also <area> h24: prov
iding text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal dialog asking the user to make a choice or respond to an action being taken), give it a descriptive label or name, so that assistive technology users can easily discover what its purpose is.
...And 22 more matches
Introduction to cross browser testing - Learn web development
overview: cross browser testing next this article starts the module off by prov
iding an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing,
identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages.
... people with disabilities, who use the web with the a
id of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard).
... note: make the web work for everyone prov
ides more useful perspective on the different browsers people use, their market share, and related cross browser compatibility issues.
...And 21 more matches
Memory reporting
each reporter implements a collectreports function which takes a nsimemoryreportercallback argument; for each measurement the reporter must pass in several values, including: a path (which
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.
... see the nsimemoryreporter documentation and nsimemoryreporter.
idl for full details.
... making measurements nsimemoryreporter prov
ides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount".
...And 21 more matches
Profiling with the Firefox Profiler
it can be used in a variety of situations where external profilers are not available, and can prov
ide more information and insight into what the browser is doing.
... reporting a performance problem has a step-by-step gu
ide for obtaining a profile when requested by firefox developers.
...for very time-sensitive profiling, you may want to cons
ider a non-sampling profiler.
...And 21 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 prov
iders for cryptographic operations.
...a password is equivalent to a personal
identification number (pin).
... -default modulename specify the security mechanisms for which the named module will be a default prov
ider.
...And 21 more matches
Tracing JIT
the tracing jit in sp
idermonkey consists of a generic, low level component called nanojit which is co-maintained between adobe and mozilla, and a sp
idermonkey-specific high level component called jstracer.
... the nanojit component is language agnostic, and contains no knowledge about sp
idermonkey or any other part of the mozilla codebase.
...the monitor watches the executing sp
idermonkey interpreter.
...And 21 more matches
Property attributes
sp
idermonkey additionally defines several non-standard property attributes.
... mxr
id search for jsprop_enumerate jsprop_readonly the property's value cannot be set.
... mxr
id search for jsprop_readonly jsprop_permanent the property cannot be deleted.
...And 21 more matches
nsIAccessibleRole
accessible/public/nsiaccessiblerole.
idlscriptable this interface defines cross platform (gecko) roles.
... role_tooltip 13 represents a tooltip that prov
ides helpful hints.
...thus, panes represent a level of grouping lower than frame windows or documents, but above indiv
idual controls.
...And 21 more matches
nsIMsgIncomingServer
nsimsgincomingserver mailnews/base/public/nsimsgincomingserver.
idlscriptable ???
... inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview vo
id clearallvalues(); vo
id cleartemporaryreturnreceiptsfilter(); vo
id closecachedconnections(); vo
id configuretemporaryfilters(in nsimsgfilterlist filterlist); vo
id configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 vo
id displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); vo
id forgetpassword(); vo
id forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(in string...
... attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); vo
id getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); vo
id onuserorhostnamechanged(in acstring oldname, in acstring newname); vo
id performbiff(in nsimsgwindow amsgwind...
...And 21 more matches
nsINavHistoryResultViewer
toolkit/components/places/public/nsinavhistoryservice.
idlscriptable lets nsinavhistoryresult instances notify places views of changes in the results.
...try to avo
id using it.
... method overview vo
id containerclosed(in nsinavhistorycontainerresultnode acontainernode); vo
id containeropened(in nsinavhistorycontainerresultnode acontainernode); vo
id inval
idatecontainer(in nsinavhistorycontainerresultnode acontainernode); vo
id nodeannotationchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); vo
id nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); vo
id nodelastaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); vo
id nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccessc...
...And 21 more matches
nsISHEntry
docshell/shistory/public/nsishentry.
idlscriptable each document or subframe in session history will have a nsishentry associated with it which will hold all information required to recreate the document from history.
...to create an instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview vo
id addchildshell(in ns
idocshelltreeitem shell); ns
idocshelltreeitem childshellat(in long index); vo
id clearchildshells(); nsishentry clone(); vo
id create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshell
id, in boolean dynamiccreation); native code onl...
... nsdocshelleditordataptr forgeteditordata(); violates the xpcom interface gu
idelines nsicontentviewer getanycontentviewer(out nsishentry ownerentry); vo
id getscrollposition(out long x, out long y); vo
id getviewerbounds(in nsintrect bounds); native code only!
...And 21 more matches
BasicCardResponse - Web APIs
['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'], supportedtypes: ['credit', 'debit'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ {
id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
...} once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available ins
ide the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbasiccardresponsechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes availabl...
...And 21 more matches
HTMLImageElement.srcset - Web APIs
the htmlimageelement property srcset is a string which
identifies one or more image cand
idate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... each image cand
idate string contains an image url and an optional w
idth or pixel density descriptor that indicates the conditions under which that cand
idate should be used instead of the image specified by the src property.
... syntax htmlimageelement.srcset = imagecand
idatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image cand
idate strings to be used when determining which image resource to present ins
ide the <img> element represented by the htmlimageelement.
...And 21 more matches
HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, prov
iding the properties and methods used to manipulate image elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 21 more matches
Using the Media Capabilities API - Web APIs
the media capabilities api prov
ides several key features to help you better dec
ide how to handle media, but also to determine how well media is being handled, in real time.
... the mediacapabilities interface the mediacapabilities is available using the mediacapabilities property which is prov
ided by both the navigator object and the workernavigator object; in other words, the media capabilities api is available both on the main thread and from workers.
...you can, therefore, test for the presence of the api like so: if ("mediacapabilities" in navigator) { // mediacapabilities is available } else { // mediacapabilities is not available } taking v
ideo as an example, to obtain information about v
ideo decoding abilities, you create a v
ideo decoding configuration which you pass as a parameter to mediacapabilities.decodinginfo() method.
...And 21 more matches
Page Visibility API - Web APIs
the page visibility api prov
ides events you can watch for to know when a document becomes visible or h
idden, as well as features to look at the current visibility state of the page.
... notes: the page visibility api is especially useful for saving resources and improving performance by letting a page avo
id performing unnecessary tasks when the document isn't visible.
...for example, if your web app is playing a v
ideo, it can pause the v
ideo when the user puts the tab into the background, and resume playback when the user returns to the tab.
...And 21 more matches
IPDL Tutorial
the parent actor is typically the more permanent s
ide of the conversation: parent/child actors parent child ipc tabs chrome process content process ipc plugins content process plugin process each protocol is declared in a separate file.
...rent { public: pluginparent(const nscstring& pluginpath) { // launch child plugin process sendinit(pluginpath); } ~pluginparent() { sendshutdown(); } protected: bool recvready() { mobservers.notify("ready for action"); } }; here's how the ppluginchild might be used by a c++ implementor in the plugin process: class pluginchild : public ppluginchild { protected: vo
id recvinit(const nscstring& pluginpath) { mpluginlibrary = pr_loadlibrary(pluginpath.get()); sendready(); } vo
id recvshutdown() { pr_unloadlibrary(mpluginlibrary); } private: prlibrary* mpluginlibrary; }; launching the subprocess and hooking these protocol actors into our ipc "transport layer" is beyond the scope of this document.
... // pdirection.ipdl async protocol pdirection { child: async foo(); // can be sent from-parent-to-child parent: async bar(); // can be sent from-child-to-parent both: async baz(); // can be sent both ways }; // pdirectionparent.h class pdirectionparent { protected: virtual vo
id recvbar() = 0; virtual vo
id recvbaz() = 0; public: vo
id sendfoo() { /* boilerplate */ } vo
id sendbaz() { /* boilerplate */ } }; // pdirectionchild.h class pdirectionchild { protected: virtual vo
id recvfoo() = 0; virtual vo
id recvbaz() = 0; public: vo
id sendbar() { /* boilerplate */ } vo
id sendbaz() { /* boilerplate */ } }; you can use the child, parent, and both labels multipl...
...And 19 more matches
DMD
const cc = components.classes; let mydumper = cc["@mozilla.org/memory-info-dumper;1"] .getservice(ci.nsimemoryinfodumper); mydumper.dumpmemoryinfototempdir(
identifier, anonymize, minimize); this will dump memory reports and dmd output to the temporary directory.
...
identifier is a string that will be used for part of the filename (or a timestamp will be used if it is an empty string); anonymize is a boolean that indicates if the memory reports should be anonymized; and minimize is a boolean that indicates if memory usage should be minimized first.
...it's always in a temp directory, and the filenames are always of the form dmd-<p
id>.
...And 19 more matches
How to embed the JavaScript engine
see also jsapi user gu
ide.
... a bare bones tutorial hello world sample embedding application the following code is a very simple application that shows how to embed sp
idermonkey and run a simple javascript script.
... the code differs for each sp
idermonkey version, please choose right version for your sp
idermonkey.
...And 19 more matches
Using the Places annotation service
the annotation service, prov
ided by the nsiannotationservice interface, is designed to store arbitrary data about a web page or about an item in the places database in firefox 3.
... most methods in the service are duplicated with one method labeled as a 'page annotation' taking an nsiuri and the others labeled as an 'item annotation' and taking the
id of an item in the places database.
...uri's are easier to use for services that want to annotate a web page loaded in the browser, while
id's are easier to use for services already working with the places database.
...And 19 more matches
nsDependentString
this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference val
id memory for the duration of its use.
... method overview constructors assertval
id rebind operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsstring data members no public members.
...And 19 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 prov
ide better api than ns
idomwindowutils to dispatch key events and create, modify, and commit composition in higher level.
... ns
idomwindowutils has prov
ided the methods which dispatched keyboard events and composition events almost directly.
... method overview vo
id appendclausetopendingcomposition(in unsigned long alength, in unsigned long aattribute); boolean begininputtransaction(in ns
idomwindow awindow, in nsitextinputprocessorcallback acallback); boolean begininputtransactionfortests(in ns
idomwindow awindow, [optional] in nsitextinputprocessorcallback acallback); vo
id cancelcomposition([optional] in ns
idomkeyevent adomkeyevent...
...And 19 more matches
Examine and edit CSS - Firefox Developer Tools
a warning icon appears next to unsupported css properties or rules that have inval
id values.
...in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule inval
id: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
... overr
idden declaration: declarations that are overr
idden by later rules are crossed out.
...And 19 more matches
Basic animations - Web APIs
the requestanimationframe method prov
ides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame.
...for more information about the animation loop, especially for games, see the article anatomy of a v
ideo game in our game development zone.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementby
id('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds(...
...And 19 more matches
HTMLSelectElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><po...
...lyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,...
...andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="...
...And 19 more matches
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <v
ideo>) as the source of the mediastream to be recorded.
... html content <p>click the "start" button to begin v
ideo recording for a few seconds.
... you can stop the v
ideo by clicking the creatively-named "stop" button.
...And 19 more matches
Pointer events - Web APIs
having a single event model for pointers can simplify creating web sites and applications and prov
ide a good user experience regardless of the user's hardware.
...a pointer is cons
idered active if it can still produce further events.
... for example, a pen that is a down state is cons
idered active because it can produce additional events when the pen is lifted or moved.
...And 19 more matches
RTCStatsReport - Web APIs
the rtcstatsreport interface prov
ides a statistics report obtained by calling one of the rtcpeerconnection.getstats(), rtcrtpreceiver.getstats(), and rtcrtpsender.getstats() methods.
... the statistics objects for each category of statistic information, there is a dictionary whose properties prov
ide the relevant information.
... properties common to all statistic categories all webrtc statistics objects are fundamentally based on the rtcstats dictionary, which prov
ides the most fundamental information: the timestamp, the statistic type string, and an
id uniquely
identifying the source of the data:
id a domstring which uniquely
identifies the object which was inspected to produce this object based on rtcstats.
...And 19 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
this will help to sol
idify your understanding of how the geometry of 3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work together.
... while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a 3d headset is a single screen, div
ided in half.
... setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific information: let polyfill = null; let xrsession = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequest
id = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene.
...And 19 more matches
Rendering and the WebXR frame animation callback - Web APIs
once your webxr environment has been set up and an xrsession created to represent an ongoing xr environment session, you need to prov
ide frames of the scene to the xr device for rendering.
... kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrig
idtransform(viewerstartposition, viewerstartorientation)); animationframerequest
id = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrig
idtransform representing that position and orientation, then calling the xrreferencespa...
... then the first animation frame is scheduled by calling the xrsession method requestanimationframe(), prov
iding a callback function, mydrawframe(), whose job is to render the frame.
...And 19 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
understaning color, luminance, and saturation is important in meeting wcag 2 accessibility gu
idelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.
... for digital concerns, much of the technology has historically res
ided in the rgb color space.
... this is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the rgb color space still predominates, and this includes v
ideo production.
...And 19 more matches
nsAdoptingCString
class declaration nstadoptingstring extends nstxp
idlstring such that: (1) adopt given string on construction or assignment, i.e.
...method overview constructors operator= operator const char* operator[] get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat first last countchar findchar equals equalsascii ...
...seequalsascii 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 setisvo
id stripchar base classes nsxp
idlcstring data members no public members.
...And 18 more matches
nsAdoptingString
class declaration nstadoptingstring extends nstxp
idlstring such that: (1) adopt given string on construction or assignment, i.e.
...method overview constructors operator= operator const prunichar* operator[] get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat first last countchar findchar equals equalsascii equals...
...seequalsascii 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 setisvo
id stripchar base classes nsxp
idlstring data members no public members.
...And 18 more matches
nsAutoString
it is normally not a good
idea to use this class on the heap, because it will allocate space which may be wasted if the string it contains is significantly smaller or any larger than 64 characters.
... names: nsautostring for w
ide characters nscautostring for narrow characters method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(...
...const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvo
id stripchar base classes nsfixedstring data members no public members.
...And 18 more matches
nsCAutoString
it is normally not a good
idea to use this class on the heap, because it will allocate space which may be wasted if the string it contains is significantly smaller or any larger than 64 characters.
... names: nsautostring for w
ide characters nscautostring for narrow characters method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated chara...
... assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvo
id stripchar base classes nsfixedcstring data members no public members.
...And 18 more matches
nsCString
names: nsstring for w
ide 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 rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsacstring_internal data members no public members.
...And 18 more matches
nsString
names: nsstring for w
ide 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 rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsastring_internal data members no public members.
...And 18 more matches
IAccessibleEditableText
other-licenses/ia2/accessibleeditabletext.
idlnot scriptable this interface prov
ides clipboard capability to text objects.
...the val
id range is 0..length.
...the val
id range is 0..length.
...And 18 more matches
nsIBrowserSearchService
netwerk/base/public/nsibrowsersearchservice.
idlscriptable please add a summary to this article.
... method overview vo
id addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); vo
id addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); vo
id getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_...
...is(enginecount)] out nsisearchengine engines); nsisearchengine getenginebyalias(in astring alias); nsisearchengine getenginebyname(in astring aenginename); vo
id getengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); vo
id getvisibleengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); vo
id init([optional] in nsibrowsersearchinitobserver observer); vo
id moveengine(in nsisearchengine engine, in long newindex); vo
id removeengine(in nsisearchengine engine); vo
id restoredefaultengines(); attributes attribute type ...
...And 18 more matches
nsIMsgDBHdr
method overview astring getproperty(in string propertyname); vo
id setproperty(in string propertyname, in astring propertystr); vo
id setstringproperty(in string propertyname, in string propertyvalue); string getstringproperty(in string propertyname); unsigned long getuint32property(in string propertyname); vo
id setuint32property(in string propertyname, in unsigned long propertyval); vo
id markread(in boolean read); ...
... vo
id markflagged(in boolean flagged); vo
id markhasattachments(in boolean hasattachments); vo
id setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); vo
id setreferences(in string references); acstring getstringreference(in long refnum); vo
id setrecipientsarray(in string names, in string addresses,in unsigned long numaddresses); vo
id setcclistarray(in string names, in string addresses,in unsigned long numaddresses); vo
id setbcclistarray(in string names, in string addresses,in unsigned long numaddresses);new in thunderbird 3.1 [noscript] vo
id getauthorcollationkey(out octetptr key, out unsigned long len); [noscri...
...pt] vo
id getsubjectcollationkey(out octetptr key, out unsigned long len); [noscript] vo
id getrecipientscollationkey(out octetptr key, out unsigned long len); attributes attribute type description isread boolean readonly: indicates whether or not the message is read.
...And 18 more matches
nsINavHistoryService
toolkit/components/places/nsinavhistoryservice.
idlscriptable this interface prov
ides complex query functions, more fine-grained getters and setters.
...to use this service, use: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); vo
id markpageasfollowedbookmark(in nsiuri auri); vo
id markpageasfollowedlink(in nsiuri auri); vo
id markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asession
id); obsolete since gecko 22.0 nsinavhistor...
...yquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(in nsinavhistoryquery aquery, in nsinavhistoryqueryoptions options); nsinavhistoryresult executequeries([array,size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); vo
id querystringtoqueries(in autf8string aquerystring, [array, size_is(aresultcount)] out nsinavhistoryquery aqueries, out unsigned long aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); vo
id addobserver(in nsinavhistoryobserver observer, in b...
...And 18 more matches
Plug-in Development Overview - Plugins
« previousnext » writing plug-ins once you dec
ide what you want your plug-in to do, creating it is a simple process.
... plan your plug-in: dec
ide on the services you want the plug-in software to prov
ide and how it will interact with the browser and the special media for which the plug-in is created.
... dec
ide the mime type for the plug-in (see registering plug-ins).
...And 18 more matches
Using the CSS Painting API - Web APIs
here we have prov
ided one argument: the rendering context (we'll look at more in due course), often refered to by the variable name ctx.
...the fillrect() parameters are, in order, x-axis origin, y-axis origin, w
idth, and height.
... fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units w
ide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box.
...And 18 more matches
Transformations - Web APIs
« previousnext » earlier in this tutorial we've learned about the canvas gr
id and the coordinate space.
... until now, we only used the default gr
id and changed the size of the overall canvas for our needs.
... with transformations there are more powerful ways to translate the origin to a different position, rotate the gr
id and even scale it.
...And 18 more matches
Using images - Web APIs
it is also possible to use images by prov
iding a url.
... htmlv
ideoelement using an html <v
ideo> element as your image source grabs the current frame from the v
ideo and uses it as an image.
... using images from the same page we can obtain a reference to images on the same page as the canvas by using one of: the document.images collection the document.getelementsbytagname() method if you know the
id of the specific image you wish to use, you can use document.getelementby
id() to retrieve that specific image using images from other domains using the crossorigin attribute of an <img> element (reflected by the htmlimageelement.crossorigin property), you can request permission to load an image from another domain for use in your call to drawimage().
...And 18 more matches
RTCPeerConnection.createOffer() - Web APIs
the sdp offer includes information about any mediastreamtracks already attached to the webrtc session, codec, and options supported by the browser, and any cand
idates already gathered by the ice agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.
... syntax apromise = mypeerconnection.createoffer([options]); mypeerconnection.createoffer(successcallback, failurecallback, [options]) parameters options optional an rtcofferoptions dictionary prov
iding options requested for the offer.
...if this value is false, the remote peer will not be offered to send audio data, even if the local s
ide will be sending audio data.
...And 18 more matches
Touch events - Web APIs
to prov
ide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.
... create a canvas <canvas
id="canvas" w
idth="600" height="600" style="border:sol
id black 1px;"> your browser does not support canvas element.
... </canvas> <br> log: <pre
id="log" style="border: 1px sol
id #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below will be called.
...And 18 more matches
ARIA: dialog role - Accessibility
dialogs can be either non-modal (it's still possible to interact with content outs
ide of the dialog) or modal (only the content in the dialog can be interacted with).
... <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2
id="dialog1title">your personal details were successfully updated</h2> <p
id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology
identify the dialog's content as being grouped and separated from the rest of the page content.
...the label given to the dialog will prov
ide contextual information for the interactive controls ins
ide the dialog.
...And 18 more matches
Alerts - Accessibility
examples of common problems include e-mail addresses which are not val
id, or a name field which does not contain at least a first name or a surname.
... here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name"
id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email"
id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website"
id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message"
id="message" rows="5" cols="80" aria-required="true"></t...
...extarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for val
idity and notifying the user form val
idations consists of several steps: checking if the e-mail address or entered name are val
id.
...And 18 more matches
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
in this gu
ide i will explain how this works, what it is designed for and what situations really require css gr
id layout rather than flexbox.
...this means that if you have a set of flex items that are too w
ide for their container, they will overflow it.
... if you want to cause them to wrap once they become too w
ide you must add the flex-wrap property with a value of wrap, or use the shorthand flex-flow with values of row wrap or column wrap.
...And 18 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
if the image has an intrinsic ratio (that is, its w
idth:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
... in each case, we show what the source image looks like rendered in a 150x150 box, and prov
ide a link to the svg source.
... svg source one specified dimension and proportionless this image specifies a w
idth of 100 pixels but no height or intrinsic ratio.
...And 18 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
the html details element (<details>) creates a disclosure w
idget in which information is visible only when the w
idget is toggled into an "open" state.
... a summary or label can be prov
ided using the <summary> element.
... a disclosure w
idget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle.
...And 18 more matches
Global attributes - HTML: Hypertext Markup Language
for example, html5-compliant browsers h
ide content marked as <foo h
idden>...</foo>, even though <foo> is not a val
id html element.
... the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninval
id, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiti...
... list of global attributes accesskey prov
ides a hint for generating a keyboard shortcut for the current element.
...And 18 more matches
Closures - JavaScript
lexical scoping cons
ider the following example code: function init() { var name = 'mozilla'; // name is a local variable created by init function displayname() { // displayname() is the inner function, a closure alert(name); // use variable declared in the parent function } displayname(); } init(); init() creates a local variable called name and a function called displayname().
... the displayname() function is an inner function that is defined ins
ide init() and is available only within the body of the init() function.
... run the code using this jsf
iddle link and notice that the alert() statement within the displayname() function successfully displays the value of the name variable, which is declared in its parent function.
...And 18 more matches
Grammar and types - JavaScript
(for more information, see the detailed reference about javascript's lexical grammar.) it is cons
idered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed.
...(spaces, tabs, and newline characters are cons
idered whitespace.) comments the syntax of comments is the same as in c++ and in many other languages: // a one line comment /* this is a longer, * multi-line comment */ /* you can't, however, /* nest comments */ syntaxerror */ comments behave like whitespace, and are discarded during script execution.
...the names of variables, called
identifiers, conform to certain rules.
...And 18 more matches
Introduction - JavaScript
what you should already know this gu
ide assumes you have the following basic background: a general understanding of the internet and the world w
ide web (www).
... where to find javascript information the javascript documentation on mdn includes the following: learn web development prov
ides information for beginners and introduces basic concepts of programming and the internet.
... javascript gu
ide (this gu
ide) prov
ides an overview about the javascript language and its objects.
...And 18 more matches
dominant-baseline - SVG: Scalable Vector Graphics
a scaled-baseline-table is a compound value with three components: a baseline-
identifier for the dominant-baseline, a baseline-table, and a baseline-table font-size.
... <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="m
iddle" x="30" y="50">m
iddle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic |
ideographic | m
iddle | central | mathematical | hanging | text-top default value auto animatable yes auto if this property occurs on a <text> element, then the computed value depends on th...
...
ideographic the baseline-
identifier for the dominant-baseline is set to be
ideographic, the derived baseline-table is constructed using the
ideographic baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element.
...And 18 more matches
Table Layout Strategy - Archive of obsolete content
the overload of the initialize and balancecolumnw
idths routines depends on the table style and is dec
ided at runtime.
... on the first reflow nstableframe::balancecolumnw
idths is called.
... ins
ide this routine the corresponding table layout strategy is created and initialized (basictablelayoutstrategy::initialize).
...And 17 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
this article presents a gu
ideline for improving the plugin installation experience for netscape gecko browsers using xpinstall.
...for those familiar with netscape communicator 4.x's smartupdate technology, this will be a familiar
idea.
...often, the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" w
idth="50" height="50" pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine.
...And 17 more matches
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementby
id('editmenu').open = true;"/> <menu
id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
... as with other ways of opening a menu, the popupshowing event will be fired to prov
ide an opportunity to customize the commands that appear on the menu.
...a user may also cancel selecting from a menu by clicking outs
ide the menu.
...And 17 more matches
toolbarbutton - Archive of obsolete content
relevant accessbility gu
idelines all toolbar functionality should be duplicated elsewhere in the application where possible, prov
ide keyboard alternatives.
... attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, val
idate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar
id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem...
... label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> </toolbar> <toolbar
id="radio-toolbar"> <toolbarbutton accesskey="1" label="radio 1" type="radio" group="radiogroup"/> <toolbarbutton accesskey="2" label="radio 2" type="radio" group="radiogroup"/> <toolbarbutton accesskey="3" label="radio 3" type="radio" group="radiogroup"/> </toolbar> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...And 17 more matches
How to build an XPCOM component in JavaScript
if an interface exists that meets your needs, then you do not need to write an
idl, or compile a typelib, and may skip to the next section.
...xpcom uses a dialect of
idl to define interfaces, called xp
idl.
... here's the xp
idl definition for our helloworld component: helloworld.
idl #include "nsisupports.
idl" [scriptable, uu
id(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsihelloworld : nsisupports { string hello(); }; note that you must generate a new uu
id for each xpcom component that you create.
...And 17 more matches
NS_ConvertASCIItoUTF16
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsautostring data members no public members.
... methods constructors vo
id ns_convertasciitoutf16(const char*) - source parameters char* acstring vo
id ns_convertasciitoutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength vo
id ns_convertasciitoutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_intern...
...And 17 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 rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nscautostring data members no public members.
... methods constructors vo
id ns_convertutf16toutf8(const prunichar*) - source a helper class that converts a utf-16 string to utf-8 parameters prunichar* astring vo
id ns_convertutf16toutf8(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength vo
id 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 17 more matches
NS_ConvertUTF8toUTF16
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsautostring data members no public members.
... methods constructors vo
id ns_convertutf8toutf16(const char*) - source parameters char* acstring vo
id ns_convertutf8toutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength vo
id ns_convertutf8toutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal&...
...And 17 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 rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nscautostring data members no public members.
... methods constructors vo
id ns_lossyconvertutf16toascii(const prunichar*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters prunichar* astring vo
id ns_lossyconvertutf16toascii(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength vo
id 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 17 more matches
nsFixedCString
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(...
...char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvo
id stripchar base classes nscstring data members no public members.
... methods constructors vo
id 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 vo
id 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 17 more matches
nsFixedString
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsstring data members no public members.
... methods constructors vo
id nsfixedstring(prunichar*, 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 prunichar* data pruint32 storagesize vo
id nsfixedstring(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32 storagesize pruint32 length operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const ...
...And 17 more matches
nsPromiseFlatCString
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(...
...char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvo
id stripchar base classes nscstring data members no public members.
... methods constructors vo
id nspromiseflatcstring(const nsacstring_internal&) - source parameters nsacstring_internal& str vo
id 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 17 more matches
nsPromiseFlatString
class declaration method overview constructors operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger m
id left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar 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 setisvo
id stripchar base classes nsstring data members no public members.
... methods constructors vo
id nspromiseflatstring(const nsastring_internal&) - source parameters nsastring_internal& str vo
id nspromiseflatstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple get prunichar* get() const - source returns the null-terminated string find print32 find(...
...And 17 more matches
IAccessible2
other-licenses/ia2/accessible2.
idlnot scriptable please add a summary to this article.
...ong maxrelations, [out, size_is(maxrelations), length_is( nrelations)] iaccessiblerelation relations, [out] long nrelations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult states([out] accessiblestates states ); [propget] hresult unique
id([out] long unique
id ); [propget] hresult windowhandle([out] hwnd windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's formula.
...refer to @ref _arraycons
ideration "special cons
ideration when using arrays" for more details.
...And 17 more matches
mozIStorageConnection
storage/public/mozistorageconnection.
idlscriptable this interface represents a database connection attached to a specific file or an in-memory database.
... method overview vo
id asyncclose([optional] in mozistoragecompletioncallback acallback); vo
id begintransaction(); vo
id begintransactionas(in print32 transactiontype); mozistoragestatement clone([optional] in boolean areadonly); vo
id close(); vo
id committransaction(); vo
id createaggregatefunction(in autf8string afunctionname, in long anumarguments, in mozistorage...
...aggregatefunction afunction); mozistorageasyncstatement createasyncstatement(in autf8string asqlstatement); vo
id createfunction(in autf8string afunctionname, in long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); vo
id createtable(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); vo
id executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); vo
id preload(); obsolete since gecko 1.9 vo
id removefunction(in a...
...And 17 more matches
nsIAccessibleText
accessible/public/nsiaccessibletext.
idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview vo
id addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); vo
id getcharacterextents(in long offset, out long x, out long y, out long w
idth, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); vo
id getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long w
idth, out long height, in unsigned long coordtype); vo
id getselectionbounds(in long selectionnum, out long startoffset, out long endoffs...
...tring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); vo
id removeselection(in long selectionnum); vo
id scrollsubstringto(in long startindex, in long endindex, in unsigned long scrolltype); vo
id scrollsubstringtopoint(in long startindex, in long endindex, in unsigned long coordinatetype, in long x, in long y); vo
id setselectionbounds(in long selectionnum, in long startoffset, in long endoffset); attributes attribute type description careto...
...And 17 more matches
nsIEditorSpellCheck
editor/
idl/nsieditorspellcheck.
idlnot scriptable prov
ides spell checking commands for nsieditor instances.
...to create an instance, use: var editorspellcheck = components.classes["@mozilla.org/editor/editorspellchecker;1"] .createinstance(components.interfaces.nsieditorspellcheck); method overview vo
id addwordtodictionary(in wstring word); boolean canspellcheck(); vo
id checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); vo
id getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring ge...
...tnextmisspelledword(); vo
id getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); vo
id ignorewordalloccurrences(in wstring word); vo
id initspellchecker(in nsieditor editor, in boolean enableselectionchecking); vo
id removewordfromdictionary(in wstring word); vo
id replaceword(in wstring misspelledword, in wstring replaceword, in boolean alloccurrences); vo
id savedefaultdictionary(); obsolete since gecko 9.0 vo
id setcurrentdictionary(in astring dictionary); vo
id setfilter(in nsitextservicesfilter filter); vo
id uninitspellchecker(); vo
id updatecurrentdictionary(); methods addwordtodictionary() adds the specified word to the current personal dictio...
...And 17 more matches
nsIHttpServer
== 2 && "function" == typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(':'); port = parseint(port); server.
identity.add('http', host, port); } server.wrappedjsobject._start(port, host); return true; }, registerfile: function(path, filepath) { var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(filepath); return s...
... server.registerprefixhandler(prefix, function (request, response) { var req = createhttprequest(request); var resp = new httpresponse(response); handlercallback(req, resp); }); }, close: function(){ server.stop(function(){}); }, get port() { return server.
identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.
idl [scriptable, uu
id(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
... * 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 * behavior is undefined if this method is called after stop() has been * called on this but before the prov
ided callback function has been * called.
...And 17 more matches
nsISmsDatabaseService
nsismsdatabaseservice dom/sms/interfaces/nsismsdatabaseservice.
idlscriptable used to store and manage sms text messages for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsdatabaseservice;1.
... create an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsdatabaseservice;1"] .createinstance(components.interfaces.nsismsdatabaseservice); method overview long savereceivedmessage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); vo
id getmessage(in long message
id, in long request
id, [optional] in unsigned long long process
id); vo
id deletemessage(in long message
id, in long request
id, [optional] in unsigned long long process
id); vo
id createmessagelist(in ns
idommozsmsfilter filter, in boolean reverse, in long request
id, [optional] in unsigned long long process
id); vo
id getnextmessageinlist(in long list
id, in long request
id,...
... [optional] in unsigned long long process
id); vo
id clearmessagelist(in long list
id); vo
id markmessageread(in long message
id, in boolean value, in long request
id, [optional] in unsigned long long process
id) methods savereceivedmessage() vo
id savereceivedmessage( in domstring asender, in domstring abody, in unsigned long long adate ); parameters asender a domstring with the sender of the text message.
...And 17 more matches
nsISmsRequestManager
nsismsrequestmanager dom/sms/interfaces/nsismsrequestmanager.
idlscriptable used to manage sms related requests and notifications for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsrequestmanager;1.
... to create an instance, use: var smsrequestmanager = components.classes["@mozilla.org/sms/smsrequestmanager;1"] .createinstance(components.interfaces.nsismsrequestmanager); method overview long addrequest(in ns
idommozsmsrequest arequest); long createrequest(in ns
idommozsmsmanager amanager, out ns
idommozsmsrequest arequest); vo
id notifycreatemessagelist(in long arequest
id, in long alist
id, in ns
idommozsmsmessage amessage); vo
id notifygetsmsfailed(in long arequest
id, in long aerror); vo
id notifygotnextmessage(in long arequest
id, in ns
idommozsmsmessage amessage); vo
id notifygotsms(in long arequest
id, in ns
idommozsmsmessage amessage); vo
id notifymarkedmessageread(in long arequest
id, in bool aread); vo
id notifymarkmessagereadfailed(in long arequest
id, in ...
...long aerror); vo
id notifynomessageinlist(in long arequest
id); vo
id notifyreadmessagelistfailed(in long arequest
id, in long aerror); vo
id notifysmsdeleted(in long arequest
id, in bool adeleted); vo
id notifysmsdeletefailed(in long arequest
id, in long aerror); vo
id notifysmssendfailed(in long arequest
id, in long aerror); vo
id notifysmssent(in long arequest
id, in ns
idommozsmsmessage amessage); constants all sms related errors that could apply to smsrequest objects.
...And 17 more matches
nsIWindowsRegKey
xpcom/ds/nsiwindowsregkey.
idlscriptable this interface is designed to prov
ide scriptable access to the windows registry system.
...method overview vo
id close(); vo
id create(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey createchild(in astring relpath, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); vo
id open(in unsig...
...ned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); vo
id removechild(in astring relpath); vo
id removevalue(in astring name); vo
id startwatching(in boolean recurse); vo
id stopwatching(); vo
id writebinaryvalue(in astring name, in acstring data); vo
id writeint64value(in astring name, in unsigned long long data); vo
id writeintvalue(in astring name, in unsigned long data); vo
id writestringvalue(in astring name, in astring d...
...And 17 more matches
Reference Manual
if you've never use nscomptrs before, you might want to read the getting started gu
ide first.
...like nsisupports* (or even vo
id*), people generally use nscomptr<nsisupports> to mean "any xpcom interface." it would be annoying if nscomptr forced you to queryinterface to the xpcom-correct nsisupports within an object in places where you don't care to know the exact type.
... null-dereference safeguards an nscomptr will also assert at runtime if you try to dereference it when it is vo
id, e.g., nscomptr<nsifoo> foo; // note: default initialized to |0| foo->dosomething(); // ns_precondition: "you can't dereference a null nscomptr with operator->()" a similar precondition intervenes on behalf of operator*.
...And 17 more matches
XPCOM
interfaces in xpcom are defined in a dialect of
idl called xp
idl.
... xpcom itself prov
ides a set of core components and classes, e.g.
...the majority of xpcom components are not part of this core set and are prov
ided by other parts of the platform (e.g.
...And 17 more matches
Using COM from js-ctypes
for communication between the different windows applications among themselves, microsoft has developed a series of technologies alongs
ide the main windows api.
... #include <sapi.h> int main(vo
id) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(cls
id_spvoice, null, clsctx_all, i
id_ispvoice, (vo
id**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->release(); } } // msdn documentatio...
... #include <sapi.h> int main(vo
id) { if (succeeded(coinitialize(null))) { struct ispvoice* pvoice = null; hresult hr = cocreateinstance(&cls
id_spvoice, null, clsctx_all, &i
id_ispvoice, (vo
id**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->release(pvoice); } ...
...And 17 more matches
about:debugging - Firefox Developer Tools
the about:debugging page prov
ides a single place from which you can attach the firefox developer tools to a number of debugging targets.
... when about:debugging opens, on the left-hand s
ide, you'll see a s
idebar with two options and information about your remote debugging setup: setup use the setup tab to configure the connection to your remote device.
... this firefox prov
ides information about temporary extensions you have loaded for debugging, extensions that are installed in firefox, the tabs that you currently have open, and service workers running on firefox.
...And 17 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
in fact, much of our source code is full of these whitespace characters, and we only tend to get r
id 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 outs
ide elements is ignored.
... </h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and ins
ide the <h1> element, but the browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters d
idn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
...And 17 more matches
HTMLFormElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget...
...</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="co...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 17 more matches
MediaMetadata - Web APIs
the mediametadata interface of the the media session api prov
ides allows a web page to prov
ide rich media metadata for display in a platform ui.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetmediametadata experimentalchrome full support 57edge no support nofirefox full support 71ie no support noopera fu...
... webview andro
id no support nochrome andro
id full support 57firefox andro
id ?
...And 17 more matches
PhotoCapabilities - Web APIs
the photocapabilities interface of the the mediastream image capture api prov
ides available configuration options for an attached photographic device.
... photocapabilities.imagew
idth read only returns a mediasettingsrange object indicating the image w
idth range supported by the user agent.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({v
ideo: true}) .then(mediastream => { document.queryselector('v
ideo').srcobject = mediastream; const track = mediastream.getv
ideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagew
idth.min; input.max = photocapabilities.im...
...And 17 more matches
RTCStatsType - Web APIs
values cand
idate-pair an rtcicecand
idatepairstats object prov
iding statistics related to an rtcicetransport.
... cand
idate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart.
... the active cand
idate pair is deleted after the transport switches to another cand
idate pair; this change cannot be detected otherwise.
...And 17 more matches
Lighting a WebXR setting - Web APIs
this gu
ide discusses these topics.
... and while this article prov
ides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a gu
ide to how to create a properly-lit 3d scene.
... flashback: simulating lighting in 3d although this article isn't a comprehensive gu
ide to lighting a 3d scene, it's useful to prov
ide a brief reminder as to how lighting works in general.
...And 17 more matches
Example and tutorial: Simple synth keyboard - Web APIs
this article presents the code and working demo of a v
ideo keyboard you can play using the mouse.
... the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume sl
ider beneath the keyboard.
... the v
ideo keyboard html there are three primary components to the display for our virtual keyboard.
...And 17 more matches
ARIA annotations - Accessibility
wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations ins
ide web documents.
... aria annotations features the aria attributes prov
iding these new abilities are as follows: aria-description="" — prov
ides a detailed description of an html element, as opposed to the brief label prov
ided by aria-label.
... to prov
ide a semantic association between the document content being annotated and the annotation, an aria-details attribute can be set on the annotated content that contains the
id of the annotated element.
...And 17 more matches
Block and inline layout in normal flow - CSS: Cascading Style Sheets
in this gu
ide, we will explore the basics of how block and inline elements behave when they are part of the normal flow.
...for elements with a block formatting context, the spec says: “in a block formatting context, boxes are la
id out one after the other, vertically, beginning at the top of a containing block.
... in a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1 for elements with an inline formatting context: “in an inline formatting context, boxes are la
id out horizontally, one after the other, beginning at the top of a containing block.
...And 17 more matches
NSS tools : signtool
digital signatures allow ssl-enabled clients to perform two important operations: * confirm the
identity of the indiv
idual, company, or other entity whose digital signature is associated with the files * check whether the files have been tampered with since being signed if you have a signing certificate, you can use netscape signing tool to digitally sign files and package them as a jar file.
... an indiv
idual file can potentially be signed with multiple digital signatures.
...once you have signed a file, it is difficult to claim later that you d
idn't sign it.
...And 15 more matches
mozIRegistry
it's not really about any "registry interface" so much as it's about how mozilla supports a more dynamic binding between interface clients and the code that actually prov
ides the implementation of those interfaces.
...clients requiring dynamic "binding" of cls
ids will be required to use some higher-level services (tbd) to figure out the cls
ids they should use.
...we are proposing a new "moziregistry" xpcom interface that prov
ides the same level of function as is currently prov
ided by the "netscape registry" implemented in libreg.
...And 15 more matches
nsIAppShell
w
idget/public/nsiappshell.
idlnot scriptable interface for the native event system layer.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview vo
id create(inout int argc, inout string argv); obsolete since gecko 1.9 vo
id dispatchnativeevent(in prbool arealevent, in vo
idptr aevent); obsolete since gecko 1.9 vo
id exit(); vo
id favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); vo
id getnativeevent(in prboolref arealevent, in vo
idptrref aevent); obsolete since gecko 1.9 vo
id listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 vo
id resumenative(); vo
id run(); vo
id runinstablestate(in nsirunnable arunnable); vo
id spindown(); obsolete since gecko 1...
....9 vo
id spinup(); obsolete since gecko 1.9 vo
id suspendnative(); attributes attribute type description eventloopnestinglevel unsigned long the current event loop nesting level.
...And 15 more matches
nsIFrameLoader
content/base/public/nsiframeloader.
idlscriptable handles loading a frame.
... method overview vo
id activateframeevent(in astring atype, in boolean capture); vo
id activateremoteframe(); vo
id destroy(); vo
id loadframe(); vo
id loaduri(in nsiuri auri); vo
id sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); vo
id sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in ...
...long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); vo
id updatepositionandsize(in nsiframe aiframe); native code only!
...And 15 more matches
Working with Multiple Versions of Interfaces
in the extension that prompted this note, i needed to obtain the hwnd of the document (yes its on windows) in order to
identify each particular extension instance.
... to do this i used the accessibility framework: hwnd gethwnd(ns
idomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6.
... nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } vo
id *wh = null; nscomptr<nsiaccessibledocument> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5.
...And 15 more matches
XUL Overlays
overlays prov
ide a general mechanism for: adding ui for additional components, as described in the example above overr
iding 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.
...when plug-ins, browser extensions, or other applications prov
ide new ui elements to the browser, these elements should be defined in overlay files.
...le or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton
id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and
id attributes bases and overlays are merged when they share the same
id attribute.
...And 15 more matches
Working with windows in chrome code
technically speaking, it implements a number of interfaces, including ns
idomjswindow and ns
idomwindow, but it also contains the user-defined properties for global variables and functions of the window.
... note however, that the open() call returns before the window is fully loaded, so some calls, like win.document.getelementby
id() will fail.
... content windows when a xul window contains a w
idget capable of displaying a page, such as <browser> or <iframe>, the document in that w
idget is, naturally, separate from the document of the chrome window itself.
...And 15 more matches
Using the CSS Typed Object Model - Web APIs
the css typed om makes css manipulation more logical and performant by prov
iding object features (rather than cssom string manipulation), prov
iding access to types, methods, and an object model for css values.
... this article prov
ides an introduction to all of its main features.
... <p> <a href="https://example.com">link</a> </p> <dl
id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
...And 15 more matches
Element - Web APIs
languages outs
ide the realm of the web platform, like xul through the xulelement interface, also implement element.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...e" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-even...
...And 15 more matches
FileSystemEntry - Web APIs
this interface serves as a base class for the filesystemfileentry and filesystemdirectoryentry interfaces, which prov
ide features specific to file system entries representing files and directories, respectively.
... // opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, function(fs) { fs.root.getfile('log.txt', {}, function(fileentry) { fileentry.remove(function() { console.log('file removed.'); }, onerror); }, onerror); }, onerror); properties this interface prov
ides the following properties.
... fullpath read only a usvstring object which prov
ides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is relative to the root directory, prepended with a "/" character.
...And 15 more matches
A basic 2D WebGL animation example - Web APIs
<script
id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 avertexposition; uniform vec2 uscalingfactor; uniform vec2 urotationvector; vo
id main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urotationvector.x ); gl_p...
... then the final position is computed by multiplying the rotated position by the scaling vector prov
ided by the javascript code in uscalingfactor.
...since we're drawing a sol
id, untextured object with no lighting applied, this is exceptionally simple: <script
id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; vo
id main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
...And 15 more matches
Animating textures in WebGL - Web APIs
« previous in this demonstration, we build upon the previous example by replacing our static textures with the frames of an mp4 v
ideo file that's playing.
... getting access to the v
ideo the first step is to create the <v
ideo> element that we'll use to retrieve the v
ideo frames: // will set to true when v
ideo can be copied to texture var copyv
ideo = false; function setupv
ideo(url) { const v
ideo = document.createelement('v
ideo'); var playing = false; var timeupdate = false; v
ideo.autoplay = true; v
ideo.muted = true; v
ideo.loop = true; // waiting for these 2 e...
...vents ensures // there is data in the v
ideo v
ideo.addeventlistener('playing', function() { playing = true; checkready(); }, true); v
ideo.addeventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); v
ideo.src = url; v
ideo.play(); function checkready() { if (playing && timeupdate) { copyv
ideo = true; } } return v
ideo; } first we create a v
ideo element.
...And 15 more matches
ARIA: tab role - Accessibility
the aria tab role indicates an interactive element ins
ide a tablist that, when activated, displays its associated tabpanel.
... <button role="tab" aria-selected="true" aria-controls="tabpanel-
id"
id="tab-
id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
... the common user experience pattern is a group of visual tabs above, or to the s
ide of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
...And 15 more matches
Web accessibility for seizures and physical reactions - Accessibility
web technologies that use v
ideo, 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 epilepsy foundation's article, photosensitivity and seizures, prov
ides a list of triggers that may cause seizures in photosensitive people; here's an excerpt from that list: television screens or computer monitors due to the flicker or rolling images.
... certain v
ideo games or tv broadcasts containing rap
id flashes or alternating patterns of different colors.
...And 15 more matches
@supports - CSS: Cascading Style Sheets
the rule may be placed at the top level of your code or nested ins
ide any other conditional group at-rule.
... @supports (display: gr
id) { div { display: gr
id; } } @supports not (display: gr
id) { div { float: right; } } in javascript, @supports can be accessed via the css object model interface csssupportsrule.
...the following example returns true if the browser's transform-origin property cons
iders 5% 5% val
id: @supports (transform-origin: 5% 5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.
...And 15 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 which 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 vo
id addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in ns
idomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in ns
idomhtmlformelement aform); vo
id findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); vo
id getalldi...
...sabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); vo
id getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); vo
id modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); vo
id removealllogins(); vo
id removelogin(in nsilogininfo alogin); vo
id searchlogins(out unsigned long count, in nsipropertybag matchdata, [retval, array, size_is(count)] out nsilogininfo logins); vo
id setloginsavingenabled(in astring ahost, in boolean isenabled); methods addlogin() stores a new login in the login manager.
...And 14 more matches
nsILoginManagerStorage
toolkit/components/passwordmgr/public/nsiloginmanagerstorage.
idlscriptable this interface is implemented by modules that wish to prov
ide storage mechanisms 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 prov
ide operating system integration with a native password manager system, implementing and registering a storage module for the login manager is how you do it.
...method overview vo
id addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); vo
id findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); vo
id getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); vo
id getallencryptedlogins([optional] out unsigned long count, [retval, ...
...And 14 more matches
nsIMicrosummaryService
toolkit/components/places/public/nsimicrosummaryservice.
idlscriptable this interface prov
ides methods for managing installed microsummaries, and the bookmarks they apply to.
...anged 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 vo
id addgenerator(in nsiuri generatoruri); nsimicrosummary createmicrosummary(in nsiuri pageuri, in nsiuri generatoruri); nsisimpleenumerator getbookmarks(); nsimicrosummarygenerator getgenerator(in nsiuri generatoruri); nsimicrosummaryset getmicrosummaries(in nsiuri pageuri, in long long bookmark
id); nsimicrosummary getmicrosummary(in long long bookmarki...
...d); boolean hasmicrosummary(in long long bookmark
id); nsimicrosummarygenerator installgenerator(in ns
idomdocument xmldefinition); boolean ismicrosummary(in long long bookmark
id, in nsimicrosummary microsummary); nsimicrosummary refreshmicrosummary(in long long bookmark
id); vo
id removemicrosummary(in long long bookmark
id); vo
id setmicrosummary(in long long bookmark
id, in nsimicrosummary microsummary); methods addgenerator() install the microsummary generator from the resource at the supplied uri.
...And 14 more matches
nsIPermissionManager
netwerk/base/nsipermissionmanager.
idlscriptable please add a summary to this article.
... last changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) inherits from: nsisupports method overview vo
id add(in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); vo
id addfromprincipal(in nsiprincipal principal, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime); vo
id remove(in autf8string host, in string type); vo
id removefromprincipal(in nsiprincipal principal, in string type); vo
id removepermission(in nsipermission perm); vo
id removeallsince(in int64_t since); vo
id removeall(); pruint32 testexactpermission(in nsiuri uri, in string type); ...
... vo
id add( in nsiuri uri, in string type, in pruint32 permission, [optional] in pruint32 expiretype, [optional] in print64 expiretime ); parameters uri the uri to add the permission for.
...And 14 more matches
nsIWebBrowser
embedding/browser/webbrowser/nsiwebbrowser.
idlscriptable this interface is implemented by web browser objects.
...method overview vo
id addwebbrowserlistener(in nsiweakreference alistener, in nsi
idref ai
id); vo
id removewebbrowserlistener(in nsiweakreference alistener, in nsi
idref ai
id); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance.
... note: the implementation should not refcount the supplied chrome object; it should assume that a non nsnull value is always val
id.
...And 14 more matches
nsIWinTaskbar
w
idget/public/nsiwintaskbar.
idlscriptable represents a service that exposes the apis prov
ided by the microsoft windows taskbar.
...these previews automatically h
ide the corresponding nsitaskbarwindowpreview.
...to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuilder createjumplistbuilder(); nsitaskbartabpreview createtaskbartabpreview(in ns
idocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress gettaskbarprogress(in ns
idocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in ns
idocshell shell); vo
id setgroup
idforwindow(in ns
idomwindow aparent, in astring a
identifier); attributes attribute type description available boolean returns true if the operating system supports windows 7 or late...
...And 14 more matches
Address Book examples
note: thunderbird and seamonkey user interfaces now reference 'contacts' not 'cards' however, as the backend still uses the 'cards' terminology, that is what is used here this article prov
ides examples on accessing and manipulating thunderbird address books.
... address book interfaces prov
ides an overview of the related interfaces.
... address books are uniquely
identified by a uri.
...And 14 more matches
Mail composition back end
pizzarro <rhp@netscape.com> contents overview sending messages nsimsgsend sending listener interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done cons
iderable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them.
...several (but not all) of these interfaces are specified in
idl.
...the feedback mechanism is prov
ided by a nsimsgsendlistener which is implemented by the caller.
...And 14 more matches
Pixel manipulation with canvas - Web APIs
it contains the following read-only attributes: w
idth the w
idth of the image in pixels.
... the uint8clampedarray contains height × w
idth × 4 bytes of data, with index values ranging from 0 to (height×w
idth×4)-1.
... for example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following: bluecomponent = imagedata.data[((50 * (imagedata.w
idth * 4)) + (200 * 4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord = 50; var ycoord = 100; var canvasw
idth = 1024; function getcolorindicesforcoord(x, y, w
idth) { var red = y * (w
idth * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; } var colorindices = getcolorindicesforcoord(xcoord, ycoord, canvasw
idth); var redindex = colorindices[0]; var greenindex = colorindices[1]; var blueindex = colorindices[2]; var alphaindex = colorindices[3]; var redforcoord = imagedata.data[redindex]; var greenforcoord = imagedata.data[greenindex]; var blueforcoord...
...And 14 more matches
WebGL constants - Web APIs
the webgl api prov
ides several constants that are passed into or returned by functions.
... standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementby
id('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_w
idth); some constants are also prov
ided by webgl extensions.
... a list is prov
ided below.
...And 14 more matches
Matrix math for the web - Web APIs
these matrices consist of a set of 16 values arranged in a 4x4 gr
id.
... let's begin by cons
idering the
identity matrix.
... this is a special transformation matrix which functions much 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 match the original matrix.
...And 14 more matches
Basic form hints - Accessibility
when implementing forms using traditional html form-related elements, it is important to prov
ide labels for controls, and explicitly associate a label with its control.
...note that each <input> element has an
id, and each <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 w
idget, using <div>s or <span>s.
...And 14 more matches
system - CSS: Cascading Style Sheets
if the algorithm specified in the system descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system prov
ided.
... cyclic cycles through the list of symbols prov
ided.
...at least one symbol must be specified in the symbols descriptor, or the counter style is not val
id.
...And 14 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these gu
ides.
...this can be contrasted with the two-dimensional model of css gr
id layout, which controls columns and rows together.
...modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand s
ide, with new lines appearing one under the other.
...And 14 more matches
Syntax - CSS: Cascading Style Sheets
the css syntax reflects this goal and its basic building blocks are: the property which is an
identifier, that is a human-readable name, that defines which feature is cons
idered.
...each property has a set of val
id values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
...the pair is separated by a colon, ':' (u+003a colon), and white spaces before, between, and after properties and values, but not necessarily ins
ide, are ignored.
...And 14 more matches
Encrypt and decrypt MAC using token
ders */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey cka
id-----" #define enckey_trailer "-----end aeskey cka
id-----" #define mackey_header "-----begin mackey cka
id-----" #define mackey_trailer "-----end mackey cka
id-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_...
...header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static vo
id 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 "); ...
...encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_
id */ secstatus gathercka_
id(pk11symkey* key, secitem* buf) { 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 */ pk11s...
...And 13 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey cka
id-----" #define enckey_trailer "-----end aeskey cka
id-----" #define mackey_header "-----begin mackey cka
id-----" #define mackey_trailer "-----end mackey cka
id-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_...
...header "-----begin pad-----" #define pad_trailer "-----end pad-----" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* print a usage message and exit */ static vo
id 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, "%-20s specify db directory path\n\n", "-d <dbdirpath>"); ...
...*/ /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* * gather a cka_
id */ 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 */ pk11s...
...And 13 more matches
EncDecMAC using token object - sample 3
encdecmac using token object example: <h2
id="nss_sample_code_3_hashing.">nss sample code 3: enc/dec/mac using token object
id.</h2> <p class="summary">computes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...nclude #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey cka
id-----" #define enckey_trailer "-----end aeskey cka
id-----" #define mackey_header "-----begin mackey cka
id-----" #define mackey_trailer "-----end mackey cka
id-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header "-----begin mac-----" #define mac_trailer "-----end mac-----" #define pad_header "-----begin pad-----" #define pad_trailer "-----end pad----...
...-" typedef enum { encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static vo
id usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operation\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s spec...
...And 13 more matches
nss tech note8
background information on libssl's cache functions and s
ids nss technical note: 8 27 february 2006 nelson b.
... bolyard here is some background information on libssl's cache functions and s
ids.
... a s
id (or sslsession
id struct) contains all the info needed to restart the ssl session at a later time on another socket.
...And 13 more matches
JS::PersistentRooted
this article covers features introduced in sp
idermonkey 31 a copyable, assignable global gc root type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction.
... syntax js::persistentrooted<t> var; // added in sp
idermonkey 38 js::persistentrooted<t> var(cx); js::persistentrooted<t> var(cx, initial); js::persistentrooted<t> var(rt); js::persistentrooted<t> var(rt, initial); name type description cx jscontext * the context to get the runtime in which to add the root rt jsruntime * the runtime in which to add the root.
... method description vo
id init(jscontext* cx) initialize with optional initial value (if not prov
ided, it will be initialized with the initial value of the type).
...And 13 more matches
JSClass
syntax struct jsclass { const char *name; uint32_t flags; /* optional since sp
idermonkey 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since sp
idermonkey 44 */ /* optional since sp
idermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since sp
idermonkey 13 ...
...*/ jscheckaccessop checkaccess; /* obsolete since sp
idermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobject; /* obsolete since sp
idermonkey 13 */ jstraceop trace; /* added in sp
idermonkey 17 */ jsclassinternal reserved1; /* obsolete since sp
idermonkey 13 */ vo
id *reserved[n]; /* sizeof 'reserved' depends on version */ }; name type description name const char * class name flags uint32_t class flags.
... use null or js_propertystub (sp
idermonkey 31 or older) for default behavior.
...And 13 more matches
Redis Tips
related commands - an ever-growing list of related commands is given on the right-hand s
ide of the page.
... there are many insightful
ideas to be found here.
... here's a stup
id node script to show how this works: #!/usr/bin/env node var r = require('redis').createclient(); r.multi() .set("foo", 42) .set("bar", "ice cream") .set("baz", 6.28) .get("foo") .get("bar") .get("baz") .exec(function(err, resultlist) { console.log(json.stringify(resultlist, null, 2)); r.end(); // terminate the redis connection; node can quit }); when run, this prints:...
...And 13 more matches
Handling Mozilla Security Bugs
we understand and acknowledge the concerns of those who believe that too-hasty disclosure of exploit details can prov
ide a short-term advantage to potential attackers, who can exploit a problem before most end users become aware of its existence.
... we believe that both sets of concerns are val
id, and that both are worth addressing as best we can.
...we believe that it is a compromise that can be justified to those on both s
ides of the question regarding disclosure.
...And 13 more matches
nsACString_internal
names: nsastring for w
ide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization.
... <map
id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,197,289,245" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://developer.mozilla.org/en/nsxp
idlcstring" shape="rect" title="nsxp
idlcstring"> <area alt="" coords="461,197,611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" ti...
...51,389,435,437" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii ...
...And 13 more matches
IAccessibleTable2
other-licenses/ia2/accessibletable2.
idlnot scriptable this interface gives access to a two-dimensional table.
...cell if both row and column index are val
id then the corresponding accessible object is returned that represents the requested cell regardless of whether the cell is currently visible (on the screen).
... return value e_inval
idarg if bad [in] passed, [out] value is null.
...And 13 more matches
nsIApplicationCache
netwerk/base/public/nsiapplicationcache.
idlscriptable this interface represents an application cache, which stores resources for offline use.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) each application cache has a unique client
id for use with nsicacheservice.opensession() method, to access the cache's entries.
...all application caches with the same group
id belong to a cache group.
...And 13 more matches
nsIBinaryOutputStream
xpcom/io/nsibinaryoutputstream.
idlscriptable this interface allows writing of primitive data types (integers, floating-point values, booleans, and so on.) to a stream in a binary, untagged, fixed-endianness format.
... inherits from: nsioutputstream last changed in gecko 1.7 method overview vo
id setoutputstream(in nsioutputstream aoutputstream); vo
id write8(in pruint8 abyte); vo
id write16(in pruint16 a16); vo
id write32(in pruint32 a32); vo
id write64(in pruint64 a64); vo
id writeboolean(in prbool aboolean); vo
id writebytearray([array, size_is(alength)] in pruint8 abytes, in pruint32 alength); vo
id writebytes(alength)] in string astring, in pruint32 alength); vo
id writedouble(in do...
...uble adouble); vo
id writefloat(in float afloat); vo
id writestringz(in string astring); vo
id writeutf8z(in wstring astring); vo
id writewstringz(in wstring astring); methods setoutputstream() sets the stream to which output is directed.
...And 13 more matches
nsIBrowserHistory
toolkit/components/places/public/nsibrowserhistory.
idlscriptable a browser-specific interface to global history.
...to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview vo
id addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 vo
id markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 vo
id markpageastyped(in nsiuri auri); obsolete since gecko 22.0 vo
id registeropenpage(in nsiuri auri); obsolete since gecko 9.0 vo
id removeallpages(); vo
id removepage(in nsi...
...uri auri); vo
id removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); vo
id removepagesbytimeframe(in long long abegintime, in long long aendtime); vo
id removepagesfromhost(in autf8string ahost, in boolean aentiredomain); vo
id removevisitsbytimeframe(in long long abegintime, in long long aendtime); vo
id unregisteropenpage(in nsiuri auri); obsolete since gecko 9.0 note: the markpageasfollowedlink and markpageastyped methods were moved to nsinavhistoryservice in gecko 22.0 so that all markpageas* methods can be found in one interface.
...And 13 more matches
nsIRequest
netwerk/base/nsirequest.
idlscriptable this interface is used by the request initiator to control the request.
... method overview vo
id cancel(in nsresult astatus); boolean ispending(); vo
id resume(); vo
id suspend(); attributes attribute type description loadflags nsloadflags the load flags of this request.
... load_from_cache 1 << 10 load from the cache, bypassing protocol specific val
idation logic.
...And 13 more matches
nsIScriptError
js/xpconnect/
idl/nsiscripterror.
idlscriptable represents javascript errors and warnings for use by the console service.
...that subclass offered the nsiscripterror.initwithwindow
id() method for that purpose; that method is now available in this interface, however.
... method overview vo
id init(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category); vo
id initwithwindow
id(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindow
id); autf8string tostring(); attributes attribute type description category string a string indicating the category of error that occurred see categories for a list.
...And 13 more matches
nsIPromptService
embedding/components/windowwatcher/public/nsipromptservice.
idlscriptable this interface can be used to display simple dialogs.
...to get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); method overview vo
id alert(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext); vo
id alertcheck(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in ns
idomwindow aparent, in wstring adialogtitle, in wstr...
...ing atext, in wstring acheckmsg, inout boolean acheckstate); print32 confirmex(in ns
idomwindow aparent,in wstring adialogtitle,in wstring atext, in unsigned long abuttonflags,in wstring abutton0title, in wstring abutton1title,in wstring abutton2title,in wstring acheckmsg, inout boolean acheckstate); boolean prompt(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring avalue, in wstring acheckmsg, inout boolean acheckstate); boolean promptusernameandpassword(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring ausername, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean promptpassword(in ns
idomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring apa...
...And 12 more matches
nsITransactionListener
editor/txmgr/
idl/nsitransactionlistener.
idlscriptable this interface is implemented by an object that tracks transactions.
... inherits from: nsisupports last changed in gecko 1.7 method overview vo
id d
idbeginbatch(in nsitransactionmanager amanager, in nsresult aresult); vo
id d
iddo(in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult adoresult); vo
id d
idendbatch(in nsitransactionmanager amanager, in nsresult aresult); vo
id d
idmerge(in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge, in boolean ad
idmerge, in nsresult amergeresult); vo
id d
idredo(in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult aredoresult); vo
id d
idundo(in nsitransactionmanager amanager, in nsitransaction atransaction, in nsresult aundoresult); boolean willbeginbatch(in nsitransactionmanager amanager); boolean willdo(...
...ansaction atransaction); boolean willendbatch(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 d
idbeginbatch() called after a nsitransactionmanager begins a batch.
...And 12 more matches
nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.
idlscriptable this interface is used by the tree w
idget to get information about what is selected.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview vo
id adjustselection(in long index, in long count); vo
id clearrange(in long startindex, in long endindex); vo
id clearselection(); vo
id getrangeat(in long i, out long min, out long max); long getrangecount(); vo
id inval
idateselection(); vo
id invertselection(); boolean isselected(in long index); vo
id rangedselect(in long startindex, in long endindex, in boolean augment); vo
id select(in long index); vo
id selectall(); vo
id timedselect(in long index, in long delay); vo
id toggleselect(in long index); attributes attribute type description count long the number of ...
... tree nsitreeboxobject the tree w
idget for this selection.
...And 12 more matches
nsIVariant
xpcom/ds/nsivariant.
idlscriptable xpconnect has magic to transparently convert between nsivariant and js types.
... nsresult getasarray(out pruint16 type, out nsi
id i
id, out pruint32 count, out vo
idptr ptr); violates the xpcom interface gu
idelines astring getasastring(); native code only!
... nsresult getas
id(out ns
id retval); violates the xpcom interface gu
idelines print16 getasint16(); native code only!
...And 12 more matches
nsIZipWriter
modules/libjar/zipwriter/public/nsizipwriter.
idlscriptable this interface prov
ides an easy way for scripts to archive data in the zip file format.
...to create an instance, use: var zipwriter = components.classes["@mozilla.org/zipwriter;1"] .createinstance(components.interfaces.nsizipwriter); method overview vo
id addentrychannel(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsichannel achannel, in boolean aqueue); vo
id addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); vo
id addentryfile(in autf8string azipentry, in print32 acompression, in nsifile afile, in boolean aqueue); vo
id addentrystream(in autf8string azipentry,...
... in prtime amodtime, in print32 acompression, in nsiinputstream astream, in boolean aqueue); vo
id close(); nsizipentry getentry(in autf8string azipentry); boolean hasentry(in autf8string azipentry); vo
id open(in nsifile afile, in print32 aioflags); vo
id processqueue(in nsirequestobserver aobserver, in nsisupports acontext); vo
id removeentry(in autf8string azipentry, in boolean aqueue); attributes attribute type description comment acstring gets or sets the comment associated with the currently open zip file.
...And 12 more matches
Standard OS Libraries
.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 :: noit
idart / search · winapi - winapi js-ctypes snippets that can be copied and pasted to scratchpad com see using com from js-ctypes.
...wayland is not cons
idered stable, but it's supposed to replace xorg in the long term.
...wms on ubuntu work a little differently but we'll revisit this topic later in this article (d
id you know they have a *special* firefox build for ubuntu?).
...And 12 more matches
Waterfall - Firefox Developer Tools
it's based on the
idea that the things a browser does when running a site can be div
ided into various types - running javascript, updating layout, and so on - and that at any given point in time, the browser is doing one of those things.
...recorded operations, called markers, are shown as horizontal bars, la
id out in a waterfall to reflect the serial nature of the browser's execution.
... when a marker is selected you'll see more information about it in a s
idebar on the right.
...And 12 more matches
BudgetService - Web APIs
the budgetservice interface of the web budget api prov
ides a programmatic interface to the user agent’s budget service.
... methods budgetservice.getcost() returns a promise that resolves to a double, indicating the worst-case background operation cost of the prov
ided background operation.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
...And 12 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
the canvasrenderingcontext2d.drawimage() method of the canvas 2d api prov
ides different ways to draw an image onto the canvas.
... syntax vo
id ctx.drawimage(image, dx, dy); vo
id ctx.drawimage(image, dx, dy, dw
idth, dheight); vo
id ctx.drawimage(image, sx, sy, sw
idth, sheight, dx, dy, dw
idth, dheight); parameters image an element to draw into the context.
... the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlv
ideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas.
...And 12 more matches
DOMException - Web APIs
each exception has a name, which is a short "camelcase" style string
identifying the error or abnormal condition.
... note: because historically the errors were
identified by a numeric value that corresponded with a named variable defined to have that value, some of the entries below indicate the legacy code value and constant name that were used in the past.
...(legacy code value: 4 and legacy constant name: wrong_document_err) inval
idcharactererror the string contains inval
id characters.
...And 12 more matches
Examples of web and XML development using the DOM - Web APIs
this chapter prov
ides some longer examples of web and xml development using the dom.
... example 1: height and w
idth the following example shows the use of the height and w
idth properties alongs
ide images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>w
idth/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementby
id("image1"); arrimages[1] = document.getelementby
id("image2"); arrimages[2] = document.getelementby
id("image3"); var objoutput = document.getelementby
id("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", w
idth=" + arrimages...
...[i].w
idth + ", style.height=" + arrimages[i].style.height + ", style.w
idth=" + arrimages[i].style.w
idth + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, w
idth, or style <img
id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", w
idth="500", but no style <img
id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" w
idth="500"> </p> <p>image 3: no height, w
idth, but style="height: 50px; w
idth: 500px;" <img
id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; w
idth: 500px;"> </p> <div
id="output"> </div> </body...
...And 12 more matches
FileSystemEntrySync - Web APIs
various browsers implement pieces of the file and directory entries api (otherwise known as the file system api) but you should try to avo
id using it.
... method overview metadata getmetadata () raises (fileexception); filesystementrysync moveto (in directoryentrysync parent, optional domstring newname) raises (fileexception); filesystementrysync copyto(in directoryentrysync parent, optional domstring newname) raises (fileexception); domstring tourl(); vo
id remove() raises (fileexception); directoryentrysync getparent(); attributes attribute type description filesystem readonly filesystemsync the file system where the entry res
ides.
... inval
id_state_err the filesystemsync is no longer val
id for some reason bes
ides being deleted.
...And 12 more matches
HTMLMediaElement - Web APIs
the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and v
ideo.
... the htmlv
ideoelement and htmlaudioelement elements both inherit this interface.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 30%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
...And 12 more matches
HTMLOutputElement - Web APIs
the htmloutputelement interface prov
ides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <output> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 12 more matches
MediaStreamTrack - Web APIs
the mediastreamtrack interface represents a single media track within a stream; typically, these are audio or v
ideo tracks, but other track types may exist as well.
... mediastreamtrack.contenthint a string that may be used by the web application to prov
ide a hint as to what type of content the track contains to gu
ide how it should be treated by api consumers.
... mediastreamtrack.
id read only returns a domstring containing a unique
identifier (gu
id) for the track; it is generated by the browser.
...And 12 more matches
64-bit Compatibility
what w
idths are the random typedefs everywhere?
...the compiler can implicitly sign or zero extend operands with unintended s
ide effects.
... for example, cons
ider this code: #define pointer_tagbits 3 static inline uintptr_t unmaskpointer(uintptr_t v) { return v & ~pointer_tagbits; } the value 3 will be inverted to 0xfffffffc, then zero-extended to 0x00000000fffffffc - a subtle and nasty bug, assuming it is unintended.
...And 11 more matches
JSNewEnumerateOp
this callback overr
ides a portion of sp
idermonkey's default [[enumerate]] internal method.
... syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::auto
idvector &properties); // added in sp
idermonkeys
idebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandle
id idp); // obsolete since jsapi 37 name type description cx jscontext * the context in which the enumeration is taking place.
... properties js::auto
idvector & out parameter.
...And 11 more matches
Manipulating bookmarks using Places
the places bookmarks service, prov
ided by the nsinavbookmarksservice interface, prov
ides methods for creating, deleting, and manipulating bookmarks and bookmark folders.
...for example, to create a new folder in the bookmarks menu: var menufolder = bmsvc.bookmarksmenufolder; // bookmarks menu folder var newfolder
id = bmsvc.createfolder(menufolder, "folder name here", bmsvc.default_index); this code locates the bookmarks menu's folder, then creates a new folder named "folder name here" in it.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmk
id = bmsvc.insertbookmark(newfolder
id, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the end of the bookmarks folder referenced by newbkmk
id.
...And 11 more matches
Using the Places history service
this page prov
ides a map to the external api.
...this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for typed, h
idden, and gecko flags (gecko flags is trunk only).
...the main url table stores the information about the page: url, host name, title, visit count, h
idden, and typed.
...And 11 more matches
Language bindings
an xpcom language binding is a br
idge between a particular language and xpcom to prov
ide 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 which there are xpcom bindings.
...in order to allow any other language to use the xpcom api, a br
idging layer is required.
... the following br
idging layers are currently available: components objectthe components object is the object through which xpconnect functionality is reflected into javascript.
...And 11 more matches
nsDependentCSubstring
it is the client code's responsibility to ensure that the external buffer remains val
id for a long as the string is alive.
... names: nsdependentsubstring for w
ide characters nsdependentcsubstring for narrow characters method overview constructors rebind beginreading endreading beginwriting endwriting data length isempty isvo
id isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate ge...
...tdata getmutabledata setisvo
id stripchar base classes nsacstring_internal data members no public members.
...And 11 more matches
nsIAccessNode
accessible/public/nsiaccessnode.
idlscriptable an interface used by in-process accessibility clients to get style, window, markup and other information about a dom node.
... method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 ns
idomcssprimitivevalue getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); vo
id scrollto(in unsigned long ascrolltype); vo
id scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a ...
... attribute type description document nsiaccessibledocument the document accessible that this access node res
ides in.
...And 11 more matches
nsIAccessibleDocument
accessible/public/nsiaccessibledocument.
idlscriptable an interface for in-process accessibility clients that wish to retrieve information about a document.
...you can also get one from nsiaccessnode.getaccessibledocument() or nsiaccessibleevent.getaccessibledocument() method overview nsiaccessible getaccessibleinparentchain(in ns
idomnode adomnode, in boolean acancreate); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in vo
idptr aunique
id); native code only!
... obsolete since gecko 2.0 astring getnamespaceurifor
id(in short namespace
id); attributes attribute type description caretaccessible nsiaccessible read only.
...And 11 more matches
nsIConsoleService
xpcom/base/nsiconsoleservice.
idlscriptable the console service is the back-end for the error console, bundled with every mozilla application, and for firefox's web console and browser console.
... 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 vo
id getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 vo
id getmessagearray([optional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); vo
id logmessage(in nsiconsolemessage message); vo
id logstringmessage(in wstring message); vo
id registerlistener(in nsiconsolelistener l...
...istener); vo
id reset(); vo
id unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages.
...And 11 more matches
nsIHttpChannel
netwerk/protocol/http/nsihttpchannel.
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: nsichannel 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.newchannel("https://www.example.com/", null, null); method overview vo
id getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); boolean isnocacheresponse(); boolean isnostoreresponse(); vo
id redirectto(in nsiuri anewuri); vo
id setemptyrequestheader(in acstring aheader); vo
id setreferrerwithpolicy(in nsiuri referrer, i...
...n unsigned long referrerpolicy); vo
id setrequestheader(in acstring aheader, in acstring avalue, in boolean amerge); vo
id setresponseheader(in acstring header, in acstring value, in boolean merge); vo
id visitoriginalresponseheaders(in nsihttpheadervisitor avisitor); vo
id visitrequestheaders(in nsihttpheadervisitor avisitor); vo
id visitresponseheaders(in nsihttpheadervisitor avisitor); constants constant description referrer_policy_no_referrer_when_downgrade default; indicates not to pass on the referrer when downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_or...
...And 11 more matches
nsIInstallLocation
toolkit/mozapps/extensions/public/nsiextensionmanager.
idlscriptable interface representing a location where extensions, themes and so on are installed.
...you can get the install location of a particular add-on using nsiextensionmanager interface: var il = components.classes["@mozilla.org/extensions/manager;1"] .getservice(components.interfaces.nsiextensionmanager) .getinstalllocation("add-on
id") method overview astring get
idforlocation(in nsifile file); nsifile getitemfile(in astring
id, in astring path); nsifile getitemlocation(in astring
id); nsifile getstagefile(in astring
id); boolean itemismanagedindependently(in astring
id); vo
id removefile(in nsifile file); nsifile stagefile(in nsifile file, in astring
id); attributes attribute type description canacce...
... itemlocations ns
idirectoryenumerator an enumeration of nsifiles for: locations that contain items potential dropped-in xpis note: this enumeration resolves text links to the directories they refer to.
...And 11 more matches
nsIMarkupDocumentViewer
docshell/base/nsimarkupdocumentviewer.
idlscriptable describes the properties of a content viewer for an html or xml markup document.
... inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview vo
id scrolltonode(in ns
idomnode node); vo
id sizetocontent(); attributes attribute type description allowplugins boolean if true, plugins are allowed within the doc shell.
...obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) b
idicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user.
...And 11 more matches
nsINavHistoryResultViewObserver
toolkit/components/places/public/nsinavhistoryservice.
idlscriptable this interface is used by clients of the history results to define domain-specific handling of specific nsitreeview methods that the history result doesn't implement.
... inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); vo
id ondrop(in long row, in long orientation); vo
id ontoggleopenstate(in long index); vo
id oncycleheader(in nsitreecolumn column); vo
id oncyclecell(in long row, in nsitreecolumn column); vo
id onselectionchanged(); vo
id onperformaction(in wstring action); vo
id onperformactiononrow(in wstring action, in long row); vo
id onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged item before the indicated row.
...to prov
ide behavior similar to the folder pane in thunderbird, where drops are only permitted on items themselves instead of on the pane as a whole, always return false when the orientation isn't drop_on.
...And 11 more matches
nsIWebBrowserPersist
embedding/components/webbrowserpersist/nsiwebbrowserpersist.
idlscriptable interface for persisting dom documents and uris to local or remote storage.
...to create an instance, use: var webbrowserpersist = components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview vo
id cancelsave(); vo
id savechannel(in nsichannel achannel, in nsisupports afile); vo
id savedocument(in ns
idomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); vo
id saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in ...
...nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); vo
id saveprivacyawareuri(in nsiuri auri, in nsisupports acachekey, 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 11 more matches
nsIZipReader
modules/libjar/nsizipreader.
idlscriptable this interface prov
ides methods for reading compressed (zip) files.
... method overview vo
id close(); vo
id extract(in autf8string zipentry, in nsifile outfile); vo
id extract(in string zipentry, in nsifile outfile); obsolete since gecko 10 nsiutf8stringenumerator findentries(in autf8string apattern); nsiutf8stringenumerator findentries(in string apattern); obsolete since gecko 10 nsiprincipal getcertificateprincipal(in autf8string aentryname); ns...
...am getinputstream(in autf8string zipentry); nsiinputstream getinputstream(in string zipentry); obsolete since gecko 10 nsiinputstream getinputstreamwithspec(in autf8string ajarspec, in autf8string zipentry); nsiinputstream getinputstreamwithspec(in autf8string ajarspec, in string zipentry); obsolete since gecko 10 boolean hasentry(in autf8string zipentry); vo
id init(in nsifile zipfile); obsolete since gecko 1.9 vo
id open(in nsifile zipfile); vo
id openinner(in nsizipreader zipreader, in autf8string zipentry); vo
id openinner(in nsizipreader zipreader, in string zipentry); obsolete since gecko 10 vo
id test(in autf8string aentryname); vo
id test(in string aentryname); obsolete since gecko 10 attributes a...
...And 11 more matches
nsIParentalControlsService
toolkit/components/parentalcontrols/public/nsiparentalcontrolsservice.
idlscriptable this interface prov
ides access to the operating system's parental controls feature, allowing code to detect whether such a service is enabled and to request overr
ides to bypass the feature.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: currently, this interface is only supported on microsoft windows vista and newer as well as andro
id 4.3 and newer.
...to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview vo
id log(in short aentrytype, in boolean aflag, in nsiuri asource, [optional] in nsifile atarget); boolean requesturioverr
ide(in nsiuri atarget, [optional] in nsiinterfacerequestor awindowcontext); boolean requesturioverr
ides(in nsiarray atargets, [optional] in nsiinterfacerequestor awindowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's parental controls restrictions ...
...And 9 more matches
nsIRadioInterfaceLayer
dom/system/gonk/nsiradiointerfacelayer.
idlscriptable used to implement the interface between the telephony api and the radio hardware in a telephone.
...to create an instance, use: var radiointerfacelayer = components.classes["@mozilla.org/telephony/system-worker-manager;1"] .getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsiradiointerfacelayer); method overview vo
id answercall(in unsigned long callindex); vo
id deactivatedatacall(in domstring c
id, in domstring reason); vo
id dial(in domstring number); vo
id enumeratecalls(in nsiriltelephonycallback callback); vo
id getdatacalllist(); unsigned short getnumberofmessagesfortext(in domstring text); vo
id hangup(in unsigned long callindex); vo
id registercallback(in nsiriltelephonycallback callback); vo...
...
id registerdatacallcallback(in nsirildatacallback callback); vo
id rejectcall(in unsigned long callindex); vo
id sendsms(in domstring number, in domstring message, in long request
id, in unsigned long long process
id); vo
id setupdatacall(in long radiotech, in domstring apn, in domstring user, in domstring passwd, in long chappap, in domstring pdptype); vo
id starttone(in domstring dtmfchar); vo
id stoptone(); vo
id unregistercallback(in nsiriltelephonycallback callback); vo
id unregisterdatacallcallback(in nsirildatacallback callback); attributes attribute type description currentstate jsval read only.
...And 9 more matches
nsIWebNavigation
docshell/base/nsiwebnavigation.
idlscriptable defines an interface for navigating the web.
... it prov
ides methods and attributes to direct an object to navigate to a new location, stop or restart an in process load, or determine where the object has previously gone.
... method overview vo
id goback vo
id goforward vo
id gotoindex( in long index ) vo
id loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) vo
id reload(in unsigned long reloadflags) vo
id stop(in unsigned long stopflags) constants load flags constant value description loa...
...And 9 more matches
nsIWritablePropertyBag2
xpcom/ds/nsiwritablepropertybag2.
idlscriptable this interface extends nsipropertybag2 with methods for setting properties.
... 1.0 66 introduced gecko 1.8 inherits from: nsipropertybag2 last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview vo
id setpropertyasacstring(in astring prop, in acstring value); vo
id setpropertyasastring(in astring prop, in astring value); vo
id setpropertyasautf8string(in astring prop, in autf8string value); vo
id setpropertyasbool(in astring prop, in boolean value); vo
id setpropertyasdouble(in astring prop, in double value); vo
id setpropertyasint32(in astring prop, in print32 value); vo
id setpropertyasint64(in astring prop, in print64 value); vo
id setpropertyasinterface(in astring prop, in nsisupports value); vo
id setpropertyasuint32(in astring prop, in ...
...pruint32 value); vo
id setpropertyasuint64(in astring prop, in pruint64 value); methods setpropertyasacstring() vo
id setpropertyasacstring( in astring prop, in acstring value ); parameters prop property to set the value of.
...And 9 more matches
nsIXmlRpcClient
extensions/xml-rpc/
idl/nsixmlrpcclient.
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 vo
id init(in string serverurl); vo
id setauthentication(in string username, in string password); vo
id clearauthentication(in string username, in string password); vo
id setencoding(in string encoding); vo
id setencoding(in unsigned long type, out nsi
idref uu
id, out nsqiresult result); vo
id asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint32 count); attributes attribute type description serverurl readonly nsiurl the url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from retu...
...null if the last call d
idn't return an xml-rpc fault.
...And 9 more matches
XPCOM Interface Reference by grouping
using this gu
ide this page lists the current (as of dec.
... browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document ns
idocshell dom device ns
idomgeogeolocation ns
idomgeoposition ns
idomgeopositionaddress ns
idomgeopositioncallback ns
idomgeopositioncoords ns
idomgeopositionerror ns
idomgeopositionerrorcallback ns
idomgeopositionoptions ns
idomglobalpropertyinitializer element ns
idomchromewindow ns
idomclientrect ns
idomelement ns
idomhtmlaudioelement n...
...s
idomhtmlformelement ns
idomhtmlmediaelement ns
idomhtmlsourceelement ns
idomhtmltimeranges ns
idomjswindow ns
idomnode ns
idomnshtmldocument ns
idomstorageitem ns
idomstoragemanager ns
idomwindow ns
idomwindow2 ns
idomwindowinternal ns
idomwindowutils ns
idynamiccontainer nsieditor event ns
idomevent ns
idomeventgroup ns
idomeventlistener ns
idomeventtarget ns
idommousescrollevent ns
idommoztouchevent ns
idomorientationevent ns
idomprogressevent ns
idomsimplegestureevent ns
idragdrophandler ns
idragservice ns
idragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsi...
...And 9 more matches
Zombie compartments
this page tells you how to detect and avo
id zombie compartments, which are a particular kind of memory leak.
...that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/,
id=141) │ │ ├──13.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0...
... js-compartment([system principal], 0x7f10f1250000) compartment(atoms) js-compartment(about:home) js-compartment(about:blank) compartment([system principal], resource://gre/modules/addons/xpiprov
ider.jsm) when looking at user compartments there are a couple of things to be aware of.
...And 9 more matches
Debugger.Script - Firefox Developer Tools
for a given debugger instance, sp
idermonkey constructs exactly one debugger.script instance for each underlying script object; debugger code can add its own properties to a script object and expect to find them later, use == to dec
ide whether two expressions refer to the same script, and so on.
... note that sp
idermonkey may use the same debugger.script instances for equivalent functions or evaluated code—that is, scripts representing the same source code, at the same position in the same source file, evaluated in the same lexical environment.
...sp
idermonkey constructs exactly one debugger.script for each underlying webassembly module per debugger instance.
...And 9 more matches
BluetoothCharacteristicProperties - Web APIs
the bluetoothcharacteristicproperties interface of the the web bluetooth api prov
ides the operations that are val
id on the given bluetoothremotegattcharacteristic.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome full support 56notes full support 56notes notes chromeos and macos only.
... full support ≤79notes notes windows 10.firefox no support noie no support noopera full support yessafari no support nowebview andro
id no support nochrome andro
id full support 56firefox andro
id no support noopera andro
id full support yessafari ios no support nosamsung internet andro
id full su...
...And 9 more matches
BluetoothRemoteGATTDescriptor - Web APIs
the bluetoothremotegattdescriptor interface of the web bluetooth api prov
ides a gatt descriptor, which prov
ides further information about a characteristic’s value.
... interface interface bluetoothremotegattdescriptor { readonly attribute bluetoothgattcharacteristic characteristic; readonly attribute uu
id uu
id; readonly attribute arraybuffer?
... value; promise<arraybuffer> readvalue(); promise<vo
id> writevalue(buffersource value); }; properties bluetoothremotegattdescriptor.characteristicread only returns the bluetoothremotegattcharacteristic this descriptor belongs to.
...And 9 more matches
BudgetState - Web APIs
the budgetstate interface of the the web budget api prov
ides the amount of the user agent's processing budget at a specific point in time.
... budgetstate.time returns a timestamp at which the budgetat value is val
id.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
...And 9 more matches
Drawing text - Web APIs
drawing text the canvas rendering context prov
ides two methods to render text: filltext(text, x, y [, maxw
idth]) fills a given text at the given (x,y) position.
... optionally with a maximum w
idth to draw.
... stroketext(text, x, y [, maxw
idth]) strokes a given text at the given (x,y) position.
...And 9 more matches
EffectTiming.fill - Web APIs
for example, setting fill to "none" means the animation's effects are not applied to the element if the current time is outs
ide the range of times during which 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.
... syntax var timingproperties = { fill: "none" | "forwards" | "backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element when outs
ide the animation's active interval (that is, when it's not actively animating).
...we have a <div> named "main" which is a container for the element we'll be animating, which is a <div> with the
id "box".
...And 9 more matches
HTMLElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><poly...
...line points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,an...
...dale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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, globaleventhandl...
...And 9 more matches
HTMLTableElement - Web APIs
the htmltableelement interface prov
ides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 9 more matches
FileSystemFlags - Web APIs
methods which accept an options parameter of this type may specify zero or more of these flags as fields in an object, like this: datadirectoryentry.getdirectory("workspace", { create: true }, function(entry) { }); here, we see that the create property is prov
ided, with a value of true, indicating that the directory should be created if it's not already there.
... false n/a[1] path exists but doesn't match the desired type the errorcallback is called with an appropriate error code (if the callback was prov
ided).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfilesystemflags experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed ...
...And 8 more matches
Introduction to the File and Directory Entries API - Web APIs
it prov
ides a storage api that is already familiar to your users, who are used to working with file systems.
...the api is a better choice for apps that deal with blobs for the following reasons: the file and directory entries api offers client-s
ide storage for use cases that are not addressed by databases.
...however, appcache storage isn't locally mutable, and doesn't allow for fine-grained client-s
ide management.
...And 8 more matches
HTMLCanvasElement - Web APIs
the htmlcanvaselement interface prov
ides properties and methods for manipulating the layout and presentation of <canvas> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="...
...And 8 more matches
HTMLIFrameElement - Web APIs
the htmliframeelement interface prov
ides special properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 8 more matches
HTMLScriptElement - Web APIs
html <script> elements expose the htmlscriptelement interface, which prov
ides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface).
... javascript files should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), v
ideo type (v
ideo/*), audio type (audio/*), or text/csv.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...And 8 more matches
HTMLTableCellElement - Web APIs
the htmltablecellelement interface prov
ides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 8 more matches
HTML Drag and Drop API - Web APIs
dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged item enters a val
id drop target.
... dragleave ondragleave …a dragged item leaves a val
id drop target.
... dragover ondragover …a dragged item is being dragged over a val
id drop target, every few hundred milliseconds.
...And 8 more matches
ImageData() - Web APIs
the imagedata() constructor returns a newly instantiated imagedata object built from the typed array given and having the specified w
idth and height.
... syntax new imagedata(array, w
idth [, height]); new imagedata(w
idth, height); parameters array optional a uint8clampedarray containing the underlying pixel representation of the image.
... if no such array is given, an image with a transparent black rectangle of the specified w
idth and height will be created.
...And 8 more matches
Using the MediaStream Recording API - Web APIs
the mediastream recording api makes it easy to record audio and/or v
ideo streams.
... when used with navigator.mediadevices.getusermedia(), it prov
ides an easy way to record from the user's input devices and instantly use the result in web apps.
... both audio and v
ideo may be recorded, separately or together.
...And 8 more matches
PaymentRequest.PaymentRequest() - Web APIs
the paymentrequest() constructor creates a new paymentrequest object which will be used to handle the process of generating, val
idating, and submitting a payment request.
... syntax var paymentrequest = new paymentrequest(methoddata, details, [options]); parameters methoddata contains an array of
identifiers for the payment methods the merchant web site accepts and any associated payment method specific data.
... each item in the array contains the following fields: supportedmethods for early implementations of the spec, this was a sequence of
identifiers for payment methods that the merchant website accepts.
...And 8 more matches
PaymentResponse.retry() - Web APIs
this lets your app gracefully deal with situations such as inval
id shipping addresses or declined credit cards.
... syntax retrypromise = paymentrequest.retry(errorfields); parameters errorfields a paymentval
idationerrors object, with the following properties: error optional a general description of a payment error from which the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment information.
... error can be prov
ided all by itself to prov
ide only a generic error message, or in concert with the other properties to serve as an overview while other properties' values gude the user to errors in specific fields in the payment form.
...And 8 more matches
Multi-touch interaction - Web APIs
having a single event model for pointers can simplify creating web sites, applications and prov
ide a good user experience regardless of the user's hardware.
...this additional feature can be used to prov
ide richer user interaction models but at the cost of additional complexity in the multi-touch interaction handling.
... <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px sol
id black; } #target2 { background: white; border: 1px sol
id black; } #target3 { background: white; border: 1px sol
id black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
...And 8 more matches
RTCConfiguration.certificates - Web APIs
the rtcconfiguration dictionary's optional certificates property is an array of rtccertificate objects prov
iding the security certificates available for use when authenticating duing the connection process.
... see using certificates below for more information on why you might want to—or not to—explicitly prov
ide certificates.
...although a given dtls connection only uses a single certificate, prov
iding multiple options in the certificates list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and key size may be found.
...And 8 more matches
SVGAnimatedPathData - Web APIs
name type description animatednormalizedpathseglist svgpathseglist prov
ides access to the current animated contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
... animatedpathseglist svgpathseglist prov
ides access to the current animated contents of the 'd' attribute in a form which matches one-for-one with svg's syntax.
... normalizedpathseglist svgpathseglist prov
ides access to the base (i.e., static) contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
...And 8 more matches
SVGLength - Web APIs
interface overview also implement none methods vo
id newvaluespecifiedunits(in unsigned short unittype, in float valueinspecifiedunits) vo
id converttospecifiedunits(in unsigned short unittype) properties readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants svg_lengthtype_unknown = 0 svg_lengthtype_number = 1 svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthty...
...pe_exs = 4 svg_lengthtype_px = 5 svg_lengthtype_cm = 6 svg_lengthtype_mm = 7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" w
idth="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"><![cdata[ function start() { var rect = document.getelementby
id("myrect"); var val = rect.x.baseval; // read x in pixel and cm units console.log("value: " + val.value + ", valueinspecifiedunits: " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // set x = 20pt and read it out in pixel and pt units val.newvaluespecifiedunits(svglengt...
...dunits + ", valueasstring: " + val.valueasstring); // convert x = 20pt to inches and read out in pixel and inch 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-w
idth="1" w
idth="1cm" height="1cm" /> </svg> results on a desktop monitor (pixel units will be dpi-dependent): value: 37.7952766418457, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.66666603088379, valueinspecifiedunits 8: ...
...And 8 more matches
NS ConvertUTF8toUTF16 external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
...methods constructors vo
id ns_convertutf8toutf16_external(const nsacstring&) - source parameters nsacstring& astr vo
id ns_convertutf8toutf16_external(const char*, pruint32) - source parameters char* adata pruint32 alength get prunichar* 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 prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt vo
id adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
NS LossyConvertUTF16toASCII external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods constructors vo
id ns_lossyconvertutf16toascii_external(const nsastring&) - source parameters nsastring& astr vo
id ns_lossyconvertutf16toascii_external(const prunichar*, pruint32) - source parameters prunichar* 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 n...
...sacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt vo
id adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsACString (External)
class declaration <map
id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstr...
...6toascii_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 setisvo
id isvo
id assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= ...
...urce parameters pruint32 alen endwriting char* endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvo
id vo
id setisvo
id(prbool) - source parameters prbool val isvo
id prbool isvo
id() const - source assign vo
id assign(const nsacstring&) - source parameters nsacstring& astring vo
id assign(const char*, pruint32) - source parameters char* adata pruint32 alength...
...And 7 more matches
nsAString (External)
class declaration this header prov
ides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes.
... <map
id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,198,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coord...
...illa.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 setisvo
id isvo
id assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar appendint tointeger data members no publ...
...And 7 more matches
nsCString external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods constructors vo
id nscstring_external() - source vo
id nscstring_external(const nscstring_external&) - source parameters nscstring_external& astring vo
id nscstring_external(const nsacstring&) - source parameters nsacstring& areadable vo
id 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_exte...
...rnal& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt vo
id adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsDependentCString external
class declaration method overview constructors rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind ...
...methods constructors vo
id nsdependentcstring_external() - source vo
id nsdependentcstring_external(const char*, pruint32) - source parameters char* adata pruint32 alength rebind vo
id 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&) - sou...
...rce parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt vo
id adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsDependentCSubstring external
class declaration method overview constructors rebind beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfi...
...methods constructors vo
id nsdependentcsubstring_external() - source vo
id nsdependentcsubstring_external(const char*, pruint32) - source parameters char* astart pruint32 alength vo
id nsdependentcsubstring_external(const nsacstring&, pruint32) - source parameters nsacstring& astr pruint32 astartpos vo
id nsdependentcsubstring_external(const nsacstring&, pruint32, pruint32) - source parameters nsacstring& astr pruint32 astartpos pruint32 alength rebind vo
id rebind(const char*, pruint32) - source paramete...
...urce parameters pruint32 alen endwriting char* endwriting() - source setlength prbool setlength(pruint32) - source parameters pruint32 alen length pruint32 length() const - source isempty prbool isempty() const - source setisvo
id vo
id setisvo
id(prbool) - source parameters prbool val isvo
id prbool isvo
id() const - source assign vo
id assign(const nsacstring&) - source parameters nsacstring& astring vo
id assign(const char*, pruint32) - source parameters char* adata pruint32 alength...
...And 7 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 setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowe...
...methods constructors vo
id nsdependentstring_external() - source vo
id nsdependentstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength rebind vo
id rebind(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& as...
...tring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt vo
id adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsLiteralCString (External)
class declaration method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods rebind vo
id 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 achar ...
... adopt vo
id adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsLiteralString (External)
class declaration method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods rebind vo
id 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 achar ...
... adopt vo
id adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
nsString external
class declaration basic strings method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvo
id isvo
id assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral ...
...methods constructors vo
id nsstring_external() - source vo
id nsstring_external(const nsstring_external&) - source parameters nsstring_external& astring vo
id nsstring_external(const nsastring&) - source parameters nsastring& areadable vo
id nsstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - ...
... nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt vo
id adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operation.
...And 7 more matches
mozIAsyncFavicons
toolkit/components/places/moziasyncfavicons.
idlscriptable interface for accessing the favicon service asynchronously.
...method overview vo
id getfaviconurlforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); vo
id getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); vo
id setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); voi...
...d replacefavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); vo
id replacefavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, [optional] in prtime aexpiration); methods getfaviconurlforpage() retrieve the url of the favicon for the given page.
...And 7 more matches
mozISpellCheckingEngine
extensions/spellcheck/
idl/mozispellcheckingengine.
idlscriptable this interface represents a spelling checker.
...the built in hunspell engine has contract
id "@mozilla.org/spellchecker/engine;1".
... extensions can use this interface to check spelling or prov
ide its own spell checker to editors.
...And 7 more matches
nsIApplicationCacheService
netwerk/base/public/nsiapplicationcacheservice.
idlscriptable this interface manages the set of application cache 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 vo
id cacheopportunistically(in nsiapplicationcache cache, in acstring key); nsiapplicationcache chooseapplicationcache(in acstring key); nsiapplicationcache createapplicationcache(in acstring group); vo
id deactivategroup(in acstring group); nsiapplicationcache getactivecache(in acstring group); nsiapplicationcache getapplicationcache(in acstring client
id); vo
id getgroups([optional] out unsigned long count, [array, size_is(count), retval] out string group
ids); methods cacheopportunistically() flags the specified key as one that should be cached opportunistically.
...vo
id cacheopportunistically( in nsiapplicationcache cache, in acstring key ); parameters cache the cache in which the entry is currently cached.
...And 7 more matches
nsIArray
xpcom/ds/nsiarray.
idlscriptable this interface implements an array object.
...prov
ides basic functionality for retrieving elements at a specific position, searching for elements.
...neither interface makes any attempt to protect the indiv
idual elements from modification.
...And 7 more matches
nsIClipboardCommands
webshell/public/nsiclipboardcommands.
idlscriptable an interface for embedding clients who wish to interact with the system-w
ide os clipboard.
... inherits from: nsisupports last changed in gecko 1.7 method overview boolean cancopyimagecontents(); boolean cancopyimagelocation(); boolean cancopylinklocation(); boolean cancopyselection(); boolean cancutselection(); boolean canpaste(); vo
id copyimagecontents(); vo
id copyimagelocation(); vo
id copylinklocation(); vo
id copyselection(); vo
id cutselection(); vo
id paste(); vo
id selectall(); vo
id selectnone(); methods cancopyimagecontents() returns whether we can copy an image's contents.
...vo
id copyimagecontents(); parameters none.
...And 7 more matches
nsIContentView
content/base/public/nsiframeloader.
idlscriptable represents a scrollable content view whose contents are actually drawn by a separate process; this is part of the electrolysis multi-process support framework.
... method overview vo
id scrollby(in float dxpx, in float dypx); vo
id scrollto(in float xpx, in float ypx); vo
id setscale(in float xscale, in float yscale); attributes attribute type description contentheight float read only.
... contentw
idth float dimensions of scrolled content in chrome-document css pixels.
...And 7 more matches
nsIEditor
« xpcom api reference editor/nsieditor.
idlscriptable prov
ides methods and attributes used when editing page content.
... 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] vo
id init(in ns
idomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); vo
id setattributeorequivalent(in ns
idomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); vo
id removeattributeorequivalent(in ns
idomelement element, in domstring sourceattrname, in boolean asuppresstransaction); vo
id postcreate(); vo
id predestroy(in boolean adestroyingframes); selected content removal vo
id deleteselection(in short action, in short stripwrappers); document in...
...fo and file methods vo
id resetmodificationcount(); long getmodificationcount(); vo
id incrementmodificationcount(in long amodcount); vo
id incrementmodificationcount(in long amodcount); transaction methods vo
id dotransaction(in nsitransaction txn); vo
id enableundo(in boolean enable); vo
id undo(in unsigned long count); vo
id canundo(out boolean isenabled, out boolean canundo); vo
id redo(in unsigned long count); vo
id canredo(out boolean isenabled, out boolean canredo); vo
id begintransaction(); vo
id endtransaction(); vo
id beginplaceholdertransaction(in nsiatom name); vo
id endplaceholdertransaction(); boolean shouldtxnsetselection(); vo
id setshould...
...And 7 more matches
nsIEventListenerService
content/events/public/nsieventlistenerservice.
idlscriptable a service that can be used to get a list of listeners observing events; this is primarily useful for debuggers.
...method overview vo
id geteventtargetchainfor(in ns
idomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array, size_is(acount)] out ns
idomeventtarget aoutarray); vo
id getlistenerinfofor(in ns
idomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsieventlistenerinfo aoutarray); boolean haslistenersfor(in ns
idomeventt...
...arget aeventtarget, in domstring atype); vo
id addsystemeventlistener(in ns
idomeventtarget target, in domstring type, in ns
idomeventlistener listener, in boolean usecapture); vo
id removesystemeventlistener(in ns
idomeventtarget target, in domstring type, in ns
idomeventlistener listener, in boolean usecapture); attributes attribute type description systemeventgroup ns
idomeventgroup returns system event group.
...And 7 more matches
nsIFilePicker
w
idget/nsifilepicker.
idlscriptable the file picker component is used to display standard user interface for selecting files and directories, as well as for selecting destinations for, and naming, new files.
...to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview vo
id appendfilter(in astring title, in astring filter); vo
id appendfilters(in long filtermask); vo
id init(in ns
idomwindow parent, in astring title, in short mode); vo
id open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating sy...
... filteraudio 0x100 corresponds to the *.aac, *.aif, *.flac, *.iff, *.m4a, *.m4b, *.m
id, *.m
idi, *.mp3, *.mpa, *.mpc, *.oga, *.ogg, *.ra, *.ram, *.snd, *.wav and *.wma filters for file extensions.
...And 7 more matches
nsIFileView
toolkit/components/filepicker/public/nsifileview.
idlscriptable this interface displays a list of files in a treebox.
...if the treecol
id is "filenamecolumn" fileview will return the file name, if the
id is "lastmodifiedcolumn" it will return the date of last modification.
...the nsifileview prov
ides a configuration interface to @mozilla.org/filepicker/fileview;1 , which also implements nsitreeview so that it can be passed as a tree view.
...And 7 more matches
nsIInputStream
xpcom/io/nsiinputstream.
idlscriptable this interface represents a readable stream of data.
... note: blocking input streams are often read on a background thread to avo
id locking up the main application thread.
... method overview unsigned long available();deprecated since gecko 17.0 unsigned long long available(); vo
id close(); boolean isnonblocking(); unsigned long read(in charptr abuf, in unsigned long acount); native code only!
...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 vo
id sendmessage(in astring amessagename /* [optional] in jsval v1, [optional] in jsval v2, ...
... */); vo
id registerreceiver(in astring amessagename, in jsval areceiver); vo
id unregisterreceiver(in astring amessagename, in jsval areceiver); vo
id unregisterreceivers(in astring amessagename); vo
id evalscript(in astring ascript); nsivariant createhandle(); vo
id destroy(); methods sendmessage() this method asynchronously sends a message to the jetpack process.
...And 7 more matches
nsIMemoryReporterManager
xpcom/base/nsimemoryreporter.
idlscriptable a service that prov
ides methods for managing nsimemoryreporter objects.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by @mozilla.org/memory-reporter-manager;1 as a service: var reportermanager = components.classes["@mozilla.org/memory-reporter-manager;1"] .getservice(components.interfaces.nsimemoryreportermanager); each memory reporter object, which implements nsimemoryreporter interface, prov
ides information for a given code area.
... each code area is
identified by a unique path string, which is displayed in about:memory.
...And 7 more matches
nsIMutableArray
xpcom/ds/nsimutablearray.
idlscriptable this interface is a subclass of nsiarray that prov
ides arrays that are mutable; that is, they can be altered programmatically.
...note also that null elements can be created as a s
ide effect of insertelementat().
...method overview vo
id appendelement(in nsisupports element, in boolean weak); vo
id clear(); vo
id insertelementat(in nsisupports element, in unsigned long index, in boolean weak); vo
id removeelementat(in unsigned long index); vo
id replaceelementat(in nsisupports element, in unsigned long index, in boolean weak); methods appendelement() append an element at the end of the array.
...And 7 more matches
nsINavHistoryQuery
toolkit/components/places/public/nsinavhistoryservice.
idlscriptable encapsulates all the query parameters you're likely to need when building up history ui.
...this is important because, if the user has their profile on a networked drive, query latency can be non-negligible method overview nsinavhistoryquery clone(); vo
id getfolders([optional ]out unsigned long count, [retval,array,size_is(count)] out long long folders); vo
id gettransitions([optional] out unsigned long count, [retval,array,size_is(count)] out unsigned long transitions); vo
id setfolders([const,array, size_is(foldercount)] in long long folders, in unsigned long foldercount); vo
id settransitions([const,array, size_is(count)] in unsigned long...
...set this to null (in c++ use setisvo
id) if you don't want domain matching.
...And 7 more matches
nsIParserUtils
parser/html/nsiparserutils.
idlscriptable prov
ides non-web html parsing functionality to firefox extensions and xulrunner applications.
... implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); ns
idomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in ns
idomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes.
... sanitizerc
idembedsonly (1 << 2) flag for sanitizer: only allow c
id: urls for embedded content.
...And 7 more matches
nsITelemetry
toolkit/components/telemetry/nsitelemetry.
idlscriptable a service to gather performance data that can be tracked over time to allow generating histograms.
... 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 gethistogramby
id(in acstring
id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval getkeyedhistogramby
id(in acstring
id); vo
id capturestack(in acstring name); jsval snapshotcapturedstacks([optional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean...
... asubsession, in boolean aclear); vo
id sethistogramrecordingenabled(in acstring
id, in boolean enabled); vo
id asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); vo
id scalaradd(in acstring aname, in jsval avalue); vo
id scalarset(in acstring aname, in jsval avalue); vo
id scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [optional] in boolean aclear); vo
id keyedscalaradd(in acstring aname, in astring akey, in jsval avalue); vo
id keyedscalarset(in acstring aname, in astring akey, in jsval avalue); vo
id keyedscalarsetmaximum(in acstring aname, in astring akey, in jsval avalue); jsval snapshotkeyedscalar...
...And 7 more matches
nsITimer
you may also re-initialize (using one of the initialization methods) an existing instance to avo
id the overhead of destroying and creating a timer.
... xpcom/threads/nsitimer.
idlscriptable please add a summary to this article.
... method overview vo
id cancel(); vo
id init(in nsiobserver aobserver, in unsigned long adelay, in unsigned long atype); vo
id initwithcallback(in nsitimercallback acallback, in unsigned long adelay, in unsigned long atype); vo
id initwithfunccallback(in nstimercallbackfunc acallback, in vo
idptr aclosure, in unsigned long adelay, in unsigned long atype); native code only!
...And 7 more matches
nsITransactionManager
editor/txmgr/
idl/nsitransactionmanager.
idlscriptable this interface is implemented by an object that wants to manage/track transactions.
... inherits from: nsisupports last changed in gecko 1.7 method overview vo
id addlistener(in nsitransactionlistener alistener); vo
id beginbatch(); vo
id clear(); vo
id dotransaction(in nsitransaction atransaction); vo
id endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); vo
id redotransaction(); vo
id removelistener(in nsitransactionlistener alistener); vo
id undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any time.
...vo
id addlistener( in nsitransactionlistener alistener ); parameters alistener the nsitransactionlistener to add.
...And 7 more matches
HTMLMediaElement.onencrypted - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-bas...
...eline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-s...
...ize="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="#d4dde...
...And 7 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
by introducing queuemicrotask(), the quirks that arise when sneaking in using promises to create microtasks can be avo
ided.
...also, creating and destroying promises takes additional overhead both in terms of time and memory that a function which properly enqueues microtasks avo
ids.
...cons
ider code such as this: customelement.prototype.getdata = url => { if (this.cache[url]) { this.data = this.cache[url]; this.dispatchevent(new event("load")); } else { fetch(url).then(result => result.arraybuffer()).then(data => { this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; the problem introduced here is that by u...
...And 7 more matches
Checking when a deadline is due - Web APIs
the main example application we will be referring to in this article is to-do list notifications, a simple to-do list application that stores task titles and deadline times and dates via indexeddb, and then prov
ides users with notifications when deadline dates are reached, via the notification, and vibration apis.
... recording the date information to prov
ide a reasonable user experience on mobile devices, and to cut down on ambiguities, i dec
ided to create an html form with: a text input for entering a title for your to-do list.
... this is the least avo
idable bit of user typing.
...And 7 more matches
Transcoding assets for Media Source Extensions - Web APIs
(optional) if you dec
ide to use dynamic adaptive streaming over http (dash) for adaptive bitrate streaming, you need to transcode your assets into multiple resolutions.
...to install, you'll need to build/compile the application yourself from the prov
ided project files/source files, depending on your os and preferences.
... to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('v
ideo/mp4'); // true mediasource.istypesupported('v
ideo/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
...And 7 more matches
NotificationEvent - Web APIs
notificationevent.action read only returns the string
id of the notification button the user clicked.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetnotificationevent experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes not...
... webview andro
id no support nochrome andro
id full support 42firefox andro
id full support 44opera andro
id full support 37safari ios ?
...And 7 more matches
Using the Payment Request API - Web APIs
the payment request api prov
ides a browser-based method of connecting users and their preferred payment systems and platforms to merchants that they want to pay for goods and services.
... this article is a gu
ide to making use of the payment request api, with examples and suggested best practices.
...this takes two mandatory parameters and one option parameter: methoddata — an object containing information concerning the payment prov
ider, such as what payment methods are supported, etc.
...And 7 more matches
Performance API - Web APIs
the high resolution time standard defines a performance interface that supports client-s
ide latency measurements within applications.
... the performance interfaces are cons
idered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints).
...however, if the browser is unable to prov
ide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.
...And 7 more matches
RTCDtlsTransport - Web APIs
the rtcdtlstransport interface prov
ides access to information about the datagram transport layer security (dtls) transport over which a rtcpeerconnection's rtp and rtcp packets are sent and received by its rtcrtpsender and rtcrtpreceiver objects.
... a dtls transport is also used to prov
ide information about sctp packets transmitted and received by an connection's data channels.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/rtcdtlstransport" target="_top"><rect x="1" y="1" w
idth="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...And 7 more matches
RTCPeerConnection() - Web APIs
syntax pc = new rtcpeerconnection([configuration]); parameters configuration optional an rtcconfiguration dictionary prov
iding options to configure the new connection.
... rtcconfiguration dictionary bundlepolicy optional specifies how to handle negotiation of cand
idates when the remote peer is not compatible with the sdp bundle standard.
...although only one certificate is used by a given connection, prov
iding certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances.
...And 7 more matches
SVGTransform - Web APIs
interface overview also implement none methods vo
id setmatrix(in svgmatrix matrix) vo
id settranslate(in float tx, in float ty) vo
id setscale(in float sx, in float sy) vo
id setrotate(in float angle, in float cx, in float cy) vo
id setskewx(in float angle) vo
id setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix ...
...it is inval
id to attempt to define a new value of this type or to attempt to switch an existing value to this type.
... methods name & arguments return description setmatrix(in svgmatrix matrix) vo
id sets the transform type to svg_transform_matrix, with parameter matrix defining the new transformation.
...And 7 more matches
SourceBuffer - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventta...
...rget</text></a><polyline points="111,25 121,20 121,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" w
idth="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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.
...coded media frames with timestamps within this range will be appended, whereas those outs
ide the range will be filtered out.
...And 7 more matches
Multi-touch interaction - Web APIs
the application described in this gu
ide shows how to use touch events for simple single and multi-touch interactions, the basics needed to build application-specific gestures.
... <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px sol
id black; } #target2 { background: white; border: 1px sol
id black; } #target3 { background: white; border: 1px sol
id black; } #target4 { background: white; border: 1px sol
id black; } </style> global state tpcache is used to cache touch points for processing outs
ide of the event where they were fired.
... function set_handlers(name) { // install event handlers for the given element var el=document.getelementby
id(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("target1"); set_handlers("target2"); set_handlers("target3"); set_handlers("target4"); } move/pinch/zoom handler this function prov
ides very basic support for 2-touch horizontal move/pinch/zoom handling.
...And 7 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
syntax vo
id gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, w
idth, height, depth, format, type, arraybufferview?
... srcdata, optional srcoffset); vo
id gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, w
idth, height, depth, format, type, imagebitmap?
... pixels); vo
id gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, w
idth, height, depth, format, type, imagedata?
...And 7 more matches
Compressed texture formats - Web APIs
the webgl api prov
ides methods to use compressed texture formats.
... these are useful to increase texture detail while limiting the additional v
ideo memory necessary.
... if supported, textures can be stored in a compressed format in v
ideo memory.
...And 7 more matches
Writing WebSocket servers - Web APIs
a websocket server can be written in any server-s
ide programming language that is capable of berkeley sockets, such as c(++), python, php, or server-s
ide javascript.
... this is not a tutorial in any specific language, but serves as a gu
ide to facilitate writing your own server.
...the scope of this gu
ide is to present the minimum knowledge you need to write a websocket server.
...And 7 more matches
Content Security Policy (CSP) - HTTP
csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should cons
ider to be val
id sources of executable scripts.
... mitigating packet sniffing attacks in addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and
ideally, from a security standpoint), a server can specify that all content must be loaded using https.
... a complete data transmission security strategy includes not only enforcing https for data transfer, but also marking all cookies with the secure attribute and prov
iding automatic redirects from http pages to their https counterparts.
...And 7 more matches
Feature-Policy - HTTP
the http feature-policy header prov
ides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document.
... header type response header forb
idden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to.
...the autoplay attribute on <audio> and <v
ideo> elements will be ignored.
...And 7 more matches
Set-Cookie - HTTP
browsers block frontend javascript code from accessing the set cookie header, as required by the fetch spec, which defines set-cookie as a forb
idden response-header name that must be filtered out from any response exposed to frontend code.
... for more information, see the gu
ide on http cookies.
... header type response header forb
idden header name no forb
idden response-header name yes syntax set-cookie: <cookie-name>=<cookie-value> set-cookie: <cookie-name>=<cookie-value>; expires=<date> set-cookie: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie: <cookie-name>=<cookie-value>; path=<path-value> set-cookie: <cookie-name>=<cookie-value>; secure set-cookie: <cookie-name>=<cookie-value>; httponly set-cookie: <cookie-name>=<cookie-value>; samesite=strict set-cookie: <cookie-name>=<cookie-value>; samesite=lax set-cookie: <cookie-name>=<cookie-value>; samesite=none // multiple attributes are also possible, for example: set-cookie: <cookie-name>=<cookie-value>; doma...
...And 7 more matches
Classes - JavaScript
class rectangle { constructor(height, w
idth) { this.height = height; this.w
idth = w
idth; } } hoisting an important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not.
... // unnamed let rectangle = class { constructor(height, w
idth) { this.height = height; this.w
idth = w
idth; } }; console.log(rectangle.name); // output: "rectangle" // named let rectangle = class rectangle2 { constructor(height, w
idth) { this.height = height; this.w
idth = w
idth; } }; console.log(rectangle.name); // output: "rectangle2" note: class expressions are subject to the same hoisting restrictions as described in the class ...
... class rectangle { constructor(height, w
idth) { this.height = height; this.w
idth = w
idth; } // getter get area() { return this.calcarea(); } // method calcarea() { return this.height * this.w
idth; } } const square = new rectangle(10, 10); console.log(square.area); // 100 static methods the static keyword defines a static method for a class.
...And 7 more matches
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
numberingsystem the value prov
ided for this properties in the options argument, if present, or the value requested using the unicode extension key "nu" or filled in as a default.
... notation the value prov
ided for this property in the options argument, if present, or "standard filled in as a default.
... compactdisplay the value prov
ided for this property in the options argument, or "short" filled in as a default.
...And 7 more matches
this - JavaScript
es5 introduced the bind() method to set the value of a function's this regardless of how it's called, and es2015 introduced arrow functions which don't prov
ide their own this binding (it retains the this value of the enclosing lexical context).
... description global context in the global execution context (outs
ide of any function), this refers to the global object whether in strict mode or not.
... function context ins
ide a function, the value of this depends on how the function is called.
...And 7 more matches
Using images in HTML - Web media technologies
in this gu
ide you'll find links to resources that deal with adding images to websites.
...it supports a w
ide range of attributes that control how the image behaves and allows you to add important information like alt text for people who don't see the image.
... <picture> the html <picture> element contains zero or more <source> elements and one <img> element which prov
ides versions of an image for different display/device scenarios.
...And 7 more matches
Optimizing startup performance - Web Performance
it's always a good
idea to take the time to ensure that your app starts up nicely.
... starting up nicely regardless of platform, it's always a good
idea to start up as quickly as possible.
...other than the reasons suggested above, cons
ider the impact of a non-responsive page or user interface.
...And 7 more matches
clip-path - SVG: Scalable Vector Graphics
tation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath
id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" w
idth="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" w
idth="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" w
idth="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic shape on a view-box geometry.
... this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" w
idth="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
...And 7 more matches
clip-rule - SVG: Scalable Vector Graphics
the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path> element that defines the clipping shape: <g> <clippath
id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ...
... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath
id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ...
... /> </g> as a presentation attribute, it also can be used as a property directly ins
ide a css stylesheet usage context categories presentation attribute value nonzero | evenodd | inherit animatable yes normative document svg 1.1 (2nd edition) nonzero see description of fill-rule property.
...And 7 more matches
color-profile - SVG: Scalable Vector Graphics
this differs from auto in that it overr
ides an embedded profile ins
ide an image.
...if a match is found, the corresponding profile overr
ides an embedded profile ins
ide an image.
... if no match is found, then the embedded profile ins
ide the image is used.
...And 7 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path
id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
... \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" w
idth="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 + 40 = 80 top right corner: oldx=40 old...
... + d * oldy + f = 1 * 40 + 3 * 10 + 40 = 110 bottom left corner: oldx=10 oldy=30 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 + 40 = 140 bottom right corner: oldx=40 oldy=30 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 30 + 40 = 170 --> <rect x="10" y="10" w
idth="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
...And 7 more matches
x - SVG: Scalable Vector Graphics
fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" w
idth="60" height="60" /> <rect x="120" y="20" w
idth="60" height="60" /> <rect x="220" y="20" w
idth="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... if there are multiple values, x defines the x coordinate of each indiv
idual glyph from the text.
...d the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with a single value --> <text y="40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50%, 75%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-w
idth: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
...And 7 more matches
y - SVG: Scalable Vector Graphics
fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" w
idth="60" height="60" /> <rect y="120" x="20" w
idth="60" height="60" /> <rect y="220" x="20" w
idth="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... if there are multiple values, y defines the y coordinate of each indiv
idual glyph from the text.
... y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="55%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-w
idth: .5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
...And 7 more matches
<marker> - SVG: Scalable Vector Graphics
markers are attached to shapes using the marker-start, marker-m
id, and marker-end properties.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker
id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerw
idth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker
id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerw
idth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline poin...
...ts="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-m
id="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
...And 7 more matches
nsIScreen
w
idget/nsiscreen.
idlscriptable this interface prov
ides information about a display screen.
...implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screen = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreen); method overview vo
id getavailrect(out long left, out long top, out long w
idth, out long height); vo
id getrect(out long left, out long top, out long w
idth, out long height); vo
id lockminimumbrightness(in unsigned long brightness); vo
id unlockminimumbrightness(in unsigned long brightness); attributes attribute type description colordepth long the screen's color depth; this...
...vo
id getavailrect( out long left, out long top, out long w
idth, out long height ); parameters left the left edge of the available screen rectangle.
...And 6 more matches
nsIScreenManager
w
idget/public/nsiscreenmanager.
idlscriptable this interface lets you get information about the display screen (or screens) attached to the user's computer.
... 66 introduced gecko 0.9.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screenmanager = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreenmanager); method overview nsiscreen screenfornativew
idget( in vo
idptr nativew
idget ); native code only!
... nsiscreen screenforrect( in long left, in long top, in long w
idth, in long height ); attributes attribute type description numberofscreens unsigned long the number of screens on the user's computer.
...And 6 more matches
nsIScriptError2
js/src/xpconnect/
idl/nsiscripterror.
idlscriptable represents javascript errors and warnings for use by the console service; augments nsiscripterror by adding a way to initialize the error with the window
id of the outer window with which the error is associated.
... method overview vo
id initwithwindow
id(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindow
id); attributes attribute type description innerwindow
id unsigned long long the inner window
id with which the error is associated.
... this is zero if the error was initialized by calling nsiscripterror.init() instead of initwithwindow
id().
...And 6 more matches
nsISound
w
idget/public/nsisound.
idlscriptable this interface prov
ides a way to play sounds.
...to use this interface, use: var sound = components.classes["@mozilla.org/sound;1"] .createinstance(components.interfaces.nsisound); method overview vo
id beep(); vo
id init(); vo
id play(in nsiurl aurl); vo
id playeventsound(in unsigned long aevent
id); vo
id playsystemsound(in astring soundalias); constants sound event constants constant value description event_new_mail_received 0 the system receives email.
...vo
id beep(); parameters none.
...And 6 more matches
nsISupportsArray
xpcom/ds/nsisupportsarray.
idlscriptable please add a summary to this article.
... inherits from: nsicollection last changed in gecko 1.7 method overview boolean appendelements(in nsisupportsarray aelements); violates the xpcom interface gu
idelines nsisupportsarray clone(); vo
id compact(); vo
id deleteelementat(in unsigned long aindex); vo
id deletelastelement(in nsisupports aelement); nsisupports elementat(in unsigned long aindex); violates the xpcom interface gu
idelines boolean enumeratebackwards(in nsisupportsarrayenumfunc afunc, in vo
idptr adata); violates the xpcom interface gu
idelines boolean enumerateforwards(in nsisupportsarrayenumfunc afunc, in vo
idptr adata); violates the xpcom interface gu
idelines boolean equals([const] in nsisupportsarray other); violates the xpcom interface gu
idelines long getindexof(in nsisupports apossibleelement); ...
... long getindexofstartingat(in nsisupports apossibleelement, in unsigned long astartindex); long getlastindexof(in nsisupports apossibleelement); long indexof([const] in nsisupports apossibleelement); violates the xpcom interface gu
idelines long indexofstartingat([const] in nsisupports apossibleelement, in unsigned long astartindex); violates the xpcom interface gu
idelines boolean insertelementat(in nsisupports aelement, in unsigned long aindex); violates the xpcom interface gu
idelines boolean insertelementsat(in nsisupportsarray aother, in unsigned long aindex); violates the xpcom interface gu
idelines long lastindexof([const] in nsisupports apossibleelement); violates the xpcom interface gu
idelines boolean moveelement(in long afrom, in long ato); violates the xpcom interface gu...
...And 6 more matches
nsIURLParser
netwerk/base/public/nsiurlparser.
idlscriptable specifies the interface to an url parser that attempts to follow the definitions of rfc 2396.
... inherits from: nsisupports last changed in gecko 1.7 method overview vo
id 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); vo
id parsefilename(in string filename, in long filenamelen, out unsigned long basenamepos, out long basenamelen, out unsigned long extensionpos, out long extensionlen); vo
id parsefilepath(in string filepath, in long filepathlen, out unsigned long directorypos, out long directorylen, out unsigned long basenamepos, out long basenamelen, out unsigned long extensionpos, out long extensionlen); vo
id parsepath(in string path, in long pathlen, 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); vo
id parseserverinfo(in string serverinfo, in long serverinfolen, out unsigned long hostnamepos, out long hostnamelen, out long port); vo
id parseurl(in string spec, in long speclen, out unsigned long schemepos, out long schemelen, out unsigned long authoritypos, out long authoritylen, out unsigned long pathpos, out long pathlen); vo
id 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 which case the length argument should be -1.
...And 6 more matches
nsIUpdatePrompt
toolkit/mozapps/update/nsiupdateservice.
idlscriptable this interface describes an object that can be used to show various update-related notifications to the user.
... 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 vo
id checkforupdates(); vo
id showupdateavailable(in nsiupdate update); vo
id showupdatedownloaded(in nsiupdate update, [optional] in boolean background); vo
id showupdateerror(in nsiupdate update); vo
id showupdatehistory(in ns
idomwindow parent); vo
id showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
... vo
id checkforupdates(); parameters none.
...And 6 more matches
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.
idlscriptable this interface prov
ides access to the event listeners used when uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 inherits from: ns
idomeventtarget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort ns
idomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
... onerror ns
idomeventlistener a javascript function object that gets invoked if the operation fails to complete due to an error.
...And 6 more matches
nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.
idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-transformer;1?type=xslt.
... to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview vo
id clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); vo
id importstylesheet(in ns
idomnode style); vo
id removeparameter(in domstring namespaceuri, in domstring localname); vo
id reset(); vo
id setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); ns
idomdocument transformtodocument(in ns
idomnode source); ns
idomdocumentfragment transformtofragment(in ns
idomnode source, in ns
idomdocument output); methods clearparameters() removes all set parameters from this nsixsltprocessor.
...vo
id clearparameters(); parameters none.
...And 6 more matches
XPCOM reference
this reference describes the interfaces and functions prov
ided by the xpcom library.
... in addition, it details the various helper classes and functions, as well as the components, prov
ided by the xpcom glue library.
...see the xpcom internal string gu
ide for documentation of the internal string api used within the mozilla codebase.
...And 6 more matches
Activity Manager examples
if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivityevent are not sufficient for the activity initiator, activity developers can prov
ide their own components to extend the capabilities.
... if activity developers would like to extend the default ui representation of the activity types, they can prov
ide their own xbl elements for their own activity types.
...ae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-manager;1"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not prov
ided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setpr...
...And 6 more matches
Version, UI, and Status Information - Plugins
vo
id npn_status(npp instance, const char *message); the instance parameter is the current plug-in instance, that is, the one that the status message belongs to.
... vo
id npn_version(int *plugin_major, int *plugin_minor, int *netscape_major, int *netscape_minor); this function returns the plug-in version number in plugin_major, the plug-in point release number in plugin_minor, the browser version number in netscape_major, and the browser point release number in netscape_minor.
... int plugin_major, plugin_minor, netscape_major, netscape_minor; // declare variables to hold version numbers vo
id npn_version( &plugin_major, &plugin_minor, &netscape_major, &netscape_minor ); // find version numbers finding out if a feature exists a plug-in can figure out whether it is running in a version of the browser that supports a particular feature by using version or npvers constants (see version feature constants).
...And 6 more matches
Gecko Plugin API Reference - Plugins
ance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless inval
idating 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 much data the plug-in can accept writing the stream to the p...
... posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in plug-in s
ide plug-in api this chapter describes methods in the plug-in api that are available from the plug-in object.
...for an overview of how these two s
ides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction.
...And 6 more matches
UI Tour - Firefox Developer Tools
there are several context menu options available for indiv
idual files and folders or groups; typically viewed by right-clicking on the item.
... for files, the following context menu options are available: copy source uri copies the full
identifier of the file to the clipboard.
... ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avo
iding stepping into libraries used by your code.
...And 6 more matches
Debugger.Object - Firefox Developer Tools
debugger.object a debugger.object instance represents an object in the debuggee, prov
iding reflection-oriented methods to inspect and modify its referent.
... sp
idermonkey creates exactly one debugger.object instance for each 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), sp
idermonkey presents the same debugger.object instance to the debugger each time.
... while most debugger.object instances are created by sp
idermonkey in the process of exposing debuggee’s behavior and state to the debugger, the debugger can use debugger.object.prototype.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.prototype.copy and debugger.object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee globals.
...And 6 more matches
SVGRectElement - Web APIs
the svgrectelement interface prov
ides access to the properties of <rect> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 6 more matches
SVGTextPathElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="30...
...And 6 more matches
TouchEvent - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" st...
...roke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a ...
...xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" w
idth="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
...And 6 more matches
WebGL2RenderingContext - Web APIs
the webgl2renderingcontext interface prov
ides the opengl es 3.0 rendering context for the drawing surface of an html <canvas> element.
... to get an object of this interface, call getcontext() on a <canvas> element, supplying "webgl2" as the argument: var canvas = document.getelementby
id('mycanvas'); var gl = canvas.getcontext('webgl2'); webgl 2 is an extension to webgl 1.
... webgl2renderingcontext.inval
idateframebuffer() inval
idates the contents of attachments in a framebuffer.
...And 6 more matches
Writing a WebSocket server in C# - Web APIs
you can do it in any server-s
ide language, but to keep things simple and more understandable, i chose microsoft's language.
... it is a good
idea to include the namespace with the using keyword in order to write less.
... here's a barebones server implementation: using system.net.sockets; using system.net; using system; class server { public static vo
id main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstre...
...And 6 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
<div class="controls"> <div class="left"> <div
id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume"
id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { w
idth...
...: 400px; position: relative; vertical-align: m
iddle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { w
idth: 50%; font: 14px "open sans", "luc
ida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: m
iddle; } .right span { vertical-align: m
iddle; } .right input { vertical-align: baseline; } .left { w
idth: 50%; position: absolute; left: 0; display: table-cell; vertical-align: m
iddle; } .left span, .left input { vertical-align: m
iddle; } javascript now let's take a look at the javascript code, a piece at a time.
... gainnode1, gainnode2, and gainnode3 the three gainnode instances which prov
ide the volume levels for each of the three oscillators.
...And 6 more matches
Window.getComputedStyle() - Web APIs
indiv
idual css property values are accessed through apis prov
ided by the object, or by indexing with css property names.
... throws typeerror if the passed object is not an element or the pseudoelt is not a val
id pseudo-element selector or is ::part() or ::slotted().
... note: val
id pseudo-element selector refers to syntactic val
idity, e.g.
...And 6 more matches
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
was the used ssl certificate val
id and what are its details (owner, expiration, certificate authority, etc.)?
... case 13: // sec_error_unknown_issuer, sec(13) case 20: // sec_error_untrusted_issuer, sec(20) case 21: // sec_error_untrusted_cert, sec(21) case 36: // sec_error_ca_cert_inval
id, sec(36) errname = 'securityuntrustedcertificateissuererror'; break; case 90: // sec_error_inadequate_key_usage, sec(90) errname = 'securityinadequatekeyusageerror'; break; case 176: // sec_error_cert_signature_algorithm_disabled, sec(176) errname = 'securitycertificatesignaturealgorithmdisablederror'; break; defa...
...on mozilla-central we want a proper tcperror that
ideally // sub-classes domerror.
...And 6 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
in any case, multiplying the recommended resolution as
identified by the xrsession by this value will result in the actual native resolution of the xr hardware.
... the recommended webgl frame buffer resolution is the best possible estimate of the resolution necessary to contain all of fthe xrviews needed by the device while at the same time prov
iding typical applications an acceptable balance of image quality and performance.
... for example, cons
ider a device which uses a 2560x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, s
ide by s
ide each at a resolution of 1280x1440 pixels).
...And 6 more matches
Using the group role - Accessibility
the group role is used to
identify a set of user interface objects which, in contrast with a region, are not intended to be included in a table of contents or a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be cons
idered a major perceivable section on a page.
... a group should be used to form a logical collection of items with related functionality, such as children in a tree w
idget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory.
... proper handling of a group by assistive technologies is determined by the context in which it is prov
ided.
...And 6 more matches
ARIA: timer role - Accessibility
<div role="timer"
id="eggtimer">0</div> this defines this div element as a timer with no remaining time.
... associated wai-aria roles, states, and properties aria-label used to prov
ide the name of the timer.
... aria-describedby used to indicate the
idref of an element that contains additional instructions for navigating or operating this element.
...And 6 more matches
ARIA: contentinfo role - Accessibility
the contentinfo landmark role is used to
identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements.
...using the <footer> element instead is recommended: <footer> <h2>footer</h2> <!-- footer content --> </footer> description the contentinfo role is a landmark used to
identify a page footer.
... landmarks can be used by assistive technology to quickly
identify and navigate to large sections of the document.
...And 6 more matches
:checked - CSS: Cascading Style Sheets
/* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px sol
id blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... syntax :checked examples basic example html <div> <input type="radio" name="my-input"
id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input"
id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox"
id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select"
id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when ...
...checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a h
idden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
...And 6 more matches
prefix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-
ident>.
... formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-
ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <
id-selector> )<paint()> = paint( <
ident>, <declaration-value>?
...And 6 more matches
suffix - CSS: Cascading Style Sheets
it may be a <string>, <image>, or <custom-
ident>.
..." (full stop followed by a space)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-
ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <
id-selector> )<paint()> = paint( <
ident>, <declaration-value>?
...And 6 more matches
Document.cookie - Web APIs
note that each key and value may be surrounded by whitespace (space and tab characters): in fact, rfc 6265 mandates a single space after each semicolon, but some user agents may not ab
ide by this.
...cons
ider also that: any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator: ;path=path (e.g., '/', '/mydir') if not specified, defaults to the current path of the current document location.
... when user privacy is a concern, it's important that any web app implementation inval
idate cookie data after a certain timeout instead of relying on the browser to do it.
...And 5 more matches
Element.getBoundingClientRect() - Web APIs
the element's size is equal to its w
idth/height + padding + border-w
idth in the case that the standard box model is being used, or w
idth/height only if box-sizing: border-box has been set on it.
...the result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, w
idth, and height properties describing the overall border-box in pixels.
... properties other than w
idth and height are relative to the top-left of the viewport.
...And 5 more matches
FederatedCredential.protocol - Web APIs
the protocol property of the federatedcredential interface returns a read-only domstring containing a credential's federated
identity protocol.
... if this property is null, the protocol may be inferred from the federatedcredential.prov
ider property.
... syntax var protocol = federatedcredential.protocol value a domstring containing a credential's federated
identity protocol (e.g.
...And 5 more matches
FetchEvent.respondWith() - Web APIs
the respondwith() method of fetchevent prevents the browser's default fetch handling, and allows you to prov
ide a promise for a response yourself.
... in most cases you can prov
ide any response that the receiver understands.
... specifying the final url of a resource from firefox 59 onwards, when a service worker prov
ides a response to fetchevent.respondwith(), the response.url value will be propagated to the intercepted network request as the final resolved url.
...And 5 more matches
FileEntrySync - Web APIs
this specification is more or less abandoned as it d
idn't get significant traction among browser makers.
... vo
id createwriter ( ) raises (fileexception); parameter none.
... inval
id_state_err the file is no longer val
id for some reason other than it having been deleted.
...And 5 more matches
FontFaceSetLoadEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfontfacesetloadevent experimentalchrome full support 35edge full support ≤79firefox full support yesie ?
... webview andro
id no support nochrome andro
id full support 35firefox andro
id full support yesopera andro
id full support 22safari ios ?
... samsung internet andro
id full support 3.0fontfacesetloadevent() constructor experimentalchrome full support 57edge full support ≤79firefox ?
...And 5 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
this can happen, for example, when the animation-name is changed such that the animation is removed, or when the animating node is h
idden—either directly or because any of its containing nodes are h
idden—using css.
... example html <div class="main"> <div
id="box" onanimationcancel="handlecancelevent(event);"> <div
id="text">box</div> </div> </div> <div class="button"
id="togglebox"> h
ide the box </div> <pre
id="log"></pre> css :root { --boxw
idth: 50px; } .main { w
idth: 300px; height: 300px; border: 1px sol
id black; } .button { cursor: pointer; w
idth: 300px; border: 1px sol
id black; font-size: 16px; text-align: center...
...; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { w
idth: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "luc
ida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
...And 5 more matches
HTMLAnchorElement - Web APIs
the htmlanchorelement interface represents hyperlink elements and prov
ides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements.
... this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fi...
...ll="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignme...
...And 5 more matches
HTMLAreaElement - Web APIs
the htmlareaelement interface prov
ides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 5 more matches
HTMLImageElement.height - Web APIs
example in this example, two different sizes are prov
ided for an image of a clock using the srcset attribute.
... one is 200px w
ide and the other is 400px w
ide.
... further, the sizes attribute is prov
ided to specify the w
idth at which the image should be drawn given the viewport's w
idth.
...And 5 more matches
HTMLImageElement.longDesc - Web APIs
this can be used to prov
ide optional added details beyond the short description prov
ided in the title attribute.
...the longdesc property could be used to prov
ide an explanation of the flow of control represented by the chart, using only text.
...instead of using longdesc to prov
ide a link to a detailed description of an image, encapsulate the image within a link using the <a> element.
...And 5 more matches
HTMLImageElement.naturalHeight - Web APIs
this is the height the image is if drawn with nothing constraining its height; if you don't specify a height for the image, or place the image ins
ide a container that either limits or expressly specifies the image height, it will be rendered this tall.
... 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 which is placed ins
ide a <div>.
... css .box { w
idth: 200px; height: 200px; } .image { w
idth: 100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px w
ide, and the image will be drawn to fill its w
idth (100%).
...And 5 more matches
HTMLKeygenElement - Web APIs
the <keygen> elements expose the htmlkeygenelement interface, which prov
ides 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.
... val
idationmessage read only is a domstring representing a localized message that describes the val
idation constraints that the control does not satisfy (if any).
... this is the empty string if the control is not a cand
idate for constraint val
idation (willval
idate is false), or it satisfies its constraints.
...And 5 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t...
...ext-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px"...
... /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 5 more matches
HTMLMediaElement.srcObject - Web APIs
until other browsers catch up, for mediasource, blob and file, cons
ider falling back to creating a url with url.createobjecturl() and assign it to htmlmediaelement.src.
... examples basic example in this example, a mediastream from a camera is assigned to a newly-created <v
ideo> element.
... const mediastream = await navigator.mediadevices.getusermedia({v
ideo: true}); const v
ideo = document.createelement('v
ideo'); v
ideo.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <v
ideo> element.
...And 5 more matches
RTCRtpSendParameters.encodings - Web APIs
the rtcrtpsendparameters dictionary's encodings property is an rtcrtpencodingparameters object prov
iding configuration settings for the encoder being used for the rtcrtpsender's track.
... syntax sendparameters.encodings = encodingparameterlist; encodingparameterlist = sendparameters.encodings; value an array of objects conforming to the rtcrtpencodingparameters dictionary, each of which contains properties which prov
ide settings and parameters that describe and configure a single codec that could be used to encode the track.
... r
id a domstring which, if set, specifies an rtp stream
id (r
id) to be sent using the r
id header extension.
...And 5 more matches
RTCRtpSender.replaceTrack() - Web APIs
the new track must be of the same media kind (audio, v
ideo, etc) and switching the track should not require negotiation.
... exceptions if the returned promise is rejected, one of the following exceptions is prov
ided to the rejection handler: inval
idmodificationerror replacing the rtcrtpsender's current track with the new one would require negotiation.
... inval
idstateerror the track on which this method was called is stopped rather than running.
...And 5 more matches
RTCRtpStreamStats.pliCount - Web APIs
a pli packet indicates that some amount of encoded v
ideo data has been lost for one or more frames.
... a pli message is used by v
ideo decoders (running on the receiving end of the stream) to notify the encoder (the sender) that an undefined amount of coded v
ideo data, which may span frame boundaries, has been lost.
...however, the primary purpose of this message is to allow the sender to cons
ider techniques to mitigate network performance issues.
...And 5 more matches
RTCRtpStreamStats.qpSum - Web APIs
the qpsum property of the rtcrtpstreamstats dictionary is a value generated by adding the quantization parameter (qp) values for every frame sent or received to date on the v
ideo track corresponding to this rtcrtpstreamstats object.
... in general, the higher this number is, the more heavily compressed the v
ideo data is.
... note: this value is only available for v
ideo media.
...And 5 more matches
SVGAnimatedPoints - Web APIs
interface overview also implement none methods none properties readonly svgpointlist points readonly svgpointlist animatedpoints normative document svg 1.1 (2nd edition) properties name type description points svgpointlist prov
ides access to the base (i.e., static) contents of the points attribute.
... animatedpoints svgpointlist prov
ides access to the current animated contents of the points attribute.
... methods the svganimatedpoints interface do not prov
ide any specific methods.
...And 5 more matches
SVGDocument - Web APIs
normative document svg 1.1 (2nd edition) properties name type description domain domstring the domain name of the server that served the document, or a null string if the server cannot be
identified by a domain name.
... methods the svgdocument interface does not prov
ide any specific methods.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari andro
id webview chrome for andro
id firefox for andro
id opera for andro
id safari on ios samsung internet svgdocument chrome ?
...And 5 more matches
SVGEllipseElement - Web APIs
the svgellipseelement interface prov
ides access to the properties of <ellipse> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 5 more matches
SVGGeometryElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline=...
..."m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="1...
...2px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"/><lin...
...And 5 more matches
SVGPathSeg - Web APIs
it is inval
id to attempt to define a new value of this type or to attempt to switch an existing value to this type.
... methods the svgpathseg interface does not prov
ide any specific methods.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari andro
id webview chrome for andro
id firefox for andro
id opera for andro
id safari on ios samsung internet svgpathseg chrome ?
...And 5 more matches
SVGPathSegList - Web APIs
interface overview also implement none methods vo
id clear() svgpathseg initialize(in svgpathseg newitem) svgpathseg getitem(in unsigned long index) svgpathseg insertitembefore(in svgpathseg newitem, in unsigned long index) svgpathseg replaceitem(in svgpathseg newitem, in unsigned long index) svgpathseg removeitem(in unsigned long index) svgpathseg appenditem(in svgpathseg newitem) properties readonly unsigned long nu...
... methods clear() vo
id clears all existing current items from the list, with the result being an empty list.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari andro
id webview chrome for andro
id firefox for andro
id opera for andro
id safari on ios samsung internet svgpathseglist chrome ?
...And 5 more matches
SVGPointList - Web APIs
interface overview also implement none methods vo
id clear() svgpoint initialize(in svgpoint newitem) svgpoint getitem(in unsigned long index) svgpoint insertitembefore(in svgpoint newitem, in unsigned long index) svgpoint replaceitem(in svgpoint newitem, in unsigned long index) svgpoint removeitem(in unsigned long index) svgpoint appenditem(in svgpoint newitem) ...
... methods name & arguments return description clear() vo
id clears all existing current items from the list, with the result being an empty list.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari andro
id webview chrome for andro
id firefox for andro
id opera for andro
id safari on ios samsung internet svgpointlist chrome ?
...And 5 more matches
SVGTSpanElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" strok...
...e="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points=...
..."341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" w
idth="180" height...
...And 5 more matches
SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position indiv
idual text glyphs.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121"...
... y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">elem...
...And 5 more matches
SVGUseElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="mi...
...ddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 5 more matches
ScreenOrientation - Web APIs
the screenorientation interface of the the screen orientation api prov
ides information about the current orientation of the document.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support 43ie no support noopera full supp...
...ort 25safari no support nowebview andro
id full support 38chrome andro
id full support 38firefox andro
id full support 43opera andro
id full support 25safari ios no support nosamsung internet andro
id full support 3.0anglechrome full support 38edge full support 79firefox full support 43ie no support ...
...And 5 more matches
Testopia
this is not an trivial task, it takes time (it started in august 2014), and we dec
ided that it was not a good
idea to release half-baked code which still needs testing to make sure we d
idn'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 machine, you can dec
ide to pull the code from the git repository.
...though all attempts have been made to prov
ide continuing support for positional parameters, please be aware that some api calls may fail until you make this change.
...And 4 more matches
Creating Sandboxed HTTP Connections
// request was successfull this.mcallbackfunc(this.mdata); } else { // request failed this.mcallbackfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (ai
id) { try { return this.queryinterface(ai
id); } catch (e) { throw components.results.ns_nointerface; } }, // nsiprogresseventsink (not implementing will cause annoying exceptions) onprogress : function (arequest, acontext, aprogress, aprogressmax) { }, onstatus : function (arequest, acontext, astatus, astatusarg) { }, // nsihttpeventsink (not implementing will cau...
...se annoying exceptions) onredirect : function (aoldchannel, anewchannel) { }, // we are faking an xpcom interface, so we need to implement qi queryinterface : function(ai
id) { if (ai
id.equals(components.interfaces.nsisupports) || ai
id.equals(components.interfaces.nsiinterfacerequestor) || ai
id.equals(components.interfaces.nsichanneleventsink) || ai
id.equals(components.interfaces.nsiprogresseventsink) || ai
id.equals(components.interfaces.nsihttpeventsink) || ai
id.equals(components.interfaces.nsistreamlistener)) return this; throw components.results.ns_nointerface; } }; quick note: storing the channel in a global (especially in an extension) isn't a good
idea, but was done to make the code easier to read.
... it would be better to have the entire implementation ins
ide a class and storing the channel as a member: function myclass() { this.mchannel = null; // ...
...And 4 more matches
Makefile - variables
xp
idl_module module name to use when generating .xpt files, default to module.
... xp
idlsrcs internal: a list of .
idl files to generate exported headers from.
... xp
idl_name name of extension to build see also configure.sh variables description build_project_arg command line/environment overr
ide configure_env_args command line/environment overr
ide directory variable dirs a list of subdirectories to build recursively.
...And 4 more matches
Installing headers using EXPORTS
public headers and
idl files are copied during the export phase of the build.
... this is accomplished by setting make variables telling the build system which module the headers are for (since headers are organized by module under <tt>dist/include</tt>), and which headers need to be created from
idl files by xp
idl.
...for xp
idl-generated headers, you should set xp
idlsrcs to the list of
idl files to export.
...And 4 more matches
Limitations of chrome scripts
for each pattern we've noted: whether a shim exists and what kind of behavior it prov
ides how to update your add-on so you don't need the shim gbrowser.contentwindow, window.content...
... without the shim all apis in the chrome process that prov
ide direct access to content objects will no longer work.
... limitations of cpows cross process object wrappers (cpows) are a migration a
id giving chrome code synchronous access to content objects.
...And 4 more matches
Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images ins
ide table cells.
... triggering "almost standards" the doctypes that will trigger "almost standards" mode are those which contain: the public
identifier "-//w3c//dtd xhtml 1.0 transitional//en" the public
identifier "-//w3c//dtd xhtml 1.0 frameset//en" the public
identifier "-//w3c//dtd html 4.01 transitional//en", with a system
identifier the public
identifier "-//w3c//dtd html 4.01 frameset//en", with a system
identifier the ibm system doctype "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" a complete doctype contains...
... a public
identifier and a system
identifier.
...And 4 more matches
Geckoview-Junit Tests
the geckoview-junit tests are on-device andro
id junit tests written for geckoview.
... these tests run on an andro
id device, controlled by a host (typically linux) using mozdevice (adb).
... in automation, tests normally run in an andro
id emulator.
...And 4 more matches
How to Report a Hung Firefox
what information to include in a bug report as usual, following bug writing gu
idelines will make your report much more likely to lead to a fix in firefox.
... check the cpu usage of the firefox process(es): is it
idle, using 100% of a core (which may show up as 50%, 25% in your monitoring tool if you have a multi-core processor) or neither?
...if you suspect a hang (as opposed to slow performance), wait one minute on an
idle system before getting the stack trace.
...And 4 more matches
Introduction to Layout in Mozilla
om frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame w
idget native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, w
idgets presentation has media type, dimensions, etc.
...ion reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes ns
idlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload.
...parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and fixup occurs here insertchildat, appendchildto, removechildat frame construction content sink uses ns
idocument interface to notify of Δs in content model contentappended, contentinserted, contentremoved presshell is registered as document observer receives contentappended, etc.
...And 4 more matches
JavaScript Tips
xul tips when inserting code with an xul overlay, wrap functions and variables ins
ide an object with a unique name to avo
id conflicting with existing or future function and variable names.
...however, in javascript this is quite simple even in the case of a weak reference which in c++ requires a helper class: var weakobserver = { queryinterface: function queryinterface(ai
id) { if (ai
id.equals(components.interfaces.nsiobserver) || ai
id.equals(components.interfaces.nsisupportsweakreference) || ai
id.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; }, observe: function observe(asubject, atopic, astate) { } } when declaring xpcom methods, try to use the same names for method paramete...
...the properties are: align allowevents contextmenu datasources dir flex height
id left maxheight maxw
idth minheight minw
idth observes orient pack persist ref statustext top tooltip tooltiptext w
idth xul also maps the ordinal attribute but this defaults to "1" if it is not present.
...And 4 more matches
UpdateListener
for each indiv
idual update check, the following methods will be called on the listener: either oncompatibilityupdateavailable() or onnocompatibilityupdateavailable(), depending on whether compatibility information for the requested application version was seen.
... method overview vo
id oncompatibilityupdateavailable(in addon addon) vo
id onnocompatibilityupdateavailable(in addon addon) vo
id onupdateavailable(in addon addon, in addoninstall install) vo
id onnoupdateavailable(in addon addon) vo
id onupdatefinished(in addon addon, in integer error) methods oncompatibilityupdateavailable() called when the update check found compatibility information for the application and platform version that the update check was being performed for.
... vo
id oncompatibilityupdateavailable( in addon addon ) parameters addon the addon that was being checked for updates onnocompatibilityupdateavailable() called when the update check found no new compatibility information for the application and platform version that the update check was being performed for.
...And 4 more matches
Downloads.jsm
the downloads.jsm javascript code module prov
ides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration.
... to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<vo
id> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
... promise<download> createdownload( object aproperties ); parameters aproperties prov
ides the initial properties for the newly created download.
...And 4 more matches
FileUtils.jsm
string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutputstream opensafefileoutputstream(nsifile file, int modeflags); vo
id closeatomicfileoutputstream(nsifileoutputstream stream); vo
id closesafefileoutputstream(nsifileoutputstream stream); constants constant value description mode_rdonly 0x01 corresponds to the pr_rdonly parameter to pr_open mode_wronly 0x02 corresponds to the pr_wronly parameter to pr_open mode_create 0x08 corresponds to th...
... perms_directory 0755 default permissions when creating directories methods getfile() gets a file at the specified hierarchy under a ns
idirectoryservice key.
... nsifile getfile( string key, array patharray, bool followlinks ); parameters key the ns
idirectoryservice key to start from (see getting special files for more info) patharray an array of path components to locate beneath the directory specified by key.
...And 4 more matches
Examples
sage: components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { return 'i d
idnt do a promise.resolve so this will not understand that mypromise is a promise'; } // creates this error: /* exception: mypromise.then is not a function @scratchpad/5:8:1 wca_evalwithdebugger@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webconsole.js:1069:7 wca_onevaluatejs@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/mo...
... deferred.reject(ex); } // we don't return the deferred to the caller, but only the contained // promise, so that the caller cannot acc
identally change its state.
...vicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the w
idth of this image is = "' + this.naturalw
idth + '".'); if (!this.naturalw
idth) { loadthisimagepromise.reject('image loaded but it has 0 w
idth at path = "' + path + '" the naturalw
idth was 0'); } } myimage.onerror = function(e) { loadthisimagepromise.reject('an error occured while loading path = "' + path + '".
...And 4 more matches
Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savew
idgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(a
id, aispreinstalled) updateofflinecacheforapp: function(a
id) installpreinstalledapp: function installpreinstalledapp(a
id) removeifhttpsduplicate: function(a
id) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(a
id, aorigin, amanifesturl, aman...
...activitiestoregister: function(amanifest, aapp, aentrypoint, arunupdate) _registeractivitiesforapps: function(aappstoregister, arunupdate) _registeractivities: function(amanifest, aapp, arunupdate) _createactivitiestounregister: function(amanifest, aapp, aentrypoint) _unregisteractivitiesforapps: function(aappstounregister) _unregisteractivities: function(amanifest, aapp) _processmanifestfor
ids: function(a
ids, arunupdate) observe: function(asubject, atopic, adata) addmessagelistener: function(amsgnames, aapp, amm) removemessagelistener: function(amsgnames, amm) formatmessage: function(adata) receivemessage: function(amessage) getappinfo: function getappinfo(aapp
id) broadcastmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregis...
...terupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azippath) _getappdir: function(a
id) _writefile: function(apath, adata) dogetlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaunch: function (adata, amm) launch: function launch(amanifesturl, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifesturl, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpack...
...And 4 more matches
NSS 3.24 release notes
new functionality nss softoken has been updated with the latest national institute of standards and technology (nist) gu
idance (as of 2015): software integrity checks and post functions are executed on shared library load.
... nss softoken uses new gu
idance for how many rabin-miller tests are needed to verify a prime based on prime size.
...the caller is no longer required to use sslkeatype explicitly to select a "slot" into which the certificate is configured (which incorrectly
identifies a key agreement type rather than a certificate).
...And 4 more matches
NSS 3.31 release notes
in pk11pub.h pk11_findcertfromuri - find a certificate
identified by the given uri.
... pk11_findcertsfromuri - find a list of certificates
identified by the given uri.
... notable changes in nss 3.31 the apis that set a tls version range have been changed to trim the requested range to the overlap with a systemw
ide crypto policy, if configured.
...And 4 more matches
Utilities for nss samples
enum { pw_none = 0, /* no password */ pw_fromfile = 1, /* password stored in a file */ pw_plaintext = 2 /* plain-text password passed in buffer */ /* pw_external = 3 */ } source; char *data; /* depending on source this can be the actual * password or the file to read it from */ } secupwdata; /* * printasascii */ extern vo
id printasascii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern vo
id printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* * getdigit */ extern int getdigit(char c); /* * hextobuf */ extern int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, p...
...in the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ extern char * filepasswd(pk11slotinfo * slot, prbool retry, vo
id *arg); /* * getmodulepassword */ extern char * getmodulepassword(pk11slotinfo *slot, int retry, vo
id *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, int rsize); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoise...
... */ /* * newline */ static vo
id newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printasascii */ vo
id 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 */ vo
id printashex(prfiledesc*...
...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 <seco
id.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; seco
idtag o
id; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_o
id_md2 }, { "md5", sec_o
id_md5 }, { "sha1", sec_o
id_sha1 }, { "sha256", sec_o
id_sha256 }, { "sha384", sec_o
id_sha384 }, { "sha512", sec_o
id_sha512 } }; /* maps a hash name to a seco
idtag.
... * returns null if the name is not a supported algorithm */ static seco
idtag hashnametoo
idtag(const char *hashname) { int i, nhashes = sizeof(hash_names); seco
idtag hashtag = sec_o
id_unknown; for (i = 0; i < nhashes; i++) { if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].o
id; break; } } return hashtag; } /* newline */ static vo
id newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* printashex */ vo
id 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; ...
...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 vo
id 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++) { f...
...And 4 more matches
nss tech note5
some of the digest algorithm
identifiers are (without the sec_o
id_ prefix) : md2, md5, sha1, sha256, sha384, sha512.
... pk11context* digestcontext = pk11_createdigestcontext(sec_o
id_md5); <big>digest the data</big> <big>secstatus s = pk11_digestbegin(digestcontext); s = pk11_digestop(digestcontext, data, sizeof data); s = pk11_digestfinal(digestcontext, digest, &len, sizeof digest); /* now, digest contains the 'digest', and len contains the length of the digest */</big> clean up pk11_destroycontext(digestcontext, pr_true); you can also look at a sample program illustrating this hash / digest with secret key included include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a digest mechanism.
...the param must be prov
ided, but can be empty.
...And 4 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
it is designed to permit a server to detect a man-in-the-m
iddle that is altering the ssl client hello (connection) requests as they pass from the client to the server, altering them by changing the protocol version number to a lower version number.
...normally the servers which have this problem are not equipped to deal with the tls protocol, but instead of rolling back to ssl 3.0 as the rollback provision prov
ides, they terminate/drop the connection, thus resulting in most cases a blank page display.
... users: how to avo
id this problem?
...And 4 more matches
FOSS
feel free to add your own sp
idermonkey-based open source projects (and if necessary add categories)!
... wrappers / bindings c++ cocos2d-js - cocos2d-js is a cross-platform game engine which embeds sp
idermonkey, prov
iding the same api for both web and native platforms.
... flusspferd - (newer) c++ bindings libjspp - c++ template based library for extending & embedding sp
idermonkey; works with sp
idermonkey 1.8.5 and above, has lots of goodies sp
iderape - the oldest c++ bindings for sp
idermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds sp
idermonkey, using javascript to implement logic behind its gui, supporting calls from javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs - javascript bindings to gnome (broadly, to any library using the gobject introspection mechanism) objective caml http://alain.frisch.fr/soft.html#sp
ider - bindings to embed sp
idermonkey in ocaml applications perl http://jspl.msg.mx/ - bindings to cross-embed sp
idermonkey and perl.
...And 4 more matches
JSAPI Cookbook
this article shows the jsapi equivalent for a tiny handful of common javascript
idioms.
... note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using sp
idermonkey and jsapi.
... */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setint32(23); return true; returning a floating-point number // javascript return 3.14159; /* jsapi */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setdouble(3.14159); exception handling throw the most common
idiom is to create a new error object and throw that.
...And 4 more matches
JS::CompileOptions
this article covers features introduced in sp
idermonkey 17 compile options classes.
... constructor js::readonlycompileoptions(); // added in sp
idermonkey 31 js::owningcompileoptions(jscontext *cx); // added in sp
idermonkey 31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... source belongs to a dom element if it was assigned to one of the element's event handler
idl attributes as a string.
...And 4 more matches
JSObjectOps.getProperty
try to avo
id using it.
...this documentation should be cons
idered sp
idermonkey internals documentation, not api documentation.
... each of these callbacks is responsible for everything involved with an indiv
idual 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.
...And 4 more matches
JS_AddFinalizeCallback
this article covers features introduced in sp
idermonkey 17 add/remove callback function for finalization.
... syntax bool js_addfinalizecallback(jsruntime *rt, jsfinalizecallback cb, vo
id *data); // added in sp
idermonkey 38 (jsapi 32) vo
id js_removefinalizecallback(jsruntime *rt, jsfinalizecallback cb); // added in sp
idermonkey 38 (jsapi 32) vo
id js_setfinalizecallback(jsruntime *rt, jsfinalizecallback cb); // obsolete since jsapi 32 name type description rt jsruntime * the jsruntime for which to set the finalization callback.
... data vo
id * passed to data parameter for jsfinalizecallback.
...And 4 more matches
JS_ClearContextThread
try to avo
id using it.
... so the usual code for using a jscontext on a thread other than the one where it was created looks like this: vo
id mythread(jscontext *cx) { js_setcontextthread(cx); /* note: outs
ide the request */ js_beginrequest(cx); ...
... js_endrequest(cx); js_clearcontextthread(cx); /* note: outs
ide the request */ } js_setcontextthread ties cx to the current thread for exclusive use.
...And 4 more matches
JS_DefineProperty
6_t *name, size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); // ---- added in sp
idermonkey 45 ---- bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, js::handle<jspropertydescriptor> desc, js::objectopresult &result); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext *cx, js::...
...handleobject obj, const char16_t *name, size_t namelen, js::handle<jspropertydescriptor> desc); // ---- added in sp
idermonkey 1.8.1 ---- bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative ...
...setter = nullptr); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id id, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); name type description cx jscontext * the context in which to define the property.
...And 4 more matches
JS_DeleteProperty
syntax bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name); bool js_deletepropertyby
id(jscontext *cx, js::handleobject obj, js
id id); // added in sp
idermonkey 1.8.1 // added in sp
idermonkey 45 bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name, js::objectopresult &result); bool js_deletepropertyby
id(jscontext *cx, js::handleobject obj, js::handle
id 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 which to derive runtime...
... name or
id const char * or js
id or const char16_t * name of the property to delete.
...js_deletepropertyby
id is the same but takes a js
id for the property name.
...And 4 more matches
JS_DeleteProperty2
try to avo
id using it.
... 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_deletepropertyby
id2(jscontext *cx, js::handleobject obj, js::handle
id id, bool *succeeded); // added in sp
idermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information.
... name or
id const char * or const char16_t or js::handle
id name of the property to delete.
...And 4 more matches
FileSystemFileEntry - Web APIs
ins
ide the success callback, event handlers are set up to handle the error error and writeend events.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfilesystemfileentrychrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: fileentryedge full support 79prefixed ...
... full support 79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1webview andro
id full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: fileentrychrome andro
id full support 18alternate name full support 18alternate name alternate name uses the non-standard...
...And 4 more matches
Using the Geolocation API - Web APIs
you can optionally prov
ide a second callback function to be executed if an error occurs.
...the callback function is called multiple times, allowing the browser to either update your location as you move, or prov
ide a more accurate location as different techniques are used to geolocate you.
... const watch
id = navigator.geolocation.watchposition((position) => { dosomething(position.coords.latitude, position.coords.longitude); }); the watchposition() method returns an
id number that can be used to uniquely
identify the requested position watcher; you use this value in tandem with the clearwatch() method to stop watching the user's location.
...And 4 more matches
Geolocation API - Web APIs
the geolocation api allows the user to prov
ide their location to web applications if they so desire.
... in both cases, the method call takes up to three arguments: a mandatory success callback: if the location retrieval is successful, the callback executes with a geolocationposition object as its only parameter, prov
iding access to the location data.
... an optional error callback: if the location retrieval is unsuccessful, the callback executes with a geolocationpositionerror object as its only parameter, prov
iding access information on what went wrong.
...And 4 more matches
GlobalEventHandlers.onanimationend - Web APIs
example html content <div class="main"> <div
id="box"> <div
id="text">box</div> </div> </div> <div class="button"
id="play"> play animation </div> <pre
id="log"></pre> css content :root { --boxw
idth:50px; } .main { w
idth: 300px; height:300px; border: 1px sol
id black; } .button { cursor: pointer; w
idth: 300px; border: 1px sol
id black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; p...
...adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { w
idth: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "luc
ida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { w
idth: var(--boxw
idth); height: var(--boxw
idth); left: 0; top: 0; border: 1px sol
id #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
...And 4 more matches
GlobalEventHandlers.onanimationstart - Web APIs
example html content <div class="main"> <div
id="box"> <div
id="text">box</div> </div> </div> <div class="button"
id="play"> play animation </div> <pre
id="log"></pre> css content :root { --boxw
idth:50px; } .main { w
idth: 300px; height:300px; border: 1px sol
id black; } .button { cursor: pointer; w
idth: 300px; border: 1px sol
id black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; p...
...adding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { w
idth: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "luc
ida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { w
idth: var(--boxw
idth); height: var(--boxw
idth); left: 0; top: 0; border: 1px sol
id #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
...And 4 more matches
HTMLHRElement - Web APIs
the htmlhrelement interface prov
ides special properties (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 4 more matches
HTMLImageElement.border - Web APIs
the border property or its longhand properties to not only set the thickness of the border but to potentially apply a w
ide variety of other styling options to it.
... the w
idth, specifically, is controlled using the writing-mode aware border-block-start-w
idth, border-block-end-w
idth, border-inline-start-w
idth, and border-inline-end-w
idth properties.
... for compatibility (or perhaps other) reasons, you can use the older properties instead (or in addition): border-top-w
idth, border-right-w
idth, border-bottom-w
idth, and border-left-w
idth.
...And 4 more matches
HTMLImageElement.hspace - Web APIs
the obsolete hspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right s
ides of the <img> element when laying out the page.
... syntax htmlimageelement.hspace = marginw
idth; marginw
idth = htmlimageelement.hspace; value an integer value specifying the w
idth, in pixels, of the horizontal margin to apply to the left and right s
ides of the image.
... usage notes the value specified for hspace is mapped to the margin-left and margin-right properties to specify the w
idth of those margins in pixels.
...And 4 more matches
HTMLImageElement.name - Web APIs
this has been replaced by the
id property available on all elements.
... syntax htmlimageelement.name = namestring; namestring = htmlimageelement.name; value a domstring prov
iding a name by which the image can be referenced.
...since it functions
identically to
id, you can and should use it instead.
...And 4 more matches
HTMLImageElement.useMap - Web APIs
the usemap property on the htmlimageelement interface reflects the value of the html usemap attribute, which is a string prov
iding the name of the client-s
ide image map to apply to the image.
... syntax htmlimageelement.usemap = imagemapanchor; let imagemapanchor = htmlimageelement.usemap; value a usvstring prov
iding the page-local url (that is, a url that begins with the hash or pound symbol, "#") of the <map> element which defines the image map to apply to the image.
... you can learn more about client-s
ide image maps in our learning article add a hitmap on top of an image.
...And 4 more matches
HTMLMediaElement.textTracks - Web APIs
you can detect when tracks are added to and removed from an <audio> or <v
ideo> element using the addtrack and removetrack events.
...the list of tracks can be accessed using array notation, or using the object's gettrackby
id() method.
... each track is represented by a texttrack object which prov
ides information about the track.
...And 4 more matches
KeyframeEffect.setKeyframes() - Web APIs
element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000); offsets for each keyframe can be specified by prov
iding an offset value.
... element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); note: offset values, if prov
ided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order.
... the easing to apply between keyframes can be specified by prov
iding an easing value as illustrated below.
...And 4 more matches
LocalFileSystem - Web APIs
window.requestfilesystem(window.persistent, 1024*1024,oninitfs,errorhandler); method overview vo
id requestfilesystem (in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in optional errorcallback errorcallback); vo
id resolvelocalfilesystemurl (in domstring url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value description temporary 0 transient stora...
... vo
id requestfilesystem( in unsigned short type, in unsigned long long size, in filesystemcallback successcallback, in errorcallback errorcallback ); parameters type the storage type of the file system.
... successcallback the success callback that is called when the browser prov
ides a file system.
...And 4 more matches
Location - Web APIs
anatomy of location html <span
id="href" title="href"><span
id="protocol" title="protocol">http:</span>//<span
id="host" title="host"><span
id="hostname" title="hostname">example.org</span>:<span
id="port" title="port">8888</span></span><span
id="pathname" title="pathname">/foo/bar</span><span
id="search" title="search">?q=baz</span><span
id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; w
idth:100%;} body {display:table-cell; text-align:center; vertical-align:m
iddle;...
... font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em sol
id;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; w
idth:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em sol
id rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][
id]'), function (node) { node.addeventlistener("click", function(e) { e.prev...
...entdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('
id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
...And 4 more matches
MediaDevices.getDisplayMedia() - Web APIs
since getdisplaymedia() requires a v
ideo track, the returned stream will have one even if no v
ideo track is expressly requested by the constraints object.
... return value a promise that resolves to a mediastream containing a v
ideo track whose contents come from a user-selected screen area, as well as an optional audio track.
... inval
idstateerror the call to getdisplaymedia() was not made from code running due to a user action, such as an event handler.
...And 4 more matches
SVGFitToViewBox - Web APIs
methods the svgfittoviewbox interface does not prov
ide any specific methods.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari andro
id webview chrome for andro
id firefox for andro
id opera for andro
id safari on ios samsung internet svgfittoviewbox chrome ?
... webview andro
id ?
...And 4 more matches
SVGForeignObjectElement - Web APIs
the svgforeignobjectelement interface prov
ides access to the properties of <foreignobject> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 4 more matches
SVGGradientElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d...
...4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle...
..." alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/svggradi...
...And 4 more matches
SVGLineElement - Web APIs
the svglineelement interface prov
ides access to the properties of <line> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 4 more matches
SVGMaskElement - Web APIs
the svgmaskelement interface prov
ides access to the properties of <mask> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 4 more matches
SVGPolygonElement - Web APIs
the svgpolygonelement interface prov
ides access to the properties of <polygon> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 4 more matches
SVGPolylineElement - Web APIs
the svgpolylineelement interface prov
ides access to the properties of <polyline> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 4 more matches
SVGTextContentElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53...
..." text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2...
...px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="2...
...And 4 more matches
SVGTextElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text>...
...</a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="6...
...And 4 more matches
Screen - Web APIs
screen.availleft returns the first available pixel available from the left s
ide of the screen.
... screen.availw
idth returns the amount of horizontal space in pixels available to the window.
... screen.left returns the distance in pixels from the left s
ide of the main screen to the left s
ide of the current screen.
...And 4 more matches
Storage API - Web APIs
the storage standard defines a common, shared storage system to be used by all apis and technologies that store content-accessible data for indiv
idual web sites.
...one of the most likely methods—one which the specification specifically encourages, in fact—would be to cons
ider the popularity and/or usage levels of indiv
idual sites to determine what their quotas should be.
... "persistent" the user agent will retain the data as long as possible, clearing all "best-effort" boxes before cons
idering clearing a box marked "persistent".
...And 4 more matches
Streams API - Web APIs
this is something browsers do anyway when receiving assets to be shown on webpages — v
ideos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.
...previously, if we wanted to process a resource of some kind (be it a v
ideo, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received.
... 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-s
ide, without needing to generate a buffer, string, or blob.
...And 4 more matches
SubtleCrypto.unwrapKey() - Web APIs
unwrappedkeyalgo is a dictionary object defining the type of key to unwrap and prov
iding extra algorithm-specific parameters as required.
... for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string
identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm.
... exceptions the promise is rejected when one of the following exceptions is encountered: inval
idaccesserror raised when the unwrapping key is not a key for the requested unwrap algorithm or if the cryptokey.usages value of that key doesn't contain unwrap.
...And 4 more matches
TextEncoder.prototype.encodeInto() - Web APIs
this may be less than string.length if uint8array d
id not have enough space.
...if the behavior of the wasm allocator is unknown, rounduptobucketsize() should be an
identity function.
...that is, on the wasm s
ide you are working with rust strings or a non-zero-terminating c++ class.
...And 4 more matches
TextMetrics - Web APIs
properties textmetrics.w
idth read only is a double giving the calculated w
idth of a segment of inline text in css pixels.
... textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left s
ide of the bounding rectangle of the given text, in css pixels.
... textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right s
ide of the bounding rectangle of the given text, in css pixels.
...And 4 more matches
Using the Frame Timing API - Web APIs
the performanceframetiming interface prov
ides frame timing data about the browser's event loop.
...this data can be used to help
identify areas that take too long to prov
ide a good user experience.
... first, perhaps using the tools will save you is a bit too strong but performance tools can certainly help
identify code that is not conformant to some expected time threshold.
...And 3 more matches
GeolocationCoordinates.longitude - Web APIs
note: the zero mer
idian (also known as the prime mer
idian or the reference mer
idian) is not precisely the same as the greenwhich mer
idian that most people think of.
... it is, instead, the iers reference mer
idian, which is located 5.3 arcseconds (102 meters / 335 feet) east of the greenwich mer
idian.
... let button = document.getelementby
id("get-location"); let lattext = document.getelementby
id("latitude"); let longtext = document.getelementby
id("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); });...
...And 3 more matches
GestureEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetgestureevent non-standardchrome no support noedge no support nofirefox no support noie no support noopera no supp...
...ort nosafari full support 9webview andro
id no support nochrome andro
id no support nofirefox andro
id no support noopera andro
id no support nosafari ios full support 2samsung internet andro
id no support nogestureevent() constructor non-standardchrome no support noedge no support nofirefox no support noie no ...
...support noopera no support nosafari full support 9webview andro
id no support nochrome andro
id no support nofirefox andro
id no support noopera andro
id no support nosafari ios full support 2samsung internet andro
id no support noinitgestureevent non-standardchrome no support noedge no support nofirefox no sup...
...And 3 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div
id="box"> <div
id="text">box</div> </div> </div> <div class="button"
id="play"> begin demonstration </div> css :root { --boxw
idth:50px; } .main { w
idth: 300px; height:300px; border: 1px sol
id black; } .button { cursor: pointer; w
idth: 300px; border: 1px sol
id black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; col...
...or: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { w
idth: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "luc
ida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { w
idth: var(--boxw
idth); height: var(--boxw
idth); left: 0; top: 0; border: 1px sol
id #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused sl
idebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
...And 3 more matches
HTMLBodyElement - Web APIs
the htmlbodyelement interface prov
ides special properties (beyond those inherited from the regular htmlelement interface) for manipulating <body> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLCanvasElement.getContext() - Web APIs
the htmlcanvaselement.getcontext() method returns a drawing context on the canvas, or null if the context
identifier is not supported.
... syntax var ctx = canvas.getcontext(contexttype); var ctx = canvas.getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context
identifier defining the drawing context associated to the canvas.
... "bitmaprenderer" which will create an imagebitmaprenderingcontext which only prov
ides functionality to replace the content of the canvas with a given imagebitmap.
...And 3 more matches
HTMLDialogElement - Web APIs
the htmldialogelement interface prov
ides methods to manipulate <dialog> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg 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" w
idth="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmldialogelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits propert...
...still allowing interaction with content outs
ide of the dialog.
...And 3 more matches
HTMLElement.offsetLeft - Web APIs
for block-level elements, offsettop, offsetleft, offsetw
idth, and offsetheight describe the border box of an element relative to the offsetparent.
... however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its w
idth and height), while offsetw
idth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position).
... therefore, a box with the left, top, w
idth and height of offsetleft, offsettop, offsetw
idth and offsetheight will not be a bounding box for a span with wrapped text.
...And 3 more matches
HTMLEmbedElement - Web APIs
the htmlembedelement interface prov
ides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <embed> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,...
...20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill...
...And 3 more matches
HTMLImageElement.complete - Web APIs
the image is cons
idered completely loaded if any of the following are true: neither the src nor the srcset attribute is specified.
... examples cons
ider a photo library app that prov
ides the ability to open images into a lightbox mode for improved viewing as well as editing of the image.
...while
ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case.
...And 3 more matches
HTMLInputElement.stepUp() - Web APIs
if the value before invoking the stepup() method is inval
id—for example, if it doesn't match the constraints set by the step attribute—invoking the stepup() method will return a value that does match the form controls constraints.
... if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an inval
idstateerror exception is thrown.
... example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5"
id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1"
id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment"
id="thebutton"> javascript /* make the button call the function */ let button = document.getelementby
id('thebutton') button.addeventlistene...
...And 3 more matches
HTMLMapElement - Web APIs
the htmlmapelement interface prov
ides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLMediaElement.setMediaKeys() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetsetmediakeyschrome full support yesedge full support 13firefox full support yesie ?
... webview andro
id ?
... chrome andro
id ?
...And 3 more matches
HTMLOListElement - Web APIs
the htmlolistelement interface prov
ides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating ordered list elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLOrForeignElement.nonce - Web APIs
in later implementations, elements only expose their nonce attribute to scripts (and not to s
ide-channels like css attribute selectors).
... examples retrieving a nonce value in the past, not all browsers supported the nonce
idl attribute, so a workaround is to try to use getattribute as a fallback: let nonce = script['nonce'] || script.getattribute('nonce'); however, recent browsers version h
ide nonce values that are accessed this way (an empty string will be returned).
... the
idl property (script['nonce']) will be the only way to access nonces.
...And 3 more matches
HTMLPreElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-bas...
...eline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-s...
...ize="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="#d4dde...
...And 3 more matches
HTMLProgressElement - Web APIs
the htmlprogresselement interface prov
ides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLTableColElement - Web APIs
the htmltablecolelement interface prov
ides special properties (beyond the htmlelement interface it also has available to it inheritance) for manipulating single or grouped table column elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLTableRowElement - Web APIs
the htmltablerowelement interface prov
ides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLTableSectionElement - Web APIs
the htmltablesectionelement interface prov
ides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLTrackElement - Web APIs
this element can be used as a child of either <audio> or <v
ideo> to specify a text track containing information such as closed captions or subtitles.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
HTMLUListElement - Web APIs
the htmlulistelement interface prov
ides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating unordered list elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 3 more matches
msStereo3DPackingMode - Web APIs
msstereo3dpackingmode is a read/write property which gets or sets the frame-packing mode for stereo 3-d v
ideo content.
... syntax htmlv
ideoelement.msstereo3dpackingmode(topbottom, s
idebys
ide, none); value the following values return, or set, the stereo 3-d content packing as "topbottom", "s
idebys
ide", or "none" for regular 2-d v
ideo.
... none (0): specifies regular 2-d v
ideo.
...And 3 more matches
Recommended Drag Types - Web APIs
to drag multiple links, separate each link ins
ide the text/uri-list data with a crlf linebreak.
... lines that begin with a number sign (#) are comments, and should not be cons
idered urls.
...for convenience, the special type url may be used to refer to the first val
id link within data for the text/uri-list type.
...And 3 more matches
KeyboardEvent.code - Web APIs
examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div
id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px sol
id black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementby
id("output").appendchild(el); },...
... html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon
id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; w
idth: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-w
idth: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
...finally, spaceship is set to refer to the element with the
id "spaceship", which is the svg polygon representing the ship the player controls.
...And 3 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 cons
ideration the state of modifier keys such as shift as well as the keyboard locale and layout.
... if the key cannot be
identified, the returned value is un
identified.
... keyboardevent sequence example cons
ider the event sequence generated when we interact with the shift and the 2 key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout.
...And 3 more matches
LargestContentfulPaint - Web APIs
the largestcontentfulpaint interface of the largest contentful paint api prov
ides details about the largest image or text paint before user input on a web page.
... largestcontentfulpaint.size the intrinsic size of the element returned as the area (w
idth * height).
... largestcontentfulpaint.
id the
id of the element.
...And 3 more matches
MediaError.message - Web APIs
the read-only property mediaerror.message returns a domstring which 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 prov
ided.
... syntax var errormessage = mediaerror.message; value a domstring prov
iding a detailed, specific explanation of what went wrong and possibly how it might be fixed.
... 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 val
id audio file or a missing file to the element's src attribute.
...And 3 more matches
MediaRecorder.onerror - Web APIs
you can prov
ide an event handler to deal with errors that occur while creating or using a media recorder.
... inval
idstateerror an attempt was made to stop or pause or an inactive recorder, start or resume an active recorder, or otherwise manipulate the mediarecorder while in the wrong state.
... this also happens when a mediastreamtrack within the stream is marked as isolated due to the peer
identity constraint on the source stream.
...And 3 more matches
MediaRecorder - Web APIs
the mediarecorder interface of the mediastream recording api prov
ides functionality to easily record media.
...options are available to do things like set the container's mime type (such as "v
ideo/webm" or "v
ideo/mp4") and the bit rates of the audio and v
ideo tracks or a single overall bit rate.
...if this attribute is false, mediarecorder will record silence for audio and black frames for v
ideo.
...And 3 more matches
RTCPeerConnection: iceconnectionstatechange event - Web APIs
this can happen when only the last checked cand
idate is successful, and the gathering and end-of-cand
idates signals both occur before the successful negotiation is completed.
... state transitions as negotiation ends when the negotiation process runs out of cand
idates to check, the ice connection transitions to one of two states.
... if no suitable cand
idates were found, the state transitions to failed.
...And 3 more matches
RTCPeerConnection.setLocalDescription() - Web APIs
implicit description if you don't explicity prov
ide a session description, the webrtc runtime will try to handle it correctly.
...the parameters for the older form of setlocaldescription() are described below, to a
id in updating existing code.
... deprecated exceptions when using the deprecated callback-based version of setlocaldescription(), the following exceptions may occur: inval
idstateerror the connection's signalingstate is "closed", indicating that the connection is not currently open, so negotiation cannot take place.
...And 3 more matches
RTCPeerConnectionIceEvent - Web APIs
the rtcpeerconnectioniceevent interface represents events that occurs in relation to ice cand
idates with the target, usually an rtcpeerconnection.
... only one event is of this type: icecand
idate.
... rtcpeerconnectioniceevent.cand
idate read only contains the rtcicecand
idate containing the cand
idate associated with the event, or null if this event indicates that there are no further cand
idates to come.
...And 3 more matches
RTCRtpEncodingParameters - Web APIs
r
id a domstring which, if set, specifies an rtp stream
id (r
id) to be sent using the r
id header extension.
... scaleresolutiondownby only used for senders whose track's kind is v
ideo, this is a double-precision floating-point value specifying a factor by which to scale down the v
ideo during encoding.
... the default value, 1.0, means that the sent v
ideo's size will be the same as the original.
...And 3 more matches
RTCRtpReceiver.getCapabilities() static function - Web APIs
all browsers support the primary media kinds: audio and v
ideo.
... because the set of capabilities available tend to be stable for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part prov
ide a cross-origin method for
identifying a user.
... example the function below returns a boolean indicating whether or not the device supports receiving h.264 v
ideo on a webrtc connection.
...And 3 more matches
RTCRtpStreamStats.firCount - Web APIs
this value is available only on receivers for v
ideo tracks.
... the higher fircount is, the more often frames were dropped, which may be an indication that the media's bit rate is too high for the available bandw
idth, or that the receiving device is overburdened and is therefore unable to process the incoming data.
... specifications specification status comment
identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: fircount' in that specification.
...And 3 more matches
RTCRtpStreamStats.kind - Web APIs
the kind property of the rtcrtpstreamstats dictionary is a string indicating whether the described rtp stream contains audio or v
ideo media.
... its value is always either "audio" or "v
ideo".
... syntax mediakind = rtcrtpstreamstats.kind; value a domstring whose value is "audio" if the track whose statistics are given by the rtcrtpstreamstats object contains audio, or "v
ideo" if the track contains v
ideo media.
...And 3 more matches
RTCRtpTransceiver - Web APIs
each sdp media section describes one b
idirectional srtp ("secure real time protocol") stream (excepting the media section for rtcdatachannel, if present).
... a transceiver is uniquely
identified using its m
id property, which is the same as the media
id (m
id) of its corresponding m-line.
... an rtcrtptransceiver is associated with an m-line if its m
id is non-null; otherwise it's cons
idered disassociated.
...And 3 more matches
SVGClipPathElement - Web APIs
the svgclippathelement interface prov
ides access to the properties of <clippath> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 3 more matches
SVGFEBlendElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" ...
...And 3 more matches
SVGFEColorMatrixElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
...1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_t...
...And 3 more matches
SVGFECompositeElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...21" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">e...
...lement</text></a><polyline points="341,25 351,20 351,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" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"><r...
...And 3 more matches
SVGFEConvolveMatrixElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline=...
..."m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" t...
...And 3 more matches
SVGFEDisplacementMapElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baselin...
...e="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 3 more matches
SVGFEFuncAElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_t...
...And 3 more matches
SVGFEFuncBElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_t...
...And 3 more matches
SVGFEFuncGElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_t...
...And 3 more matches
SVGFEFuncRElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_t...
...And 3 more matches
SVGFEMorphologyElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
..."121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 3 more matches
SVGFilterElement - Web APIs
the svgfilterelement interface prov
ides access to the properties of <filter> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 3 more matches
SVGImageElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="...
...And 3 more matches
SVGPathElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 3 more matches
SVGPatternElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" ...
...And 3 more matches
SVGTransformable - Web APIs
methods the svgtransformable interface do not prov
ide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetsvgtransformablechrome ?
... webview andro
id no support nochrome andro
id ?
...And 3 more matches
Screen Capture API - Web APIs
to start capturing v
ideo 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 which streams the captured media.
... mediatrackconstraints.logicalsurface indicates whether or not the v
ideo in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen).
... mediatracksettings.logicalsurface a boolean value which is true if the v
ideo being captured doesn't directly correspond to a single onscreen display area.
...And 3 more matches
Screen Wake Lock API - Web APIs
the screen wake lock api prov
ides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
...it's a good
idea to show some feedback on the interface to show if wake lock is active and a way for the user to disable it if they wish.
... wakelocksentinel prov
ides a handle to the underlying platform wake lock and if referenced can be manually released and reacquired.
...And 3 more matches
ServiceWorkerState - Web APIs
values installing the service worker in this state is cons
idered an installing worker.
... during this state, extendableevent.waituntil() can be called ins
ide the install event handler to extend the life of the installing worker until the passed promise resolves successfully.
... installed the service worker in this state is cons
idered a waiting worker.
...And 3 more matches
SourceBuffer.abort() - Web APIs
exceptions exception explanation inval
idstateerror the mediasource.readystate property of the parent media source is not equal to open, or this sourcebuffer has been removed from the mediasource.
... example the spec description of abort() is somewhat confusing — cons
ider for example step 1 of reset parser state.
...for example, cons
ider this code: sourcebuffer.addeventlistener('updateend', function (_) { ...
...And 3 more matches
StaticRange - Web APIs
the dom staticrange interface extends abstractrange to prov
ide a method to specify a range of content in the dom whose contents don't update to reflect changes which occur within the dom tree.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/abstractrange" target="_top"><rect x="1" y="1" w
idth="130" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">abstractrange</text></a><polyline points="131,25 141,20...
... 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" w
idth="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
...And 3 more matches
Using writable streams - Web APIs
ins
ide this method, you should include code that sets up the stream functionality, e.g.
...ins
ide this block we use writablestreamdefaultwriter.ready to check whether the writer is ready to have another chunk written to it.
... ready returns a promise that fulfills when this is the case, ins
ide of which we call writablestreamdefaultwriter.write() to actually write the chunk to the stream.
...And 3 more matches
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask
id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" w
idth="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask
id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" w
idth="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect
id="r1" x="0" y="0" w
idth="45" height="45" /> <rect
id="r2" x="0" y="55" w
idth="45" height="45" />...
... <rect
id="r3" x="55" y="55" w
idth="45" height="45" /> <rect
id="r4" x="55" y="0" w
idth="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
... value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates ins
ide the <mask> element refer to the user coordinate system as defined when the mask was created.
...And 3 more matches
patternContentUnits - SVG: Scalable Vector Graphics
note that the size of the tile is computed against the bounding box of the target element --> <pattern
id="p1" w
idth="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the target element.
... note that the size of the tile is also computed against the bounding box of the target element --> <pattern
id="p2" w
idth="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" w
idth="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" w
idth="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
... value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates ins
ide the <pattern> element refer to the user coordinate system as defined when the pattern tile was created.
...And 3 more matches
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg w
idth="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient
id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient
id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color=...
..."fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient
id="repeatgradient" spreadmethod="repeat" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" w
idth="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" w
idth="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" w
idth="200" height="40"/> </svg> result notice that the m
iddle third of each gradient is the same.
... examples of spreadmethod with radial gradients svg <svg w
idth="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient
id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient
id="radialreflectgradient" spreadmethod="reflect" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient
id="radialrepeatgradien...
...And 3 more matches
stemh - SVG: Scalable Vector Graphics
the stemh attribute indicates the horizontal stem w
idth of the font.
... the stem w
idth refers to the dominant stem of the font.
... there may be two or more designed w
idths.
...And 3 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
city fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i
id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-m
id marker-start markerheight markerunits markerw
idth mask maskcontentunits maskunits mathematical max media method min mode ...
...restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-w
idth style surfacescale systemlanguage t tabindex tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-b
idi unicode-range units-per-em v v-alphabetic v-hanging v-
ideographic v-mathematical values vector-effect version vert-a...
...dv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w w
idth w
idths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes
id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage.
...And 3 more matches
<clipPath> - SVG: Scalable Vector Graphics
conceptually, parts of the drawing that lie outs
ide of the region bounded by the clipping path are not drawn.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath
id="myclip"> <!-- everything outs
ide the circle will be clipped and therefore invisible.
... --> <circle cx="40" cy="35" r="35" /> </clippath> <!-- the original black heart, for reference --> <path
id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart ins
ide the clip circle is visible.
...And 3 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient
id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </...
...lineargradient> <filter
id="
identity" x="0" y="0" w
idth="100%" height="100%"> <fecomponenttransfer> <fefuncr type="
identity"></fefuncr> <fefuncg type="
identity"></fefuncg> <fefuncb type="
identity"></fefuncb> <fefunca type="
identity"></fefunca> </fecomponenttransfer> </filter> <filter
id="table" x="0" y="0" w
idth="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 0 1 1"></fefuncr> <fefuncg type="table" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="table" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter
id="discrete" x="0" y="0" w
idth="100%" height="100%"> <fecomponenttransfer> <fefuncr type="discrete" tablevalues="0 0 1 1"><...
.../fefuncr> <fefuncg type="discrete" tablevalues="1 1 0 0"></fefuncg> <fefuncb type="discrete" tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter
id="linear" x="0" y="0" w
idth="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter
id="gamma" x="0" y="0" w
idth="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4" exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="g...
...And 3 more matches
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" w
idth="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... value type: <length>|<percentage> ; default value: auto; animatable: yes w
idth the w
idth of the foreignobject.
... value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, w
idth, and height are geometry properties, meaning those attributes can also be used as css properties for that element.
...And 3 more matches
<image> - SVG: Scalable Vector Graphics
the <image> svg element includes images ins
ide svg documents.
...to include svg files and run scripts ins
ide them, try <object> ins
ide of <foreignobject>.
...this specific element and its behavior only apply ins
ide svg documents or inline svg.
...And 3 more matches
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient
id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
... value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute prov
ides additional transformation to the gradient coordinate system.
... value type: <transform-list> ; default value:
identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
...And 3 more matches
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" w
idth="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect w
idth="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="m
iddle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
...(firefox users: click here) the rendering process involves the following: we start with the <svg> root element: a doctype declaration as known from (x)html should be left off because dtd based svg val
idation leads to more problems than it solves before svg 2, to
identify the version of the svg for other types of val
idation the version and baseprofile attributes should always be used instead.
...the text is positioned by setting an anchor where we want the m
idpoint to be: in this case, the m
idpoint should correspond to the center of the green circle.
...And 3 more matches
Introduction - SVG: Scalable Vector Graphics
a downs
ide is loading svg can be slow.
... basic ingredients html prov
ides elements for defining headers, paragraphs, tables, and so on.
... in much the same way svg prov
ides elements for circles, rectangles, and simple and complex curves.
...And 3 more matches
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to prov
ide a background picture for a form.
... source here is the source to the example: <html> <head> <title>xtech svg demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.inval
id stop.end { stop-color:red; } #err { display:none; } body.inval
id #err { display:inline; } </style> <script> function signalerror() { document.getelementby
id('body').setattribute("class", "inval
id"); } </script> </head> <body
id="body" style="position:absolute; z-index:0; border:1px sol
id black; left:5%; top:5%; w
idth:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span
id="err">incorrect value!</...
...span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xm
idym
id slice" style="w
idth:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient
id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" w
idth="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...And 3 more matches
Certificate Transparency - Web security
browser vendors and root store maintainers are also empowered to make more informed decisions regarding problematic cas that they may dec
ide to distrust.
... certificate transparency initially came about in 2013 against a backdrop of ca compromises (diginotar breach in 2011), questionable decisions (trustwave subordinate root inc
ident in 2012) and technical issuance issues (weak, 512 bit certificate issuance by digicert sdn bhd of malaysia).
... the specification states that compliant servers must prov
ide a number of these scts to tls clients when they connect.
...And 3 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
9 introduction gecko, intro, javascript, xslt with modern browsers supporting xslt, developers can now use javascript to access the power that xslt prov
ides.
...the structure of an xml document is designed to reflect and clarify important relationships among the indiv
idual aspects of the content itself, unhindered by a need to prov
ide any indication about how this data should eventually be presented.
...the element must be defined before any other output document element ins
ide the output document element for which it establishes attribute values.
...And 3 more matches
FileSystemEntry.moveTo() - Web APIs
newname optional if this parameter is prov
ided, the entry is renamed to have this string as its new file or directory name.
...receives a single input parameter: a filesystementry based object prov
iding the moved item's new details.
... errors fileerror.inval
id_modification_err the requested operation involves an impossible change, such as moving a directory ins
ide itself or one of its own child directories, or copying an item within the same directory without renaming it.
...And 2 more matches
FileSystemFlags.create - Web APIs
false n/a[1] path exists but doesn't match the desired type the errorcallback is called with an appropriate error code (if the callback was prov
ided).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcreate experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed ...
...this option has no effect.ie no support noopera no support nosafari no support nowebview andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitchrome andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkit...
...And 2 more matches
FileSystemFlags.exclusive - Web APIs
false n/a[1] path exists but doesn't match the desired type the errorcallback is called with an appropriate error code (if the callback was prov
ided).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetexclusive experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed ...
...this option has no effect.ie no support noopera no support nosafari no support nowebview andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitchrome andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkit...
...And 2 more matches
FileSystemSync - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfilesystemsync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed ...
...a full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix: webkitwebview andro
id full support ≤37prefixed full support ≤37prefixed prefixed implemented with the vendor prefix: webkitchrome andro
id full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: webk...
...itfirefox andro
id no support noopera andro
id full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix: webkitsamsung internet andro
id full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: webkitname non-standardchrome full support 13edge f...
...And 2 more matches
File and Directory Entries API - Web APIs
the synchronous api is intended to be used ins
ide a worker and will return the values you desire.
...only for accessing files which are selected by the user in a file <input> element (see htmlinputelement as well) or when a file or directory is prov
ided to the web site or app using drag and drop.
... filesystemdirectoryreader created by calling filesystemdirectoryentry.createreader(), this interface prov
ides the functionality which lets you read the contents of a directory.
...And 2 more matches
GlobalEventHandlers.onkeypress - Web APIs
examples basic example this example logs the keyboardevent.code value whenever you press a key ins
ide the <input> element.
... html <input> <p
id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementby
id('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.
... <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(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 h
idden word the following javascript function will do something after the user types the word "exit" in any point of a page.
...And 2 more matches
HTMLAudioElement - Web APIs
the htmlaudioelement interface prov
ides access to the properties of <audio> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">elemen...
...And 2 more matches
HTMLCollection - Web APIs
htmlcollection.nameditem() returns the specific node whose
id or, as a fallback, name matches the string specified by name.
...html
ids may contain : and .
... as val
id characters, which would necessitate using bracket notation for property access.
...And 2 more matches
HTMLDListElement - Web APIs
the htmldlistelement interface prov
ides special properties (beyond those of the regular htmlelement interface it also has available to it by inheritance) for manipulating definition list (<dl>) elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLDataElement - Web APIs
the htmldataelement interface prov
ides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <data> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLDataListElement - Web APIs
the htmldatalistelement interface prov
ides special properties (beyond the htmlelement object interface it also has available to it by inheritance) to manipulate <datalist> elements and their content.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLDialogElement.showModal() - Web APIs
interaction outs
ide the dialog is blocked and the content outs
ide it is rendered inert.
... return value vo
id.
...if the open attribute is already set on the <dialog> element), an inval
idstateerror is thrown.
...And 2 more matches
HTMLDivElement - Web APIs
the htmldivelement interface prov
ides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <div> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLFormElement: submit event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> ins
ide it.
... note: trying to submit a form that does not pass val
idation triggers an inval
id event.
... in this case, the val
idation prevents form submission, and thus there is no submit event.
...And 2 more matches
HTMLIFrameElement.allowPaymentRequest - Web APIs
cand
idate recommendation adds allowpaymentrequest property.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetallowpaymentrequest experimentalchrome full support 60disabled full support 60disabled disabled from version 60: this feature is behind the #web-payments preference (needs to be set to enabled).
... webview andro
id no support nochrome andro
id full support 61disabled full support 61disabled disabled from version 61: this feature is behind the #web-payments preference (needs to be set to enabled).
...And 2 more matches
HTMLImageElement.align - Web APIs
m
iddle the center of the object should be aligned vertically with the current baseline.
... it may be worth noting that vertical-align offers several additional options for its value; you may wish to cons
ider these when changing your code to use it.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetalignchrome full support 1edge full support 12firefox full support yesie ?
...And 2 more matches
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value prov
ides a hint to the user agent that tells the browser how to handle loading images which are currently outs
ide the window's visual viewport.
... syntax let imageloadscheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring prov
iding a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
... to prevent this reflow from occurring, you should explicitly specify the size of the image's presentation using the image element's w
idth and height attributes.
...And 2 more matches
HTMLImageElement.src - Web APIs
syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when prov
iding only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... if you use the srcset content attribute to prov
ide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset.
... examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" w
idth="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.
...And 2 more matches
HTMLLIElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddl...
...e">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 2 more matches
HTMLLabelElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 ...
... 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace"...
... fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"/>...
...And 2 more matches
HTMLLinkElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text...
... x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar...
...get="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="...
...And 2 more matches
HTMLMarqueeElement - Web APIs
the htmlmarqueeelement interface prov
ides methods to manipulate <marquee> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/htmlmarqueeelement" target="_top"><rect x="1" y="1" w
idth="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlmarqueeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...possible values are scroll, sl
ide and alternate.
...And 2 more matches
HTMLMediaElement.audioTracks - Web APIs
the media element may be either an <audio> element or a <v
ideo> element.
...the list of tracks can be accessed using array notation, or using the object's gettrackby
id() method.
... each track is represented by a audiotrack object which prov
ides information about the track.
...And 2 more matches
HTMLMediaElement.play() - Web APIs
for even more in-depth information about autoplay and autoplay blocking, see our article autoplay gu
ide for media and web audio apis.
... example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let v
ideoelem = document.getelementby
id("v
ideo"); let playbutton = document.getelementby
id("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playv
ideo(); async function playv
ideo() { try { await v
ideoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (v
ideoelem.paused) { playv
ideo(); } else { v
ideoelem.pause(); playbutton.classlist.remove("playing"); } } in this example, playback of v
ideo is toggled off and on by the async playv
ideo() function.
... it tries to play the v
ideo, and if successful sets the class name of the playbutton element to "playing".
...And 2 more matches
HTMLMenuElement - Web APIs
the htmlmenuelement interface prov
ides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menu> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLMenuItemElement - Web APIs
the htmlmenuitemelement interface prov
ides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menuitem> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmeterelement interface, which prov
ides 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.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLModElement - Web APIs
the htmlmodelement interface prov
ides special properties (beyond the regular methods and properties available through the htmlelement interface they also have available to them by inheritance) for manipulating modification elements, that is <del> and <ins>.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLOptGroupElement - Web APIs
the htmloptgroupelement interface prov
ides special properties and methods (beyond the regular htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLOptionElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke=...
..."#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
id...
...dle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/htm...
...And 2 more matches
HTMLParagraphElement - Web APIs
the htmlparagraphelement interface prov
ides special properties (beyond those of the regular htmlelement object interface it inherits) for manipulating <p> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLParamElement - Web APIs
the htmlparamelement interface prov
ides special properties (beyond those of the regular htmlelement object interface it inherits) for manipulating <param> elements, representing a pair of a key and a value that acts as a parameter for an <object> element.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLQuoteElement - Web APIs
the htmlquoteelement interface prov
ides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating quoting elements, like <blockquote> and <q>, but not the <cite> element.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLSlotElement.name - Web APIs
a slot is a placeholder ins
ide a web component that users can fill with their own markup.
... every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node ins
ide the slot is.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetname experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
...And 2 more matches
HTMLTimeElement - Web APIs
the htmltimeelement interface prov
ides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <time> elements.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
HTMLUnknownElement - Web APIs
the htmlunknownelement interface represents an inval
id html element and derives from the htmlelement interface, but without implementing any additional properties or methods.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top...
..."><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none...
...And 2 more matches
Headers - Web APIs
these headers include the forb
idden header names and forb
idden response header names.
... methods headers.append() appends a new value onto an existing header ins
ide a headers object, or adds the header if it does not already exist.
... headers.foreach() executes a prov
ided function once for each array element.
...And 2 more matches
ImageCapture.getPhotoSettings() - Web APIs
the user agent selects the closest w
idth value to this setting if it only supports discrete heights.
... imagew
idth: the desired image w
idth as an integer.
... the user agent selects the closest w
idth value to this setting if it only supports discrete w
idths.
...And 2 more matches
MediaDeviceInfo.kind - Web APIs
the kind readonly property of the mediadeviceinfo interface returns an enumerated value, that is either "v
ideoinput", "audioinput" or "audiooutput".
... cand
idate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetkindchrome full support 55notes full support 55notes notes for earlier versions, this interface is available through the adapter.js polyfilledge full support 12firefox full support 39ie no support ...
...And 2 more matches
MediaDevices - Web APIs
the mediadevices interface prov
ides access to connected media input devices like cameras and microphones, as well as screen sharing.
... getusermedia() with the user's permission through a prompt, turns on a camera and/or a microphone on the system and prov
ides a mediastream containing a v
ideo track and/or an audio track with the input.
...var v
ideo = document.queryselector('v
ideo'); var constraints = window.constraints = { audio: false, v
ideo: true }; var errorelement = document.queryselector('#errormsg'); navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var v
ideotracks = stream.getv
ideotracks(); console.log('got stream with constraints:', constraints); console.log('using v
ideo device: ' + v
ideotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); }; window.stream = stream; // make variable available to browser console v
ideo.srcobject = stream; }) .catch(function(error) { if (error.name === 'constraintnotsatisfiederror') { errormsg('the re...
...And 2 more matches
MediaError - Web APIs
the mediaerror interface represents an error which occurred while handling media in an html media element based on htmlmediaelement, such as <audio> or <v
ideo>.
... a mediaerror object describes the error in general terms using a numeric code categorizing the kind of error, and a message, which prov
ides specific diagnostics about what went wrong.
... media_err_src_not_supported 4 the associated resource or media prov
ider object (such as a mediastream) has been found to be unsuitable.
...And 2 more matches
MediaKeyMessageEvent() - Web APIs
syntax var mediakeymessageevent = new mediakeymessageevent(typearg, options) parameters typearg a domstring containing one of may be one of license-request, license-renewal, license-renewal, or indiv
idualization-request.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetmediakeymessageevent() constructor experimentalchrome full support 42edge full support ≤18firefox ?
... webview andro
id no support nochrome andro
id full support 42firefox andro
id ?
...And 2 more matches
MediaRecorder.mimeType - Web APIs
see our media type and format gu
ide for information about container and codec support across browsers.
... note: the term "mime type" is officially cons
idered to be historical; these strings are now officially known as media types.
... if (navigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { audio: true, v
ideo: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var options = { audiobitspersecond: 128000, v
ideobitspersecond: 2500000, mimetype: 'v
ideo/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; m.mimetype; // would return 'v
ideo/mp4' ...
...And 2 more matches
MediaStreamTrack.enabled - Web APIs
for v
ideo tracks, every frame is filled entirely with black pixels.
... the value of enabled, in essence, represents what a typical user would cons
ider the muting state for a track, whereas the muted property indicates a state in which the track is temporarily unable to output data, such as a scenario in which frames have been lost in transit.
...empty v
ideo frames have every pixel set to black.
...And 2 more matches
MediaTrackConstraints.aspectRatio - Web APIs
syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a v
ideo track's aspect ratio.
... the value is the w
idth div
ided by the height and is rounded to ten decimal places.
... for example, the standard high-definition v
ideo aspect ratio of 16:9 can be computed as 1920/1080, or 1.7777777778.
...And 2 more matches
RTCRtpCapabilities - Web APIs
that means that, for instance, if there are two entries for the h.264 codec (as
identified by the mimetype being "v
ideo/h264"), there are other values in the capabilities objects indicating how they're different in some way.
...those components are: red (redundant audio data) the media type of an red entry may vary due to there being several versions of it, but it will end with red, such as v
ideo/red or v
ideo/fwdred.
...one possible value is v
ideo/ulpfec (a generic error connection model).
...And 2 more matches
RTCRtpEncodingParameters.maxBitrate - Web APIs
syntax rtpencodingparameters.maxbitrate = maxbitspersecond; rtpencodingparameters = { maxbitrate: maxbitspersecond }; maxbitspersecond = rtpencodingparameters.maxbitrate; value an unsigned long integer value specifying the maximum bandw
idth this encoding is permitted to use for a track of media it encodes in terms of bits per second.
... other parameters may further reduce the bandw
idth used by the track; for example, maxframerate will, if set low enough, constrain the bandw
idth as well.
... in addition, there's no guarantee that the network interface can support the specified bandw
idth, in which case the actual bandw
idth will be lower.
...And 2 more matches
RTCRtpSender.getCapabilities() static function - Web APIs
all browsers support the primary media kinds: audio and v
ideo.
... because the set of capabilities available tend to be stable for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part prov
ide a cross-origin method for
identifying a user.
... example the function below returns a boolean indicating whether or not the device supports sending h.264 v
ideo on an rtcrtpsender.
...And 2 more matches
RTCRtpSender.setParameters() - Web APIs
the available options are: degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandw
idth against quality in constrained-bandw
idth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced.
... transaction
id a string containing a unique
id for the last set of parameters applied; this value is used to ensure that setparameters() can only be called to alter changes made by a specific previous call to getparameters().
... inval
idmodificationerror one of the following problems was detected: the number of encodings specified in the parameters object's encodings property does not match the number of encodings currently listed for the rtcrtpsender.
...And 2 more matches
RTCRtpStreamStats.sliCount - Web APIs
note: this value is sent by the sender to the receiver and is only present for v
ideo media.
... specifications specification status comment
identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: slicount' in that specification.
... cand
idate recommendation initial definition.
...And 2 more matches
SVGAnimationElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alig...
...nment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="3...
...0" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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=...
...And 2 more matches
SVGCursorElement - Web APIs
the svgcursorelement interface prov
ides access to the properties of <cursor> elements, as well as methods to manipulate them.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...de" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4...
...And 2 more matches
SVGDefsElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 2 more matches
SVGDescElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" wi...
...And 2 more matches
SVGElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111...
...,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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 on...
...And 2 more matches
SVGFEComponentTransferElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="no...
...ne"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-bas...
...eline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/svgfecomponenttransfere...
...And 2 more matches
SVGFEDiffuseLightingElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baselin...
...e="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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...
...And 2 more matches
SVGFEDistantLightElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
id...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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=...
...And 2 more matches
SVGFEGaussianBlurElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
id...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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=...
...And 2 more matches
SVGFEImageElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" ...
...And 2 more matches
SVGFEMergeElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" ...
...And 2 more matches
SVGFEMergeNodeElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...21" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">e...
...lement</text></a><polyline points="341,25 351,20 351,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" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"><r...
...And 2 more matches
SVGFEOffsetElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="30...
...And 2 more matches
SVGFEPointLightElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
..."121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 2 more matches
SVGFESpecularLightingElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none...
..."/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-basel...
...ine="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/svgfespecularlightingelem...
...And 2 more matches
SVGFESpotLightElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
...21" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">e...
...lement</text></a><polyline points="341,25 351,20 351,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" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"><r...
...And 2 more matches
SVGFETileElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
..." x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="...
...And 2 more matches
SVGGElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151"...
... y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><po...
...lyline points="341,25 351,20 351,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" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" w
idt...
...And 2 more matches
SVGGraphicsElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4...
...dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle"...
... alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/svggraphi...
...And 2 more matches
SVGImageElement.decoding - Web APIs
the browser dec
ides what is best for the user.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetdecoding experimentalchrome full support 65edge full support ≤79firefox ?
... webview andro
id full support 65chrome andro
id full support 65firefox andro
id ?
...And 2 more matches
SVGLinearGradientElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
id...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 2 more matches
SVGMetadataElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="30...
...And 2 more matches
SVGRadialGradientElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
id...
...dle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 2 more matches
SVGScriptElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element...
...</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 2 more matches
SVGStopElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" wi...
...And 2 more matches
SVGStylable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetsvgstylablechrome ?
... webview andro
id no support nochrome andro
id ?
... firefox andro
id ?
...And 2 more matches
SVGStyleElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseli...
...ne="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="_...
...And 2 more matches
SVGSwitchElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
..." x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y...
...And 2 more matches
SVGSymbolElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
..." x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="...
...And 2 more matches
SVGTitleElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
...And 2 more matches
Using server-sent events - Web APIs
you'll need a bit of code on the server to stream events to the front-end, but the client s
ide code works almost
identically to websockets in part of handling incoming events.
...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 attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementby
id("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html.
... sending events from the server the server-s
ide script that sends events needs to respond using the mime type text/event-stream.
...And 2 more matches
ServiceWorkerGlobalScope - Web APIs
once successfully registered, a service worker can and will be terminated when
idle to conserve memory and processor power.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 12.142857142857142%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#...
...fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" w
idth="170" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2=...
...And 2 more matches
ServiceWorkerRegistration.showNotification() - Web APIs
it may contain the following values: action: a domstring
identifying a user action to be displayed on the notification.
... badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the andro
id notification bar.
... on andro
id devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
...And 2 more matches
SharedWorkerGlobalScope.applicationCache - Web APIs
don't use it to make offline websites — cons
ider using service workers instead.
... example if a shared worker has an appcache associated with it, you can return a reference to the cache using self.applicationcache from ins
ide the shared worker.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetapplicationcachechrome full support 4edge full support ≤79firefox full support 29ie no support noopera full support 10.6safari no support nowebview...
...And 2 more matches
Slottable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetslottable experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 40safari full support 10.1webview andro
id full support 53chrome andro
id full support 53firefox andro
id full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is ...
...to change preferences in firefox, visit about:config.opera andro
id full support 41safari ios full support 10.3samsung internet andro
id full support 6.0assignedslot experimentalchrome full support 53edge full support 79firefox ...
...And 2 more matches
StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the css typed object model api prov
ides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration.
... methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that prov
ided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
... stylepropertymapreadonly.foreach() executes a prov
ided function once for each element of stylepropertymapreadonly.
...And 2 more matches
SubtleCrypto.wrapKey() - Web APIs
wrapping a key helps protect it in untrusted environments, such as ins
ide an otherwise unprotected data store or in transmission over an unprotected network.
... exceptions the promise is rejected when one of the following exceptions is encountered: inval
idaccesserror raised when the wrapping key is not a key for the requested wrap algorithm.
... typeerror raised when trying to use an inval
id format.
...And 2 more matches
Touch.radiusX - Web APIs
this attribute is not w
idely implemented.
...when the src element is touched, the element's w
idth and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle.
... <div
id="src"> ...
...And 2 more matches
TrackEvent - Web APIs
events based on trackevent are always sent to one of the media track list types: events involving v
ideo tracks are always sent to the v
ideotracklist found in htmlmediaelement.v
ideotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks.
...if not null, this is always an object of one of the media track types: audiotrack, v
ideotrack, or texttrack).
... methods trackevent has no methods of its own; however, it is based on event, so it prov
ides the methods available on event objects.
...And 2 more matches
USBConfiguration - Web APIs
the usbconfiguration interface of the webusb api prov
ides information about a particular configuration of a usb device and the interfaces that it supports.
... constructor usbconfiguration.usbconfiguration() creates a new usbconfiguration object which contains information about the configuration on the prov
ided usbdevice with the given configuration value.
...this is equal to the bconfigurationvalue field of the configuration descriptor prov
ided by the device defining this configuration.
...And 2 more matches
JSS build instructions for OSX 10.6 - Archive of obsolete content
the following build instructions were prov
ided by pavrw.
... the generic instructions d
idn't work to build on osx 10.6.7.
...tml ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual sa
id nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they d
idnt work for osx, giving many compiling errors.
...setting ld_library_path d
idnt work ...
HTTP Class Overview - Archive of obsolete content
this document prov
ides an overview of the classes used by the mozilla http implementation.
... it's meant as a gu
ide to developers wishing to understand or extend the mozilla http implementation.
... nshttphandler implements nsiprotocolhandler manages preferences owns the authentication cache holds references to frequently used services nshttpchannel implements nsihttpchannel talks to the cache initiates http transactions processes http response codes intercepts progress notifications nshttpconnection implements nsistreamlistener & nsistreamprov
ider talks to the socket transport service feeds data to its transaction object routes progress notifications nshttpconnectioninfo
identifies a connection nshttptransaction implements nsirequest encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transaction strips chunked transfer encoding nshttprequesthead owns a nshttpheaderarray knows how to fill a reque...
... for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original document information author(s): darin fisher last updated date: august 5, 2002 copyright information: portions of this content are © 1998–2007 by indiv
idual mozilla.org contributors; content available under a creative commons license | details.
Help Viewer - Archive of obsolete content
help viewer: allows information to be shown to the user ins
ide mozilla.
...consequently, the mozilla platform prov
ides a cross-platform help viewer along with a framework for prov
iding built-in help documentation.
... mozilla's help viewer makes prov
iding documentation an easy job, and this document will describe how you can use it.
... help viewer project page articles & tutorials creating a help content pack task-oriented, as opposed to spec-type stuff like the link below will be other resources content pack specification a technical description of it, meant primarily to sol
idify the
idea of exactly what constitutes a content pack ...
Twitter - Archive of obsolete content
for instance, some twitter methods have an
id parameter, so you would define an
id property and set its value to a user's
id.
...when you call a method that requires authentication -- such as jetpack.lib.twitter.statuses.update() -- without prov
iding a username or password, firefox will prompt the user for them if she is not already authenticated with twitter.
...user info jetpack.lib.twitter.users.show({
id: "mozlabs", success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); friends of a user jetpack.lib.twitter.statuses.friends({
id: "mozlabs", page: 3, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); trends jetpack.lib...
....twitter.trends({ success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); searching jetpack.lib.twitter.search({ q: "#jetpack", lang: "ja", rpp: 10, page: 5, since_
id: 1337, success: function (data, status) console.log(data.tosource()), error: function (xhr, errmsg, errobj) console.error(xhr.responsetext) }); ...
Clipboard - Archive of obsolete content
jetpack's clipboard support api prov
ides a standardized way for features to access the clipboard.
...the namespace associated with this api is jetpack.clipboard which prov
ides both read and write access to the clipboard.
...if flavor is prov
ided, the data is returned in that format.
...if flavor is prov
ided, the data is returned in that format.
Clipboard - Archive of obsolete content
jetpack's clipboard support api prov
ides a standardized way for features to access the clipboard.
...the namespace associated with this api is jetpack.clipboard which prov
ides both read and write access to the clipboard.
...if flavor is prov
ided, the data is returned in that format.
...if flavor is prov
ided, the data is returned in that format.
Clipboard - Archive of obsolete content
jetpack's clipboard support api prov
ides a standardized way for features to access the clipboard.
...the namespace associated with this api is jetpack.clipboard which prov
ides both read and write access to the clipboard.
...if flavor is prov
ided, the data is returned in that format.
...if flavor is prov
ided, the data is returned in that format.
Makefile.mozextension.2 - Archive of obsolete content
ng_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: @echo 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 which mkdir) mkdir=/bin/mkdir zipprog=/usr/bin/zip shell = /bin/sh noop = $(shell) -c true noecho = @ rm_rf=rm -f cp=/bin/cp -i .phony: all all :: make_structure make_files $(noecho) $(noop) pa...
...either remove (clean it), or choose indiv
idual targets to build."; exit 1; } @echo $(mkdir) $(project) $(mkdir) $(project)/content $(project)/locale $(project)/locale/en-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi chrome.manifest install.rdf components defaults chrome && cd ..
...} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape browser {3db10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <
id>$(project_
id)</
id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about...
....xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <
id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</
id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay
id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></overlay> ...
Plug-n-Hack Phase1 - Archive of obsolete content
security tool manifest to support pnh-1 security tools prov
ide a manifest over http(s) which defines the capabilities that the browser can make use of.
... it is up to the tool authors to dec
ide how the url of the manifest is published.
...for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outs
ide of user initiated actions.
...serving manifests from outs
ide of your tool you may want to serve manifests from a separate webserver (e.g.
Abc Assembler Tests - Archive of obsolete content
when run, the assembler tests include the abcasm/abs_helper.as file which defines the following functions: start(summary:string):vo
id - start a new test section described by summary end():vo
id - test section finished compare_stricteq(name:string, expected:*, actual:*):vo
id - compare the results of a testcase where name is the testcase name compare_typeerror(name:string, expected:*, actual:*):vo
id - special function for comparing typeerrors (runtimeerrors) - will only compare the first 22 chars of expected and actual so that...
...compare_numbereq(name:string, expected:*, actual:*, fractiondigits:int=-1):vo
id - compare 2 numbers up to fractiondigits this is to be used for high precision numbers that may vary slightly due to platform differences.
... * * ***** end license block ***** */ function main() { getlocal0 pushscope findproperty start pushstring "instructions that start with the letter l" callpropvo
id start 1 newfunction .function_
id(runtest) getlocal0 call 0 findproperty end callpropvo
id end 0 returnvo
id } function runtest() { // test null <= null == true findproperty compare_stricteq pushstring "null lessequals null" // testname pushtrue // expected pushnull pushnull lessequals // actual callpropvo
id compare_stricteq 3 // use .try...
... / .catch to catch typeerror // convert_o null .try { pushnull convert_o pop findproperty fail pushstring "convert_o null" pushstring "exception should have been thrown: typeerror: error #1009: cannot access a property or method of a null object reference." getlocal1 callpropvo
id fail 3 jump finished_convert_o_null } .catch { getlocal0 pushscope setlocal2 // save typeerror findproperty compare_typeerror pushstring "convert_o null" // test name pushstring "typeerror: error #1009" // expected getlocal2 // actual callpropvo
id compare_typeerror 3 } finished_convert_o_null: } ...
Actionscript Acceptance Tests - Archive of obsolete content
testname.as.asc_args this file specifies additional arguments to pass to asc when compiling the test: # asc args for file # two modes are available: # overr
ide| all command line arguments (except builtin.py) are ignored and replaced by these # merge| merge these args in with the current args # specifiy an arg that starts with -no will disable the arg...
...testname.as.avm_args files will take precedence over the dir.avm_args file testname.as.tz if a test is only val
id for certain timezones, the timezones can be specified in this support file.
... when this file is defined, the output from the testcase is matched line by line to the .out file and any difference is cons
idered a failure.
... if you do not wish to have shell.as included when compiling, you must create a dir.asc_args file with an overr
ide parameter: # the following line will overr
ide all compile arguments and just compile a .as file with -import builtin.abc overr
ide| ...
Tuning Pageload - Archive of obsolete content
firefox (and all mozilla products/projects which do page-loading) ship with what are cons
idered the "best" settings for the most cases.
...the
idea here is twofold.this reduces ugly visual jitter as the new page comes in by not starting painting till after we have a bunch of the data.this makes overall page load time shorter by not doing extra repaints very early on.
...every content.switch.threshold microseconds, we dec
ide whether we should be in mode a or mode b.
... the decision is based on whether there were any user events on the relevant w
idget in the last content.switch.threshold microseconds.
When To Use ifdefs - Archive of obsolete content
there are three major kinds of ifdefs in use in the mozilla tree: platform/w
idget ifdefs, feature ifdefs, and application-specific ifdefs: platform/w
idget ifdefs the mozilla code will frequently need to differentiate between code for different platforms or w
idget sets.
...for instance, xpcom, the sp
idermonkey javascript engine, and the networking engine do not know anything about xul and should not have any ifdefs based on --disable-xul.
...this rule has many exceptions, some of which are listed here: the code in editor/ui/ is built by the suite, standalone composer, and thunderbird, but it is cons
idered application-specific.
...makefile ifdefs, however, are sometimes harder to spot and can cause h
idden issues that are much more serious.
DOM Interfaces - Archive of obsolete content
the ns
idomdocumentxbl interface the ns
idomdocumentxbl interface contains methods for manipulating xbl bindings.
...
idl definition interface ns
idomdocumentxbl { nodelist getanonymousnodes(in element elt); element getanonymouselementbyattribute(in element elt, in domstring attrname, in domstring attrvalue); element getbindingparent(in node node); vo
id loadbindingdocument(in domstring documenturl); }; methods getanonymousnodes the getanonymousnodes method retrieves the anonymous children of the specified element.
...typically used with an (arbitrary) anon
id attribute to retrieve a specific anonymous child in an xbl binding.
... if (element.ownerdocument instanceof ci.ns
idomdocumentxbl) { var anonchildren = element.ownerdocument.getanonymousnodes(element); if (anonchildren) { for (var i = 0; i < anonchildren.length; i++) { if (anonchildren[i].nodetype == 1) return false; } } } return true; ...
XBL - Archive of obsolete content
most xul w
idgets are at least partially implemented using xbl.
... you can build your own reusable w
idgets from existing xul, html, svg, and other primitives using xbl.
... xbl 2.0 (w3c cand
idate recommendation) was developed to address problems found in xbl 1.0 and to allow for implementations in a broader range of web browsers.
... custom xul elements with xbl from the xul school tutorial for add-on developers xbl chapter of "rap
id application development with mozilla" xbl 2.0 primer (draft) xbl 2.0 cross-browser implementation in javascript more xbl resources...
align - Archive of obsolete content
if the box is larger than the total size of the children, the extra space is placed on the right or bottom s
ide.
... center extra space is split equally along each s
ide of the child elements, resulting in the children being placed in the center of the box.
...if the box is larger than the total size of the children, the extra space is placed on the left or top s
ide.
...for a vertical box, the children are stretched to be the w
idth of the box.
browser.type - Archive of obsolete content
the type of browser, which can be used to set access of the document loaded ins
ide the browser.
...the content that is loaded ins
ide the browser is not allowed to access the chrome above it.
...the content that is loaded ins
ide the browser is not allowed to access the chrome above it.
...the content that is loaded ins
ide the browser is not allowed to access the chrome above it.
collapse - Archive of obsolete content
« xul reference home collapse type: one of the values below determines which s
ide of the splitter is collapsed when its grippy is clicked.
...you should put a grippy element ins
ide the splitter when it is used for collapsing.
... before when the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its w
idth or height is 0.
... after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its w
idth or height is 0.
Attribute (XUL) - Archive of obsolete content
efaultset description dir disableautocomplete disableautoselect disableclose 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 grippyh
idden grippytooltiptext group handlectrltab height helpuri h
idden h
idechrome h
idecolumnpicker h
ideheader h
ideseconds h
idespinbuttons highlightnonmatches homepage href icon
id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempt...
...y key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxw
idth member menu menuactive min minheight minresultsforpopup minw
idth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautoh
ide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpageh
ide onpagerewound onpageshow onpaneload onpopuph
idden onpopuph
iding onpopupshowing onpopupshown onsearchcomplete onsele...
...ct ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack page
id 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 searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonsel...
...ect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction val
idate value var visuallyselected wait-cursor w
idth windowtype wrap wraparound ...
Reading from Files - Archive of obsolete content
file and stream gu
ide: [ 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 gu
ide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...an input stream prov
ides a means of reading bytes, strings or other values from the file.
... while there is only one method to create an input stream, it prov
ides a number of options to control exactly how reading is performed.
...in fact, it is a good
idea to enclose file reading and writing operations within a try-catch block to capture any errors that might occur during the process.
findbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] in gecko 1.9, the findbar w
idget moved into toolkit, so it's available to any xul application, as well as extensions.
... for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser element by either setting the findbar's browser
id attribute to the
id of the browser element before the findbar element is bound, or by setting the findbar's browser property to the browser element itself.
... attributes browser
id, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1"
id="content" src="about:blank"/> <findbar
id="findtoolbar" browser
id="content"/> attributes browser
id type: string the
id of the browser element to which the findbar is attached.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth browser type: browser element lets you set and get the browser in which the findbar is located.
appendNotification - Archive of obsolete content
value - value used to
identify the notification image - url of image to appear on the notification.
... label - the label to appear on the button popup - the
id of a popup for the button.
...val
id values are "menu-button" and "menu" which must be set if the button is to prov
ide a popup via the popup property.
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique
id", "chrome://browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...
MoveResize - Archive of obsolete content
vo
id moveto(in long left, in long top); the left argument is the horizontal screen position and the top argument is the vertical screen position.
... for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the position may be shifted so as not to cover user interface elements prov
ided by the operating system, such as the menu bar or the task bar.
... resizing a popup the size of a popup is determined automatically based on the content ins
ide the popup.
... vo
id sizeto(in long w
idth, in long height); here is an example which resizes a popup to be 200 pixels w
ide and 300 pixels high: popup.sizeto(200, 300); ...
tag - Archive of obsolete content
if set, the conditions will only match if the template builder is parsing content for an element directly ins
ide this tag.
... for example, by using a value of treechildren, the condition will only match when placing elements directly ins
ide a treechildren tag.
... thus, nested elements will not match because they are directly ins
ide a treeitem.
... this attribute is useful to prov
ide different rules for outer and inner elements.
Additional Navigation - Archive of obsolete content
for instance, if items were
identified with a type, the data could be filtered to include only items of a particular type.
... <hbox datasources="template-gu
ide-ex2.rdf" ref="http://www.daml.org/2001/09/countries/iso#it"> in this example, three triples will be used.
...cond triple will look like this: (?start = http://www.daml.org/2001/09/countries/iso#it, ?countrytitle = italy, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.daml.org/2001/09/countries/iso#it, ?countrytitle = italy, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the third triple just grabs the title from the photo as previous examples d
id, adding a value for the ?title variable for each photo.
... retrieving parents a very uncommon form of navigation you can also do is to navigate upwards using a member tag, that is to get all the parents of a node, as in this example: <query> <content uri="?start"/> <member container="?parent" child="?start"/> </query> this might be used, for instance, to start at a particular photo and find all of the containers that it is ins
ide.
Building Menus With Templates - Archive of obsolete content
note that the generated content does not get removed again when the menu is closed again; this extra feature of menus is only intended to be a performance enhancement to speed up the time it takes to display a window by avo
iding extra generation that can be put off until later.
... you might be wondering why we couldn't just put the datasources attribute on the menupopup instead and not have a menupopup ins
ide the action body.
...here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-gu
ide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> <rule> <menupopup> <menu uri="rdf:*" label=...
...the houses match the first rule so a menupopup and menuitem element are generated and inserted ins
ide the street content (the menu element).
Multiple Rules - Archive of obsolete content
it also allows a common technique where the last rule in a template has no conditions, allowing all remaining results that d
idn't match earlier rules to match this last rule.
... a multiple rule template looks like the following: <hbox
id="photoslist" datasources="template-gu
ide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...this would be useful for comparing a field that
identified the type of a result.
...bes
ide the equals operator, there are several other operators that may be used.
RDF Modifications - Archive of obsolete content
this is useful when making a large amount of changes to avo
id having to keep recalculating parts of the template that might change again quickly.
...similarly, if the triple d
idn't use a variable but a static value, this value would also need to match in order to continue processing.
...if a statement hadn't generated a result, for instance if the photo d
id not have a title, or it wasn't contained in a parent container, there would be no match and the builder could stop processing the new triple.
...cons
ider the following binding: <binding subject="?start" predicate="http://www.xulplanet.com/rdf/categoryname" object="?name"/> this binding involves a triple pointing out from the starting variable that has been used in these examples.
Using Recursive Templates - Archive of obsolete content
the content of the action body is again generated for each result, but instead of being inserted ins
ide the outermost groupbox, this new content is inserted ins
ide the content generated from the previous iteration.
... the content is always inserted directly ins
ide the element with the uri attribute.
... <vbox
id="row2" container="true" empty="false" class="indent"> <label value="male"/> <vbox
id="row4" class="indent"><label value="napoleon bonaparte"/></vbox> <vbox
id="row5" class="indent"><label value="julius caesar"/></vbox> <vbox
id="row6" class="indent"><label value="ferdinand magellan"/></vbox> </vbox> <vbox
id="row3" container="true" empty="false" class="indent"> <label value="female"/> <vbox
id="row7" class="indent"><label value="cleopatra"/></vbox> <vbox
id="row8" class="indent"><label value="laura secord"/></vbox> </vbox> </groupbox> note how similar content corresponding to the action body is created for both the groups as well as the people.
...these hints are used for trees, but they can also be used in a stylesheet to prov
ide a different appearance for containers with children, empty containers, as well as non-containers.
XML Templates - Archive of obsolete content
note: if you want to have the state of the disclosure triangles ("twisties") be persistent, be sure to give each node a unique "
id" attribute.
... <people
id="famouspeople" xmlns=""> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="#famouspeople" ref="*" querytype="xml"> <template> <query expr="person"/> <action> ...
...it refers to an element with that
id (without the number sign) and uses that node as the source xml node instead of a separate file.
...you may wish to h
ide the inline xml by placing it ins
ide a h
idden box.
Adding Buttons - Archive of obsolete content
syntax of buttons the button tag has the following syntax: <button
id="
identifier" class="dialog" label="ok" image="images/image.jpg" disabled="true" accesskey="t"/> the attributes are as follows, all of which are optional:
id a unique
identifier so that you can
identify the button with.
... <button
id="find-button" label="find"/> note: firefox does not allow you to open chrome windows from web pages, so the view links in the tutorial will open in normal browser windows.
...the code to add is shown in red below: <?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"> <button
id="find-button" label="find"/> <button
id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also.
... the window has been given a horizontal orientation so that the two buttons appear bes
ide each other.
Creating an Installer - Archive of obsolete content
xpinstall packages mozilla prov
ides a mechanism which can be used to package xul windows, scripts, skins and other files into single file installers.
...ins
ide the jar file, you can add all the various files that you want to have installed.
...these files will typically be placed ins
ide a directory in the archive but they do not have to be.
...the components prov
ided with mozilla are stored in this manner.
Modifying the Default Skin - Archive of obsolete content
firefox prov
ides a skin by default, and you may download others.
... customize with userchrome.css if you place a file called 'userchrome.css' in a directory called 'chrome' ins
ide your user profile directory, you can overr
ide settings without changing the archives themselves.
... menuitem { border: 1px sol
id red; } if you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images.
...you should avo
id putting references to images directly in xul files if you want your content to be skinnable.
Progress Meters - Archive of obsolete content
the progress meter will have an animation such as a spinning barber pole or a sl
iding box, depending on the platform and theme used.
... determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress
id="
identifier" mode="determined" value="50" max="100"/> the attributes are as follows:
id the unique
identifer of the progress meter mode the type of the progress meter.
... <textbox
id="find-text"/> <html:progress value="50" max="100" style="margin: 4px;"/> <button
id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the window.
...a script will show and h
ide it as necessary.
Scroll Bars - Archive of obsolete content
some elements, such as text boxes, will also add scroll bars as necessary when the content ins
ide is too large.
...a scroll bar is made up of several parts: the sl
ider, which is the main part of the scroll bar with the adjustable box, and the two arrow buttons on the end.
... the syntax of a scroll bar is as follows: <scrollbar
id="
identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/> the attributes are as follows:
id the unique
identifer of the scroll bar orient this specifies the direction of the scroll bar.
... curpos this indicates the current position of the scroll bar thumb (the box that you can sl
ide back and forth.) the value ranges from 0 to the value of maxpos.
XBL Inheritance - Archive of obsolete content
inheritance sometimes you may want to create an xbl w
idget that is similar to an existing one.
...example 1 : source <binding
id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
...this means that we inherit all of the content and behavior prov
ided by the textbox binding.
...(you can also use the value addrbook to look up addresses in the address book.) firefox uses a different autocomplete mechanism than the mozilla suite, see xul:textbox (firefox autocomplete) in the next section, we'll see an example xbl-defined w
idget.
Using multiple DTDs - Archive of obsolete content
but there are situations where you want to use multiple dtds, for example to localize common w
idgets used in all your xul files, additionally to the ones specific to the file.
... 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 ins
ide 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 acc...
...then accessing entities from both dtds would look like this: <button
id="somebutton" label="&somebutton.label"> ...
... <button
id="okbutton" label="&okbutton.label"> note that there is no such thing as namespaces with multiple dtds.
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 attach the icon to, in the chrome/icons/default subfolder of your bundle.
... these icons will overr
ide the global icon files, which are located in app_dir/browser/chrome/icons/default.
... note: the global icons overr
ide does not currently work due to bug bug 543490.
... global icon files currently take precedence and bundles are only searched for icons which are not prov
ided by the application.
XUL Accesskey FAQ and Policies - Archive of obsolete content
avo
id duplicates don't use the same accesskey letter twice in the same window.
... use letters with w
ide w
idths, such as w, m, and capital letters.
... avo
id: letters with descenders, such as p, g, q, or y.
... letters that are only one pixel w
ide, such as i or l.
attribute.align - Archive of obsolete content
if the box is larger than the total size of the children, the extra space is placed on the right or bottom s
ide.
... center extra space is split equally along each s
ide of the child elements, resulting the children being placed in the center of the box.
...if the box is larger than the total size of the children, the extra space is placed on the left or top s
ide.
...for a vertical box, the children are stretched to be the w
idth of the box.
bindings - Archive of obsolete content
this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly ins
ide the rule element.
... more information is available in the template gu
ide.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth object type: string the object of the element.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode...
box - Archive of obsolete content
if the box has an orient attribute that is set to horizontal, the child elements are la
id out from left to right in the order that they appear in the box.
... if orient is set to vertical, the child elements are la
id out from top to bottom.
...rtical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
command - Archive of obsolete content
commands are
identified by their
id.
...see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command
id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... currently, the content still receives these key events, even though it can't overr
ide them.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyatt...
groupbox - Archive of obsolete content
if a caption element is placed ins
ide the groupbox, it will be used as a caption which appears along the top of the 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, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, gete...
...(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprov
ider ...
preferences - Archive of obsolete content
examples <preferences> <preference
id="pref_one" name="extensions.myextension.one" type="bool"/> <preference
id="pref_two" name="extensions.myextension.two" type="string"/> ...
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods vo
id firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to the specified preference element.
... vo
id observe(in nsisupports asubject, in string atopic, in wstring adata); nsiobserver method used internally to react to changes to preferences listed as children of this element.
progressmeter - Archive of obsolete content
attributes max, mode, value properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined"
id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementby
id('myprogress').mode = (state) ?
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode...
...(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprov
ider ...
richlistitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an indiv
idual item in a richlistbox.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require val
idation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
... control type: element
id gets and sets the value of the control attribute.
...(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprov
ider, ns
idomxulselectcontrolitemelement ...
toolbargrippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] not in firefox the notch on the s
ide of a toolbar which can be used to collapse and expand it.
... properties accessible examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessible type: nsiaccessi...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname...
...selectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprov
ider ...
treechildren - Archive of obsolete content
for content trees, the content will be placed ins
ide this element.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
...tnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), 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> <treechildren> <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 lunch"/> ...
treerow - Archive of obsolete content
it should be placed ins
ide a treeitem element.
...if child rows are necessary, they should be placed in a treechildren element ins
ide the parent treeitem.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
Building XULRunner with Python - Archive of obsolete content
or, if you are interested in working with xulrunner with python on linux, see mark lise's post with the python extensions enabled xulrunner prov
ides python script access to the dom and xpcom in addition to the usual java script.
...this page prov
ides instructions in the hope of eliminating much trial and error.
...you will also want to disable any virus scanner res
ident monitoring as that will slow builds.
...for example def onload(): btntest = document.getelementby
id("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
XULRunner - Archive of obsolete content
it prov
ides mechanisms for installing, upgrading, and uninstalling these applications.
... xulrunner also prov
ides libxul, a solution which allows the embedding of mozilla technologies in other projects and products.
... overview development plan what xulrunner prov
ides xulrunner faq nightly builds: unstable-trunk documentation getting started with xulrunner short tutorial on building desktop applications with xulrunner.
... debug documentation steps to configure venkman to debug your app xulrunner gu
ide a fairly complete, but outdated, introduction and tutorial for xulrunner which collates much of the documentation found here.
2006-11-22 - Archive of obsolete content
idispatch support for jaws scripting needed aaron leventhal stated that currently there is no
idispatch support for iaccessible's in mozilla.
... if anyone has experience with these issues, and is comfortable helping out in the mozilla/accessible module, would you please take a look at https://bugzilla.mozilla.org/show_bug.cgi?
id=166994 he stated that he almost had it working a couple of years ago.
... the bug has a very old patch which will no longer be easy to apply but may prov
ide clues as to where they are going wrong.
... discussions image labelling for blind help machines frank hecker brought up a val
id discussion about the problem of getting images tagged for use by screen.
2006-11-03 - Archive of obsolete content
does firefox prov
ide any classes/objects or events to windows wmi ?
... a user asks if firefox prov
ides any classes/objects or events to windows wmi.
... firing pageshow/pageh
ide when users change tabs discussion about using events that could be fired when the user changes a tab.
... ff 1.5 h
iding a user adds their "two cents" about firefox 1.5 now being easily available for download.
2006-11-04 - Archive of obsolete content
firefox prov
ide any classes/objects or events to windows wmi ?
... a user asks if firefox prov
ides any classes/objects or events to windows wmi.
... pageshow/pageh
ide when users change tabs discussion about using events that could be fired when the user changes a tab.
... 1.5 h
iding a user adds their "two cents" about firefox 1.5 now being easily available for download.
2006-10-06 - Archive of obsolete content
discussions is thunderbird using a val
id w3c coding?
... peter lairo requested someone who are knowledgeable in w3c standards to confirm if the use of <blockquote type="cite"> is val
id w3c code.
... dav
id bienvenu suggests a top down architectural description of tb's data structures along with documentation about extracting them.
... brian king also mentions that documentation on handling message headers on the ui s
ide would be helpful.
2006-11-03 - Archive of obsolete content
tb storage-
idea tb is planning to change from mbox-format storage to database-based storage.
... suggestion made for e-mail popup it suggested that the e-mail popup duration should depends on number of messages and examples of this
idea is prov
ided.
... links in tb is not sent to firefox directly cédric corazza prov
ided a code solution for this problem.
... bug found in nslocalmailfolder.cpp dav
id bienvenu is following up on this bug.
2006-10-06 - Archive of obsolete content
../../dist/host/bin/host_xp
idl -m header -w -i~mozilla/xpcom/base -i../../dist/
idl -o _xp
idlgen/nsiconsolelistener ~/mozilla/xpcom/base/nsiconsolelistener.
idl gmake[2]: *** [_xp
idlgen/nsiconsolelistener.h] bus error gmake[2]: *** deleting file `_xp
idlgen/nsiconsolelistener.h' gmake[1]: *** [export] error 2 make: *** [all] error 2:: on octorber 4th ludwig hügelschäfer responded to his original post with the solution to his own problem.
... he found out that a broken host_xp
idl was the source of the problem.
... in order to fix this he deleted the tree part where host_xp
idl was located.
...https://bugzilla.mozilla.org/show_bug.cgi?
id=354866 taking moz180-linux-tbox down temporarily oct 6th early afternoon (pdt) on october 5th rob helmer announced that: he will be taking the 1.8.0 branch (en-us and l10n) linux tinderbox down tomorrow afternoon (oct 6th, pdt) in order to clone the disks and create a staging server for the release automation work.
2006-11-17 - Archive of obsolete content
alex vincent ran into some difficulty with xulrunner extension manager not recognizing xulw
idgets for verbosio?
... however he found out that it was a result of his flat-chrome version of xul w
idgets and works fine with the jarred-chrome version.
...win2xul asks for any quick pointers, opinions, experience, suggestions or
ideas on where xulrunner might leak memory bug 319654 was fixed on trunk recently.
... nickolay ponomarev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outs
ide the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x?
2006-11-03 - Archive of obsolete content
discussions extended val
idation certificates major discussion this week started by gervase markham about security certificates, more specifically extended val
idation certificates.
... the aim of the group is to develop a new, higher standard for the val
idation which is done before certificate issuance, called extended val
idation.
... the
idea was that such certs would be presented differently in the ui, to give the cas a reason to go to the extra effort, and to give customers a reason to buy them.
... a decision has to be made as to the usefulness of extended val
idation certificates and weather or not they will make a difference to the reliability of information in certificates.
Test your skills: Media Queries and Responsive Design - Learn web development
everything you need to know to complete this task was covered in the gu
ide to media queries, and the other layout lessons in this section.
...download the code and work locally, or use an online tool such as codepen, jsf
iddle, or glitch to work on the tasks.
... your task is to create a desktop version of this layout which displays when there is enough screen w
idth to accomodate it.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsf
iddle, or glitch.
What is the difference between webpage, website, web server, and search engine? - Learn web development
a web page can embed a variety of different types of resources such as: style information — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and v
ideos.
...each web page of a given website prov
ides explicit links—most of the time in the form of clickable portion of text—that allow the user to move from one page of the website to another.
... to access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or homepage (casually referred as "the home"): the
ideas of a web page and a website are especially easy to confuse for a website that contains only one web page.
...in our previous example, if we sa
id, "my web server is not responding", it means that multiple websites on that web server are not available.
What software do I need to build a website? - Learn web development
we'll prov
ide a few links in this article.
...you can buy space on a server from various prov
iders (see how much does it cost to do something on the web?).
... once you settle on which prov
ider to use, the prov
ider will email you the access information, usually in the form of an sftp url, username, password, and other information needed to connect to their server.
...you should make sure your hosting prov
ider allows use of a secure connection, e.g.
Example - Learn web development
a payment form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio"
id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="radio"
id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio"
id="title_3" name="title" value="q"> queen </label> ...
... </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text"
id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email"
id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password"
id="pwd" name="password"> </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </label> <select
id="card" name="u...
...sercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel"
id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date"
id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">val
idate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0...
...; padding: 0; list-style: none; } form { margin: 0 auto; w
idth: 400px; padding: 1em; border: 1px sol
id #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; w
idth: 120px; text-align: right; } input, textarea { font: 1em sans-serif; w
idth: 250px; box-sizing: border-box; border: 1px sol
id #999; } input[type=checkbox], input[type=radio] { w
idth: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { w
idth: 250px; box-sizing: border-box; margin-left: 136px; border: 1px sol
id #999; } button { margin: 20px 0 0 124px; } label { position: relative; } la...
Use HTML to solve common problems - Learn web development
how to create a basic html document how to div
ide a webpage into logical sections how to set up a proper structure of headings and paragraphs basic text-level semantics html specializes in prov
iding semantic information for a document, so html answers many questions you might have about how to get your message across best in your document.
...bbreviations 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, which 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 v
ideo content to a webpage scripting & styling html only sets up document structure.
...we encourage you to go over our full dedicated gu
ide.
...it prov
ides tools to handle common internationalization issues.
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 such as codepen, jsf
iddle, or glitch to work on the tasks.
... html text basics 1 in this task we want you to mark up the prov
ided html using semantic heading and paragraph elements.
... html text basics 3 in this task you are prov
ided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsf
iddle, or glitch.
JavaScript building blocks - Learn web development
gu
ides making decisions in your code — conditionals in any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs.
...functions allow you to store a piece of code that does a single task ins
ide a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
... build your own function with most of the essential theory dealt with previously, this article prov
ides a practical experience.
... assessments the following assessment will test your understanding of the javascript basics covered in the gu
ides above.
Test your skills: Math - 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 such as codepen, jsf
iddle, or glitch to work on the tasks.
... math 2 in the second task you are already prov
ided with two calculations, with the results stored in the variables result and result2.
...go back and update the original calculations you were prov
ided with so that they give this final result.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsf
iddle, or glitch.
Test your skills: Object 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 such as codepen, jsf
iddle, or glitch to work on the tasks.
... object basics 1 in this task you are prov
ided with an object literal, and your tasks are to store the value of the name property ins
ide the catname variable, using bracket notation.
...we want you to rewrite the greeting() method so that it logs "hello, sa
id bertie the cymric." to the browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
... if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsf
iddle, or glitch.
JavaScript performance - Learn web development
previous overview: performance next while images and v
ideo account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on performance.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-s
ide web technologies.
... similar to images and v
ideo, the best way to improve performance is to omit what is not, in fact, necessary.
... measuring performance multimedia: images multimedia: v
ideo javascript performance best practices.
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom w
idgets such as menus and tree views.
... these w
idgets are often not even keyboard focusable, and assistive technologies do not understand these w
idgets.
... this document shows several interactive desktop-style w
idgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
...since this is a worldw
ide effort, there is always a good chance to find someone to chat with there, day or night.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image w
idth="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search">...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image w
idth="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2m
ideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fg...
...wj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfs
idtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedd...
...ed ins
ide the template url.
Creating a Language Pack
.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_
id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded.
... $ make
ident fx_revision 237dccbcb967 build
id 20091126033851 you can now go back to your source hg clone.
...issue the following command: $ make merge-x-testing locale_mergedir=$(pwd)/mergedir rm -f -rf mergedir macosx_deployment_target= compare-locales -m mergedir /users/your_
id/mozilla/vc/mozilla-aurora/browser/locales/l10n.ini /users/your_
id/mozilla/vc/l10n-central x-testing x-testing: browser chrome browser aboutcerterror.dtd // add and localize this file ...
... $ cd ../../dist/ $ ls -l total 100216 drwxr-xr-x 5 your_
id your_status 170 27 lis 13:33 branding -rw-r--r--@ 1 your_
id your_status 25248119 26 lis 14:34 firefox-3.6b5pre.en-us.mac.dmg -rw-r--r--@ 1 your_
id your_status 26056973 27 lis 13:40 firefox-3.6b5pre.x-testing.mac.dmg drwxr-xr-x 3 your_
id your_status 102 27 lis 13:38 install drwxr-xr-x 3 your_
id your_status 102 27 lis 13:40 l10n-stage drwxr-xr-x 3 your_
id your_status ...
Creating a spell check dictionary add-on
<?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:
id>locale-code@dictionaries.addons.mozilla.org</em:
id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:targetap...
...plication> <description> <em:
id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:
id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:
id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:
id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:targetapplication> <description> <em:
id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:
id> <em:minversion>2.15a1</em:minversion> <em:maxversion>2.49</em:maxversion> </description> </em:targetapplication> ...
... </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:
id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example the german "old spelling" versus "new spelling" dictionaries), you may need to choose another
id, that follows the rules of em:
id.
... if you update an existing dictionary add-on, you must keep the existing em:
id, or your users will not be updated to the latest version.
Adding APIs to the navigator object
programmatically adding an object to navigator var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .getservice(components.interfaces.nsicategorymanager); categorymanager.addcategoryentry("javascript-navigator-property", "myapi", my_contract_
id, false, true); this adds a new object, myapi, to the window.navigator object.
... the newly added object is a reference to the component specified by the contract
id my_contract_
id.
... you can learn more about contract
ids are unique text
identifiers for xpcom components.
... 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 gu
id and replace the "ffff" sections in both the component and contract lines with your gu
id.
PR_PopIOLayer
syntax #include <prio.h> prfiledesc *pr_popiolayer( prfiledesc *stack, prdesc
identity
id); parameters the function has the following parameters: stack a pointer to a prfiledesc object representing the stack from which the specified layer is to be removed.
...
id identity of the layer to be removed from the stack.
... if the layer is not found in the stack or cannot be popped (for example, the bottommost layer), the function returns null with the error code pr_inval
id_argument_error.
... even if the
identity indicates the top layer of the stack, the reference returned is not the file descriptor for the stack and that file descriptor remains val
id.
Building NSS
ideally, also install gyp and ninja and put them on your path.
... if you don't have a domain suffix you can add an entry to /etc/hosts (on windows, c:\windows\system32\drivers\etc\hosts) as follows: 127.0.0.1 localhost.localdomain val
idate this opening a command shell and typing: ping localhost.localdomain.
... remove the use_64=1 overr
ide if using a 32-bit build.
... test results running all tests can take a cons
iderable amount of time.
NSS 3.16.2.3 release notes
notable changes in nss 3.16.2.3 bug 1057161: check that an imported elliptic curve public key is val
id.
... previously nss would only val
idate the peer's public key before performing ecdh key agreement.
... now ec public keys are val
idated at import time.
... bugs fixed in nss 3.16.2.3 bug 1057161 - nss hangs with 100% cpu on inval
id ec key bug 1036735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.16.2 release notes
the tls application layer protocol negotiation (alpn) extension is also supported on the server s
ide.
... new functions in cert.h cert_addextensionbyo
id - adds an extension to a certificate.
... it is the same as cert_addextension except that the o
id is represented by a secitem instead of a seco
idtag.
... the certutil commands supports generic certificate extensions, by loading binary data from files, which have been prepared using external tools, or which have been extracted and dumped to file from other existing certificates: --dump-ext-val o
id --extgeneric o
id:critical-flag:filename[,o
id:critical-flag:filename]...
NSS 3.20 release notes
for backward compatibility reasons, the server s
ide implementation of the tls library keeps all dhe ciphersuites disabled by default.
... the server s
ide implementation of the tls does not support session tickets while using a dhe ciphersuite (see bug 1174677).
... support for the following ciphersuites has been added: tls_dhe_dss_with_aes_128_gcm_sha256 tls_dhe_dss_with_aes_128_cbc_sha256 tls_dhe_dss_with_aes_256_cbc_sha256 by default, the server s
ide tls implementation will use dhe parameters with a size of 2048 bits when using dhe ciphersuites.
...in future versions of the tls implementation, a tls client might show a preference for certain dhe parameters, and the nss tls server s
ide implementation might select a matching entry from the set of parameters that have been configured as preferred on the server s
ide.
NSS 3.21 release notes
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 m
id-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
... new types in pkcs11t.h ck_tls12_master_key_derive_params{_ptr} - parameters {or pointer} for ckm_tls12_master_key_derive ck_tls12_key_mat_params{_ptr} - parameters {or pointer} for ckm_tls12_key_and_mac_derive ck_tls_kdf_params{_ptr} - parameters {or pointer} for ckm_tls_kdf ck_tls_mac_params{_ptr} - parameters {or pointer} for ckm_tls_mac in sslt.h sslhashtype -
identifies a hash function sslsignatureandhashalg -
identifies a signature and hash function sslpreliminarychannelinfo - prov
ides information about the session state prior to handshake completion new macros in nss.h nss_rsa_min_key_size - used with nss_optionset and nss_optionget to set or get the minimum rsa key size nss_dh_min_key_size - used with nss_optionset and nss_op...
...sa_min_key_size - used with nss_optionset and nss_optionget to set or get the minimum dsa key size in pkcs11t.h ckm_tls12_master_key_derive - derives tls 1.2 master secret ckm_tls12_key_and_mac_derive - derives tls 1.2 traffic key and iv ckm_tls12_master_key_derive_dh - derives tls 1.2 master secret for dh (and ecdh) cipher suites ckm_tls12_key_safe_derive and ckm_tls_kdf are
identifiers for additional pkcs#12 mechanisms for tls 1.2 that are currently unused in nss.
... ckm_tls_mac - computes tls finished mac in seco
idt.h nss_use_alg_in_ssl_kx - policy flag indicating that keys are used in tls key exchange in sslerr.h ssl_error_rx_short_dtls_read - error code for failure to include a complete dtls record in a udp packet ssl_error_no_supported_signature_algorithm - error code for when no val
id signature and hash algorithm is available ssl_error_unsupported_signature_algorithm - error code for when an unsupported signature and hash algorithm is configured ssl_error_missing_extended_master_secret - error code for when the extended master secret is missing after having been negotiated ssl_error_unexpected_extended_master_secret - error code for receiving an extended master secret when previously not negotiated in ss...
NSS 3.28 release notes
in order to prepare for this future change, we'd like to encourage all users of nss to overr
ide the standard nss 3.28 build configuration, by defining nss_enable_tls_1_3=1 at build time.
...note that this detection has a one-off performance cost, which can be avo
ided by using the ssl_namedgroupconfig function, to limit supported groups to those that nss prov
ides.
... new functions to configure signature schemes are prov
ided: ssl_signatureschemeprefset, ssl_signatureschemeprefget.
... the certificate val
idation code contains checks to no longer trust certificates that are issued by old wosign and startcom cas, after october 21, 2016.
NSS 3.47 release notes
bug 1570501 - add cmac to freebl and pkcs #11 libraries bugs fixed in nss 3.47 bug 1459141 - make softoken cbc padding removal constant time bug 1589120 - more cbc padding tests bug 1465613 - add ability to distrust certificates issued after a certain date for a specified root cert bug 1588557 - bad debug statement in tls13con.c bug 1579060 - mozilla::pkix tag definitions for issuerunique
id and subjectunique
id shouldn't have the constructed bit set bug 1583068 - nss 3.47 should pick up fix from bug 1575821 (nspr 4.23) bug 1152625 - support aes hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 1586947 - pk11_importandreturnprivatekey does not store nickname for ec keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb ...
...ng with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 1267894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fix unportable grep expression in test scripts bug 1234830 - [c
id 1242894][c
id 1242852] unused values bug 1580126 - fix build failure on aarch64_be while building freebl/gcm bug 1385039 - build nspr tests as part of nss continuous integration bug 1581391 - fix build on openbsd/arm64 after bug #1559012 bug 1581041 - mach-commands -> mach-completion bug 1558313 - code bugs found by clang scanners.
...algorithms to known algorithms bug 1560329 - drbg: add continuous self-test on entropy source bug 1579290 - asan builds should disable lsan while building bug 1385061 - build nspr tests with nss make; add gyp parameters to build/run nspr tests bug 1577359 - build atob and btoa for thunderbird bug 1579036 - confusing error when trying to export non-existent cert with pk12util bug 1578626 - [c
id 1453375] ub: decrement nullptr.
... bug 1578751 - ensure a consistent style for pk11_find_certs_unittest.cc bug 1570501 - add cmac to freebl and pkcs #11 libraries bug 657379 - nss uses the wrong o
id for signaturealgorithm field of signerinfo in cms for dsa and ecdsa bug 1576664 - remove -mms-bitfields from mingw nss build.
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 vo
id 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, vo
id *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...
...needuserinit(slot)) { newpw = initslotpassword(slot, pr_false, &pwdata); rv = pk11_initpin(slot, (char*)null, newpw); } else { for (;;) { oldpw = getmodulepassword(slot, pr_false, &pwdata); if (pk11_checkuserpassword(slot, oldpw) != secsuccess) { if (pwdata.source == pw_none) { pr_fprintf(pr_stderr, "inval
id password.
... try again.\n"); } else { pr_fprintf(pr_stderr, "inval
id password.\n"); port_memset(oldpw, 0, pl_strlen(oldpw)); port_free(oldpw); return secfailure; } } else { break; } port_free(oldpw); } newpw = initslotpassword(slot, pr_false, &newpwdata); if (pk11_changepw(slot, oldpw, newpw) != secsuccess) { pr_fprintf(pr_stderr, "failed to change password.\n"); return secfailure; } port_memset(oldpw, 0, pl_strlen(oldpw)); port_free(oldpw); pr_fprintf(pr_stdout, "password changed successfully.\n"); } port_memset(newpw, 0, pl_strlen(newpw)); port_fre...
nss tech note2
for example, to log the softoken, use: nss_debug_pkcs11_module="nss internal pkcs #11 module" note: in the command prompt on windows, do not quote the name of the target module, otherwise the quotes are cons
idered part of the name.
...to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthread
id[nsprthread
id]: c_xxx osthread
id[nsprthread
id]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: rv = 0x0 2.
...to enable this mode, set: nspr_log_modules=nss_mod_log:3 nspr_log_file=<logfile> the output format is: osthread
id[nsprthread
id]: c_xxx osthread
id[nsprthread
id]: arg1 = 0xaaaaaaaa ...
... osthread
id[nsprthread
id]: argn = 0xaaaaaaaa osthread
id[nsprthread
id]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: 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 which it will set a value (c_getslotlist above), this mode will display the value upon return.
FC_GetTokenInfo
syntax ck_rv fc_gettokeninfo(ck_slot_
id slot
id, ck_token_info_ptr pinfo); parameters fc_gettokeninfo has two parameters: slot
id the
id of the token's slot pinfo points to a ck_token_info structure description fc_gettokeninfo returns information about the token in the specified slot.
... manufacturer
id:
id of the device manufacturer, "mozilla foundation", padded with spaces to 32 characters and not null-terminated.
... ckr_slot_
id_inval
id the specified slot number is out of the defined range of values.
... examples note the use of the %.32s format string to print the label and manufacturer
id members of the ck_token_info structure.
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default prov
iders for cryptographic operations.
...options -a the following certfile is base64 encoded -b yymmddhhmmz val
idate date (default: now) -d directory database directory -f enable cert fetching from aia url -o o
id set policy o
id for cert val
idation(format o
id.1.2.3) -p use pkix library to val
idate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
... -r following certfile is raw binary der (default) -t following cert is explicitly trusted (overr
ides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode.
...possible types are "donotuse", "forb
idfetching", "ignoredefaultsrc", "requireinfo" and "failifnoinfo".
sslkey.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style gu
ide.
... 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 such as the key3.db database prov
ided with communicator.
... syntax #include <key.h> #include <keyt.h> seckeykeydbhandle *seckey_getdefaultkeydb(vo
id); returns the function returns a handle of type seckeykeydbhandle.
... syntax #include <key.h> #include <keyt.h> vo
id seckey_destroyprivatekey(seckeyprivatekey *key); parameter this function has the following parameter: key a pointer to the private key structure to destroy.
SSL functions
the mozilla cross reference (dxr) link for each function prov
ides access to the function definition, prototype definition, and source code references.
... ssl_cipherpolicyget mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherprefget mxr 3.2 and later ssl_cipherprefgetdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpservers
idcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversession
idcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.4 and later ssl_getchannelinfo mxr 3.4 and later ssl_getciphersuiteinfo...
... mxr 3.4 and later ssl_getclientauthdatahook mxr 3.2 and later ssl_getmaxservercachelocks mxr 3.4 and later ssl_getsession
id mxr 3.2 and later ssl_getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ssl_importfd mxr 3.2 and later ssl_inheritmpservers
idcache mxr 3.2 and later ssl_inval
idatesession mxr 3.2 and later ssl_localcertificate mxr 3.4 and later ssl_optionget mxr 3.2 and later ssl_optiongetdefault mxr 3.2 and later ssl_optionset mxr 3.2 and later ssl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfileto...
... ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeer
id mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversession
idcache mxr 3.7.4 and later ...
NSS tools : signver
extended examples verifying a signature the -v option verifies that the signature in a given signature file is val
id when used to sign the given object (from the input file).
... signver -v -s signature_file -i signed_file -d sql:/home/my/sharednssdb signatureval
id=yes printing signature data the -a option prints all of the information contained in a signature file.
...still, nss requires more flexibility to prov
ide a truly shared security database.
...these new databases prov
ide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default prov
iders for cryptographic operations.
... options -a the following certfile is base64 encoded -b yymmddhhmmz val
idate date (default: now) -d directory database directory -f enable cert fetching from aia url -o o
id set policy o
id for cert val
idation(format o
id.1.2.3) -p use pkix library to val
idate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
... -r following certfile is raw binary der (default) -t following cert is explicitly trusted (overr
ides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose mode.
...possible types are "donotuse", "forb
idfetching", "ignoredefaultsrc", "requireinfo" and "failifnoinfo".
Necko Interfaces Overview
nsiioservice central necko service manages protocol handlers thin layer over protocol handlers prov
ides interface for creating uri objects from uri strings maps uri scheme to appropriate nsiprotocolhandler impl nsiuri (nsiurl, nsifileurl, nsistandardurl) represents an uri, with getters and setters for various uri parts (eg.
... scheme, host, path, ...) per protocol implementation necko prov
ides uri impl's for common uri formats (see nsstandardurl, nssimpleuri) nsichannel : nsirequest represents a logical connection to the resource
identified by a nsiuri per protocol implementation single use (ie.
... channel is used to download the resource once) download initiated via nsichannel::asyncopen method can be canceled via nsirequest::cancel method at anytime after invocation of asyncopen method nsiprotocolhandler a service that manages a protocol,
identified by it's uri scheme (eg.
...implementations (as well as by mailnews and chatzilla) synchronous i/o methods: openinputstream, openoutputstream asynchronous i/o methods: asyncread, asyncwrite nsitransport::asyncread takes a nsistreamlistener parameter original document information author(s): darin fisher last updated date: december 10, 2001 copyright information: portions of this content are © 1998–2007 by indiv
idual mozilla.org contributors; content available under a creative commons license | details.
Installing Pork
to tell mcpp which gcc installation to integrate itself with, place the selected gcc bin dir as the first element of your path: path=/bindir/of/my/gcc:$path if you want to use a gcc that has binaries named something other than "gcc" and "g++", or you use "ccache" for you main gcc installation and want mcpp to overr
ide a separate installation, you need to pass the options "cc=gccxxx cxx=g++xxx" to "./configure".
...if you run simply "make install" and see file permission errors, mcpp is likely trying to overr
ide your main gcc installation.
... hg clone http://hg.mozilla.org/rewriting-and-analysis/pork/ cd pork hg clone http://hg.mozilla.org/rewriting-and-analysis/elsa ./configure make building mozilla with mcpp to build mozilla with mcpp to generate annotated .ii files, use the following configure command: ac_cv_visibility_h
idden=no cc="gcc34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that get passed to mcpp.
...def_std.h - ${cxx} -e -xc++ -dm /dev/null | sort | grep -e ' *#define *[a-za-z]+' \ + ${cxx} ${cppflags} -e -xc++ -dm /dev/null | sort | grep -e ' *#define *[a-za-z]+' \ > gxx${gcc_maj_ver}${gcc_min_ver}_predef_old.h fi if test ${host_system} = sys_cygwin; then if you don't do this, mcpp will get the wrong set of automatic definitions and you'll end up with an unpleasant hybr
id x86-64/i686 build system.
Rhino license
* * redistribution and use in source and binary forms, with or without * modification, are permitted prov
ided that the following conditions * are met: * * - redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer.
... * * - redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials prov
ided with the distribution.
... * * this software is prov
ided by the copyright holders and contributors "as * is" and any express or implied warranties, including, but not limited to, * the implied warranties of merchantability and fitness for a particular * purpose are disclaimed.
... in no event shall the copyright owner or * contributors be liable for any direct, indirect, inc
idental, special, * exemplary, or consequential damages (including, but not limited to, * procurement of substitute goods or services; loss of use, data, or * profits; or business interruption) however caused and on any theory of * liability, whether in contract, strict liability, or tort (including * negligence or otherwise) arising in any way out of the use of this * software, even if advised of the possibility of such damage.
Rhino overview
javascript: the definitive gu
ide is recommended, and contains a chapter on rhino.
... security the security features in rhino prov
ide the ability to track the origin of a piece of code (and any pieces of code that it may in turn generate).
...this will prov
ide rhino the support functionality it needs to perform security-related tasks.
...setting this property to true requires that any calls that compile or evaluate javascript must supply a security domain object of any object type that will be used to
identify javascript code.
Functions
(nameexpressions are basic expressions like string and x that would eat up a huge amount of run time if the engine weren't smart enough to avo
id symbol table lookups.) general closures are the base case.
...this is slow, not only because walking the scope chain is a drag, but also because we'd rather avo
id actually creating the scope chain at all, if possible.
...flat closures and null closures have been removed: https://bugzilla.mozilla.org/show_bug.cgi?
id=730497 https://bugzilla.mozilla.org/show_bug.cgi?
id=739808 name lookups in order of speed, fastest to slowest.
...outs
ide all functions, if a name definitely refers to a global for which we have seen a var, const, or function declaration, then we emit a js_defvar instruction in the script prelude and access the global using jsop_{get,set,call}gvar.
Invariants
or, "the zen of sp
idermonkey".
...so code must check js_val
idcontextpointer(ownercx) before dereferencing it.
... almost all jsapi callbacks prov
ide a request; that is, when we call a callback with a cx argument, we know statically that we must be in a request on cx there.
... locks "are we holding the runtime-w
ide gc lock?" is a static yes or no for almost every line of code.
JS::Compile
this article covers features introduced in sp
idermonkey 17 compile a script for execution.
... syntax // added in sp
idermonkey 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(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, ...
... see also the jsapi user gu
ide contains example code using compiled scripts.
... mxr
id search for js::compile js::evaluate js::compileoffthread js::compilefunction js_decompilescript bug 771705 bug 1143793 -- removed obj parameter ...
JS::DeflateStringToUTF8Buffer
this article covers features introduced in sp
idermonkey 38 encode the given string as utf8 into given buffer.
... syntax // new in jsapi 52 vo
id deflatestringtoutf8buffer(jsflatstring* src, mozilla::rangedptr<char> dst, size_t* dstlenp = nullptr, size_t* numcharsp = nullptr); // obsolete in sp
idermonkey 49 vo
id deflatestringtoutf8buffer(jsflatstring* src, mozilla::rangedptr<char> dst); name type description src jsflatstring * the pointer to the string to deflate.
... if dstlenp is prov
ided, it will be updated to hold the number of bytes written to the buffer.
... if numcharsp is prov
ided, it will be updated to hold the number of unicode characters written to the buffer.
JS::Evaluate
this article covers features introduced in sp
idermonkey 17 compile and execute a script.
... syntax // added in sp
idermonkey 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 &scopechain, const readonlycompileopt...
...ions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in sp
idermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, c...
... see also mxr
id search for js::evaluate js::compile js_executescript bug 771705 bug 1097987 -- remove obj parameter ...
JS::GetSelfHostedFunction
this article covers features introduced in sp
idermonkey 31 create a new javascript function that is implemented in self-hosted javascript.
... syntax jsfunction* js::getselfhostedfunction(jscontext* cx, const char* selfhostedname, js::handle<js
id>
id, unsigned nargs); name type description cx jscontext* the context from which to get the function.
...
id js::handle<js
id> a pointer to js
id of the name to assign to the new function.
... see also mxr
id search for js::getselfhostedfunction bug 1140573 ...
JS::MutableHandle
this article covers features introduced in sp
idermonkey 17 reference to a t that has been rooted elsewhere.
... vo
id set(t v) sets the value of *ptr to v.
... there are typedefs available for the main types: namespace js { typedef mutablehandle<jsfunction*> mutablehandlefunction; typedef mutablehandle<js
id> mutablehandle
id; typedef mutablehandle<jsobject*> mutablehandleobject; typedef mutablehandle<jsscript*> mutablehandlescript; typedef mutablehandle<jsstring*> mutablehandlestring; typedef mutablehandle<js::symbol*> mutablehandlesymbol; typedef mutablehandle<value> mutablehandlevalue; } see also mxr
id search for js::mutablehandle mxr
id search for js::mutablehandlefunctio...
...n mxr
id search for js::mutablehandle
id mxr
id search for js::mutablehandleobject mxr
id search for js::mutablehandlescript mxr
id search for js::mutablehandlestring mxr
id search for js::mutablehandlesymbol mxr
id search for js::mutablehandlevalue js::rooted js::handle gc rooting gu
ide bug 770759 bug 761391 - added js::mutablehandlescript bug 645416 - added js::mutablehandlesymbol ...
JS::NewFunctionFromSpec
syntax jsfunction* js::newfunctionfromspec(jscontext* cx, const jsfunctionspec* fs, handle
id id); name type description cx jscontext * the context in which to define functions.
... behavior handle
id the result of a successful call to propertyspecnametopermanent
id(cx, fs->name, &
id).
...
id is the result of a successful call to propertyspecnametopermanent
id(cx, fs->name, &
id).
... see also mxr
id search for js::newfunctionfromspec js_definefunctions bug 1054756 - added ...
JS::Remove*Root
try to avo
id using it.
... this article covers features introduced in sp
idermonkey 31 unregister a pointer to a gc thing so that it is no longer a member of the garbage collector's root set.
... syntax vo
id removevalueroot(jscontext *cx, js::heap<js::value> *vp); vo
id removestringroot(jscontext *cx, js::heap<jsstring *> *rp); vo
id removeobjectroot(jscontext *cx, js::heap<jsobject *> *rp); vo
id removescriptroot(jscontext *cx, js::heap<jsscript *> *rp); vo
id removevaluerootrt(jsruntime *rt, js::heap<js::value> *vp); vo
id removestringrootrt(jsruntime *rt, js::heap<jsstring *> *rp); vo
id removeobjectrootrt(jsruntime *rt, js::heap<jsobject *> *rp); vo
id removescriptrootrt(jsruntime *rt, js::heap<jsscript *> *rp); name type description cx jscontext * the context from which to remove the root.
... see also mxr
id search for js::removevalueroot mxr
id search for js::removestringroot mxr
id search for js::removeobjectroot mxr
id search for js::removescriptroot mxr
id search for js::removevaluerootrt mxr
id search for js::removestringrootrt mxr
id search for js::removeobjectrootrt mxr
id search for js::removescriptrootrt bug 912581 bug 1107639 ...
JS::Rooted
this article covers features introduced in sp
idermonkey 17 local variable of type t whose value is always rooted.
... t &operator=(const rooted &value) vo
id set(t value) bool operator!=(const t &other) const compares ptr and other.
... there are typedefs available for the main 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 sp
idermonkey 38 typedef rooted<js
id> rooted
id; typedef rooted<js::value> rootedvalue; } see also mxr
id search for js::rooted mxr
id search for js::rootedobject mxr
id search for js::rootedfunction mxr
id search for js::rootedscript mxr
id search for js::rootedstring mxr
id search for js::rootedsymbol mxr
id search for js::rooted
id mxr
id search for js::rootedvalue js::ha...
...ndle js::mutablehandle gc rooting gu
ide bug 756823 bug 761391 - added js::rootedscript bug 645416 - added js::rootedsymbol ...
nsIIFrameBoxObject
layout/xul/base/public/nsiiframeboxobject.
idlscriptable please add a summary to this article.
...note: please cons
ider using nsicontainerboxobject instead.
... attributes attribute type description docshell ns
idocshell read only.
... obsolete since gecko 1.9 the ns
idocshell object that manages the contained document.
nsIInterfaceRequestor
xpcom/base/nsiinterfacerequestor.
idlscriptable this interface defines a generic interface for requesting interfaces that a given object might prov
ide access to.
...the main difference is that interfaces returned are not required to prov
ide a way back to the object implementing nsiinterfacerequestor.
...method overview vo
id getinterface(in nsi
idref uu
id, [i
id_is(uu
id),retval] out nsqiresult result); methods getinterface() retrieves the specified interface pointer.
... vo
id getinterface( in nsi
idref uu
id, [i
id_is(uu
id),retval] out nsqiresult result ); parameters uu
id the i
id of the interface being requested.
nsILoadGroup
netwerk/base/public/nsiloadgroup.
idlscriptable a load group maintains a collection of nsirequest objects.
... inherits from: nsirequest last changed in gecko 1.7 method overview vo
id addrequest(in nsirequest arequest, in nsisupports acontext); vo
id 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).
...vo
id addrequest( in nsirequest arequest, in nsisupports acontext ); parameters arequest the request to be added to the load group.
...vo
id removerequest( in nsirequest arequest, in nsisupports acontext, in nsresult astatus ); parameters arequest the request to be removed from the load group.
nsIMIMEInputStream
netwerk/base/public/nsimimeinputstream.
idlscriptable the mime stream separates headers and a datastream.
...to create an instance, use: var mimeinputstream = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); method overview vo
id addheader(in string name, in string value); vo
id setdata(in nsiinputstream stream); attributes attribute type description addcontentlength boolean when true a "content-length" header is automatically added to the stream.
...vo
id addheader( in string name, in string value ); parameters name name of the header.
...vo
id setdata( in nsiinputstream stream ); parameters stream stream containing the data for the stream.
nsIMenuBoxObject
layout/xul/base/public/nsimenuboxobject.
idlscriptable represents the box object for a xul menu.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in ns
idomkeyevent keyevent); vo
id openmenu(in boolean openflag); attributes attribute type description activechild ns
idomelement the currently active menu or menuitem child of the menu box.
...methods handlekeypress() boolean handlekeypress( in ns
idomkeyevent keyevent ); parameters keyevent the key event to handle for the menu.
...openmenu() vo
id openmenu( in boolean openflag ); parameters openflag true to open the menu or false to close it.
nsIMicrosummarySet
toolkit/components/places/public/nsimicrosummaryservice.
idlscriptable this interface prov
ides access to sets of microsummaries returned from the nsimicrosummaryservice.
... 1.0 66 introduced gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview vo
id addobserver(in nsimicrosummaryobserver observer); nsisimpleenumerator enumerate(); vo
id removeobserver(in nsimicrosummaryobserver observer); methods addobserver() add a microsummary observer to this microsummary set.
...vo
id addobserver( in nsimicrosummaryobserver observer ); parameters observer the microsummary observer to add.
...vo
id removeobserver( in nsimicrosummaryobserver observer ); parameters observer the microsummary observer to remove.
nsIMsgCompFields
« xpcom api reference summary the nsimsgcompfields interface prov
ides properties for an composition of an outgoing message.
...ttachments char * obsolete attachments obsolete, do not use anymore attachmentsarray nsisupportsarray readonly attachvcard prbool bcc astring body astring bodyisasciionly prbool cc astring characterset char * defaultcharacterset char * readonly draf
id char * dsn prbool fcc astring fcc2 astring followupto char * forcemsgencoding prbool forceplaintext prbool from astring hasrecipients prbool readonly new in thunderbird 23 indicates whether something is filled in in the to, cc, or bcc attribute.
... (bug 68784) message
id char * needtocheckcharset prbool indicates whether we need to check if the current documentcharset can represent all the characters in the message body.
...te temporaryfiles obsolete, do not use anymore to astring usemultipartalternative prbool uuencodeattachments prbool methods utility methods prbool checkcharsetconversion ( out char * fallbackcharset ); nsimsgrecipientarray splitrecipients ( in prunichar * recipients, in prbool emailaddressonly ); vo
id convertbodytoplaintext ( ); attachment handling methods vo
id addattachment ( in nsimsgattachment attachment ); vo
id removeattachment ( in nsimsgattachment attachment ); vo
id removeattachments ( ); header methods vo
id setheader(char* name, char* value); references this interface is the type of the following properties: nsimsgcompose.
nsIMsgFilter
defined in comm-central/ mailnews/ base/ search/ 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; custom
id // action
id if type is custom attribute acstring custom
id; customaction // custom action associated with custom
id // (which must be set prior to reading this attribute) readonly attribute nsimsgfiltercustomaction customaction; methods addterm() vo
id nsimsgfilter::addterm ( in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, ...
... in boolean booleanand, in acstring arbitraryheader ) getterm() vo
id nsimsgfilter::getterm ( in long termindex, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, out boolean booleanand, out acstring arbitraryheader ) appendterm() vo
id nsimsgfilter::appendterm (in nsimsgsearchterm term) createterm() nsimsgsearchterm nsimsgfilter::createterm ( ) matchhdr() vo
id nsimsgfilter::matchhdr ( in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long headersize, out boolean result ) logrulehit() vo
id nsimsgfilter::logrulehit ( ...
... in nsimsgruleaction afilteraction, in nsimsgdbhdr aheader ) createaction() nsimsgruleaction nsimsgfilter::createaction ( ) getactionat() nsimsgruleaction nsimsgfilter::getactionat (in long aindex) appendaction() vo
id nsimsgfilter::appendaction (in nsimsgruleaction action ) clearactionlist() vo
id nsimsgfilter::clearactionlist() getsortedactionlist() vo
id nsimsgfilter::getsortedactionlist (in nsisupportsarray actionlist) ...
nsIMsgSearchTerm
defined in mozilla/ mailnews/ base/ search/ public/ nsimsgsearchterm.
idl attributes attrib attribute nsmsgsearchattribvalue attrib; op attribute nsmsgsearchopvalue op; value attribute nsimsgsearchvalue value; booleanand attribute boolean booleanand; arbitraryheader attribute acstring arbitraryheader; hdrproperty /** * not to be confused with arbitraryheader, which is a header in the * rfc822 message.
... this is a property of the nsimsgdbhdr, and may have * nothing to do the message headers, e.g., gloda-
id.
... */ attribute acstring hdrproperty; custom
id ///
identifier for a custom
id used for this term, if any.
... attribute acstring custom
id; beginsgrouping attribute boolean beginsgrouping; endsgrouping attribute boolean endsgrouping; methods matchrfc822string boolean matchrfc822string(in string astring, in string charset, in boolean charsetoverr
ide); matchrfc2047string boolean matchrfc2047string(in string astring, in string charset, in boolean charsetoverr
ide); matchdate boolean matchdate(in prtime atime); matchstatus boolean matchstatus(in unsigned long astatus); matchpriority boolean matchpriority(in nsmsgpriorityvalue priority); matchage boolean matchage(in prtime days); matchsize boolean matchsize(in unsigned long size); matchlabel boolean matchlabel(in nsmsglabelvalue alabelvalue); matchjunkstatus boolean matchjunkstatus(in string ajunkscore); matchjunkpercen...
nsIMsgThread
inherits from: nsisupports method overview vo
id addchild(in nsimsgdbhdr child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in ns
idbchangeannouncer announcer); nsimsgdbhdr getchildat(in long index); nsmsgkey getchildkeyat(in long index); nsimsgdbhdr getchild(in nsmsgkey msgkey); nsimsgdbhdr getchildhdrat(in long index); nsimsgdbhdr getroothdr(out long index); vo
id removechildat(in long index); vo
id removechildhdr(in nsimsgdbhdr child, in ns
idbchangeannouncer announcer); vo
id markchildread(in boolean bread); nsimsgdbhdr getfirstunreadchild(); nsisimpleenumerator enumeratemessages(in nsmsgkey parent); ...
... vo
id addchild(in nsimsgdbhdr child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in ns
idbchangeannouncer announcer); parameters child the message to add inreplyto the message this should be in reply to threadinthread announcer an ns
idbchangeannouncer to receive notification when the change is made.
... removechildat() vo
id removechildat(in long index); parameters index the index to remove the message from removechildhdr() vo
id removechildhdr(in nsimsgdbhdr child, in ns
idbchangeannouncer announcer); parameters child the message to remove announcer an ns
idbchangeannouncer to receive notification when the change is made.
... markchildread() vo
id markchildread(in boolean bread); parameters bread true if the messages should be marked read.
nsINavHistoryResultTreeViewer
toolkit/components/places/public/nsinavhistoryservice.
idlscriptable this interface prov
ides a predefined view adaptor for interfacing places query results with a tree.
...this is only val
id when a tree is attached, the result will be 0 otherwise.
...this is only val
id when a tree is attached.
... return value the row index of the node specified by anode, or index_invisible for nodes that are h
idden (by their parents being collapsed, for example) or if there is no attached tree.
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 w
ide strings nsisupportsstring) and 'localized' w
ide strings, which 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 vo
id setdatawithlength(in unsigned long length, [size_is(length)] in wstring data); wstring tostring(); attributes attribute type description data wstring prov
ides access to string data stored in this property.
...vo
id setdatawithlength( in unsigned long length, [size_is(length)] in wstring data ); parameters length the length of the string.
... tostring() used to retrieve the contents of this object into a w
ide string.
nsIProgressEventSink
netwerk/base/public/nsiprogresseventsink.
idlscriptable this interface is used to asynchronously convey channel status and progress information that is generally not critical to the processing of the channel.
...method overview vo
id onprogress(in nsirequest arequest, in nsisupports acontext, in unsigned long long aprogress, in unsigned long long aprogressmax); vo
id onstatus(in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg); methods onprogress() called to notify the event sink that progress has occurred for the given request.
... vo
id onprogress( in nsirequest arequest, in nsisupports acontext, in unsigned long long aprogress, in unsigned long long aprogressmax ); parameters arequest the request being observed (may qi to nsichannel).
...vo
id onstatus( in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg ); parameters arequest the request being observed (may qi to nsichannel).
nsIPropertyBag2
xpcom/ds/nsipropertybag2.
idlscriptable this interface extends nsipropertybag with some methods for getting properties in specific formats.
... acstring getpropertyasacstring(in astring prop); astring getpropertyasastring(in astring prop); autf8string getpropertyasautf8string(in astring prop); boolean getpropertyasbool(in astring prop); double getpropertyasdouble(in astring prop); print32 getpropertyasint32(in astring prop); print64 getpropertyasint64(in astring prop); vo
id getpropertyasinterface(in astring prop, in nsi
idref i
id, [i
id_is(i
id), retval] out nsqiresult result); pruint32 getpropertyasuint32(in astring prop); pruint64 getpropertyasuint64(in astring prop); prbool haskey(in astring prop); methods get() this method returns null if the value does not exist, or exists but is null.
...vo
id getpropertyasinterface( in astring prop, in nsi
idref i
id, [i
id_is(i
id), retval] out nsqiresult result ); parameters prop property to return the value of.
... i
id the interface type to be returned.
nsIPushMessage
dom/interfaces/push/nsipushnotifier.
idlscriptable a push message sent to a system subscription.
... method overview domstring text(); jsval json(); vo
id binary([optional] out uint32_t datalen, [array, retval, size_is(datalen)] out uint8_t data); methods text() extracts the message data as a utf-8 text string.
... vo
id binary( [optional] out uint32_t datalen, [array, retval, size_is(datalen)] out uint8_t data ); parameters datalen the data size.
...please see method parameters in xp
idl for more details on using out parameters in javascript.
AudioContext - Web APIs
you need to create an audiocontext before you do anything else, as everything happens ins
ide a context.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-basel...
...ine="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,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" w
idth="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
...this can be used to play and manipulate audio from <v
ideo> or <audio> elements.
AudioListener.setOrientation() - Web APIs
syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setorientation(0,0,-1,0,1,0); returns vo
id.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener - Web APIs
this is why these values are not marked read only, which is how they appear in the specification's
idl.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioNode.disconnect() - Web APIs
if no parameters are prov
ided, all outgoing connections are disconnected.
...if no matching connection is found, an inval
idaccesserror exception is thrown.
... exceptions indexsizeerror a value specified for input or output is inval
id, referring to a node which doesn't exist or outs
ide the permitted range.
... inval
idaccesserror the node on which disconnect() was called isn't connected to the specified destination node.
AudioTrack.language - Web APIs
the read-only audiotrack property language returns a string
identifying the language used in the audio track.
... for tracks that include multiple languages (such as a movie in english in which a few lines are spoken in other languages), this should be the v
ideo's primary language.
... example this example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks'
id, kind, and language.
... function getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({
id: track.
id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment html living standardthe definition of 'audiotrack.language' in that specification.
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, andro
id or tpm attestations).
...the attestedcredentialdata field contains the credential
id and credentialpublickey.
...formats defined by webauthn are: "packed" "tpm" "andro
id-key" "andro
id-safetynet" "f
ido-u2f" "none" attstmt a an attestation statement that is of the format defined by "fmt".
... examples var publickey = { challenge: /* from the server */, rp: { name: "example corp",
id : "login.example.com" }, user: {
id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status com...
BaseAudioContext.createStereoPanner() - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a sl
ider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the sl
ider is moved.
... moving the sl
ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...ning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the sl
ider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifi...
BeforeInstallPromptEvent - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignmen...
...t-baseline="m
iddle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" w
idth="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
...this is prov
ided for user agents that want to present a choice of versions to the user such as, for example, "web" or "play" which would allow the user to chose between a web version or an andro
id version.
... example window.addeventlistener("beforeinstallprompt", function(e) { // log the platforms prov
ided as options in an install prompt console.log(e.platforms); // e.g., ["web", "andro
id", "windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
BudgetService.getBudget() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetgetbudget experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
... webview andro
id full support 55chrome andro
id full support 55firefox andro
id ?
... opera andro
id full support 42safari ios ?
... samsung internet andro
id full support 6.0legend full support full support compatibility unknown compatibility unknownexperimental.
BudgetService.reserve() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreserve experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
... webview andro
id full support 55chrome andro
id full support 55firefox andro
id ?
... opera andro
id full support 42safari ios ?
... samsung internet andro
id full support 6.0legend full support full support compatibility unknown compatibility unknownexperimental.
BudgetState.budgetAt - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbudgetat experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
... webview andro
id no support nochrome andro
id full support 60firefox andro
id ?
... opera andro
id no support nosafari ios ?
... samsung internet andro
id full support 8.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
CSSMathSum - Web APIs
examples we create an element with a w
idth determined using a calc() function, then console.log() the operator and values, and dig into the values a bit.
... <div>has w
idth</div> we assign a w
idth div { w
idth: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('w
idth') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('w
idth').operator ); // 'sum' console.log( stylemap.get('w
idth').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylemap.get('w
idth').values[0] ); // cssunitvalue {value: 30, unit: "percent"} console.log( stylemap.get('w
idth').values[0].value ); // 30 console.log( stylemap.get('w
idth').values[0].unit ); // 'percent' console.log( stylemap.get('w
idth').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.lo...
...g( stylemap.get('w
idth').values[1].value ); // -20 console.log( stylemap.get('w
idth').values[1].unit ); // 'px' the specification is still evolving.
... in the future we may write the last three lines as: console.log( stylemap.get('w
idth').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.get('w
idth').values[1].value ); // cssunitvalue {value: 20, unit: "px"} console.log( stylemap.get('w
idth').values[1].value.unit ); // 'px' specifications specification status comment css typed om level 1the definition of 'cssmathsum' in that specification.
CSSRule - Web APIs
if this rule is a style rule ins
ide an @media block, the parent rule would be that cssmediarule.
...(until the documentation is completed, see the interface definition in the mozilla source code: ns
idomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the fu...
... cand
idate recommendation added value counter_style_rule.
... cand
idate recommendation added value supports_rule.
CSSStyleSheet - Web APIs
this is normally used to access indiv
idual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods.
... rules read only the rules property is functionally
identical to the standard cssrules property; it returns a live cssrulelist which maintains an up-to-date list of all of the rules in the style sheet.
... legacy methods these methods are legacy methods first introduced by microsoft; they should not be used if they can be avo
ided, but are not in danger of being removed anytime soon.
... removerule() functionally
identical to deleterule(); removes the rule at the specified index from the stylesheet's rule list.
CSSValueList - Web APIs
the cssvaluelist interface derives from the cssvalue interface and prov
ides the abstraction of an ordered collection of css values.
...in that case, these properties take the none
identifier.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/cssvalue" target="_top"><rect x="1" y="1" w
idth="80" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">cssvalue</text></a><polyline points="81,25 91,2...
...0 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" w
idth="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
Cache.match() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from val
idating the request http method (normally only get and head are allowed.) it defaults to false.
... note: cache.match() is basically
identical to cache.matchall(), except that rather than resolving with an array of all matching responses, it resolves with the first matching response only (that is, response[0]).
...ins
ide the catch() clause, match() is used to return the correct response.
...if fetch() returns a val
id http response with an response code in the 4xx or 5xx range, the catch() will not be called.
CanvasPattern.setTransform() - Web APIs
syntax vo
id pattern.settransform(matrix); parameters matrix an svgmatrix or dommatrix to use as the pattern's transformation matrix.
... html <canvas
id="canvas"></canvas> <svg
id="svg1"></svg> javascript var canvas = document.getelementby
id('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementby
id('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).s...
...(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas
id="canvas" w
idth="400" height="200" class="playable-canvas"></canvas> <svg
id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input
id="edit" type="button" value="edit" /> <input
id="reset" type="button" value="reset" /> </div> <textarea
id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_create...
...pattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementby
id('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementby
id('code'); var reset = document.getelementby
id('reset'); var edit = document.getelementby
id('edit'); var code = textarea.value; var svg1 = document.getelementby
id('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.w
idth, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.fo...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
syntax vo
id ctx.beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y); parameters cp1x the x-axis coordinate of the first control point.
... html <canvas
id="canvas"></canvas> javascript // define canvas and context const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2...
... html <canvas
id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (30, 30).
... const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
syntax vo
id ctx.clip([fillrule]); vo
id ctx.clip(path [, fillrule]); parameters fillrule the algorithm by which to determine if a point is ins
ide or outs
ide the clipping region.
... html <canvas
id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100, 75), and a radius of 50.
... const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.w
idth, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.w
idth, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.createPattern() - Web APIs
it can be any of the following: htmlimageelement (<img>) svgimageelement (<image>) htmlv
ideoelement (<v
ideo>, by using the capture of the v
ideo) htmlcanvaselement (<canvas>) imagebitmap offscreencanvas repetition a domstring indicating how to repeat the pattern's image.
... the original image looks like this: html <canvas
id="canvas" w
idth="300" height="300"></canvas> javascript var canvas = document.getelementby
id('canvas'); var ctx = canvas.getcontext('2d'); var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from...
... javascript // create a pattern, offscreen const patterncanvas = document.createelement('canvas'); const patterncontext = patterncanvas.getcontext('2d'); // give the pattern a w
idth and height of 50 patterncanvas.w
idth = 50; patterncanvas.height = 50; // give the pattern a background color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.w
idth, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canva...
...s.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, canvas.w
idth, canvas.height); // add our primary canvas to the webpage document.body.appendchild(canvas); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
values outs
ide that range, including infinity and nan, will not be set, and globalalpha will retain its previous value.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... we begin by drawing a sol
id background composed of four differently colored squares.
... <canvas
id="canvas" w
idth="150" height="150"></canvas> const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set tr...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
the canvasrenderingcontext2d.ispointinstroke() method of the canvas 2d api reports whether or not the specified point is ins
ide the area contained by the stroking of a path.
... return value boolean a boolean, which is true if the point is ins
ide the area contained by the stroking of a path, otherwise false.
... html <canvas
id="canvas"></canvas> <p>in stroke: <code
id="result">false</code></p> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementby
id('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linew
idth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is ins
ide ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.w
idth, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); ...
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
syntax vo
id ctx.quadraticcurveto(cpx, cpy, x, y); parameters cpx the x-axis coordinate of the control point.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30, 5, 0, 2 * math.pi); ctx.fill(); result in this ...
... html <canvas
id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (20, 110).
... const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
ConstrainDOMString - Web APIs
it allows you to specify one or more exact string values from which one must be the parameter's value, or a set of
ideal values which should be used if possible.
...
ideal either a single domstring or an arrray of domstrings specifying
ideal values for the property.
... cand
idate recommendation initial definition technically, constraindomstring is actually based on an intermediary dictionary named constraindomstringparameters, which adds exact and
ideal to domstring.
... however, for the sake of documentation clarity, the intermediate type (present only because of quirks in web
idl syntax) is ignored here.
ContentIndexEvent - Web APIs
it contains the
id of the indexed content to be removed.
...
id read only a string which
identifies the deleted content index via it's
id.
... examples this example shows the sevice worker script listening for the contentdelete event and logs the removed content index
id.
... self.addeventlistener('contentdelete', (event) => { console.log(event.
id); // logs content index
id, which can then be used to determine what content to delete from your cache }); specifications specification status comment unknownthe definition of 'contentindexevent' in that specification.
Credential - Web APIs
the credential interface of the the credential management api prov
ides information about an entity as a prerequisite to a trust decision.
... properties credential.
id read only returns a domstring containing the credential's
identifier.
... this might be any one of a gu
id, username, or email address.
...val
id values are password, federated and public-key.
CredentialsContainer.create() - Web APIs
the create() method of the credentialscontainer interface returns a promise that resolves with a new credential instance based on the prov
ided options, or null if no credential object can be created.
...tbd
id: (required) usvstring inherited from credentialdata.
...the available options are:
id: (required) usvstring inherited from credentialdata.
... name: optional usvstring tbd iconurl: optional usvstring tbd prov
ider: (required) usvstring tbd protocol: optional usvstring tbd publickey: optional an publickeycredentialcreationoptions object that describes the options for creating a webauthn credential.
CredentialsContainer.get() - Web APIs
the get() method of the credentialscontainer interface returns a promise to a single credential instance that matches the prov
ided parameters.
...the available options are: prov
iders: an array of domstring instances of
identity prov
iders to search for.
...val
id values are "silent", "optional", or "required".
... returns a promise that resolves with a credential instance that matches the prov
ided parameters.
DOMException.code - Web APIs
specifications specification status comment web
idlthe definition of 'code' in that specification.
... cand
idate recommendation browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcodechrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support 4opera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full support compatibility unknown ...
DOMException.message - Web APIs
specifications specification status comment web
idlthe definition of 'message' in that specification.
... cand
idate recommendation browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetmessagechrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support 4opera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full support compatibility unknown ...
DOMImplementation.createDocumentType() - Web APIs
syntax var doctype = document.implementation.createdocumenttype(qualifiednamestr, public
id, system
id); parameters qualifiednamestr is a domstring containing the qualified name, like svg:svg.
... public
id is a domstring containing the public
identifier.
... system
id is a domstring containing the system
identifiers.
... example var dt = document.implementation.createdocumenttype('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.public
id); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocumenttype' in that specification.
DOMMatrixReadOnly.flipX() - Web APIs
note that the x co-ordinate of the viewbox attribute is negative, showing us content from both s
ides of the x-axis.
... <svg w
idth="100" height="100" viewbox="-50 0 100 100"> <path fill="red" d="m 0 50 l 50 0 l 50 100 z" /> <path
id="flipped" fill="blue" d="m 0 50 l 50 0 l 50 100 z" /> </svg> this javascript first creates an
identity matrix, then uses the `flipx()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis.
... const flipped = document.getelementby
id('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.
... cand
idate recommendation initial definition ...
DOMRect.DOMRect() - Web APIs
syntax var mydomrect = new domrect(x, y, w
idth, height); parameters x the x coordinate of the domrect's origin.
... w
idth the w
idth of the domrect.
... examples to create a new domrect, you could run a line of code like so: mydomrect = new domrect(0,0,100,100); // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, w
idth: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status comment geometry interfaces module level 1the definition of 'domrect()' in that specification.
... cand
idate recommendation initial definition.
DOMRectReadOnly() - Web APIs
syntax const mydomrectreadonly = new domrectreadonly(x, y, w
idth, height) parameters x the x coordinate of the domrectreadonly's origin.
... w
idth the w
idth of the domrectreadonly.
... examples to create a new dompoint, you could run a line of code like so: const mydomrect = new domrectreadonly(0, 0, 100, 100) // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, w
idth: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status comment geometry interfaces module level 1the definition of 'domrectreadonly()' in that specification.
... cand
idate recommendation initial definition.
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 which 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>...
..._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.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementby
id(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p
id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css div { margin: 0em; padding: 2em; } #source { color: blue; border:...
... 1px sol
id black; } #target { border: 1px sol
id black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
Document.createTouch() - Web APIs
syntax var touch = documenttouch.createtouch(view, target,
identifier, pagex, pagey, screenx, screeny); parameters note: all parameters are optional.
...
identifier the value for touch.
identifier.
...consequently, these parameters should be cons
idered deprecated and not used.
... var target = document.getelementby
id("target"); var touch1 = document.createtouch(window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); specifications specification status comment touch eventsthe definition of 'document.createtouch()' in that specification.
Document.getElementsByClassName() - Web APIs
examples get all elements that have a class of 'test': document.getelementsbyclassname('test') get all elements that have both the 'red' and 'test' classes: document.getelementsbyclassname('red test') get all elements that have a class of 'test', ins
ide of an element that has the
id of 'main': document.getelementby
id('main').getelementsbyclassname('test') get the first element with a class of 'test', or undefined if there is no matching element: document.getelementsbyclassname('test')[0] we can also use methods of array.prototype on any htmlcollection by passing the htmlcollection as the method's this value.
... <html> <body> <div
id="parent-
id"> <p>hello world 1</p> <p class="test">hello world 2</p> <p>hello world 3</p> <p>hello world 4</p> </div> <script> var parentdom = document.getelementby
id("parent-
id"); var test = parentdom.getelementsbyclassname("test"); // a list of matching elements, *not* the element itself console.log(test); //htmlcollection[1] var testtarget = parentd...
... html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">apple juice</span> <span class="foo bar">something random</span> <textarea
id="resultarea" style="w
idth:98%;height:7em"></textarea> javascript // getelementsbyclassname only selects elements that have both given classes var allorangejuicebyclass = document.getelementsbyclassname('orange juice'); var result = "document.getelementsbyclassname('orange juice')"; for (var i=0, len=allorangejuicebyclass.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicebyclass[i...
...].textcontent; } // queryselector only selects full complete matches var allorangejuicequery = document.queryselectorall('.orange.juice'); result += "\n\ndocument.queryselectorall('.orange.juice')"; for (var i=0, len=allorangejuicequery.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicequery[i].textcontent; } document.getelementby
id("resultarea").value = result; result specifications specification status comment domthe definition of 'document.getelementsbyclassname' in that specification.
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
the mselementsfromrect method returns the node list of elements that are under a rectangle defined by left, top, w
idth, and height.
... syntax object.mselementsfromrect(left, top, w
idth, height, retval) parameters left [in] type: floating-point top[in] type: floating-point w
idth[in] type: floating-point height [in] type: floating-point retval [out, reval] type: nodelist example to find all of the elements under a given point, use mselementsfrompoint(x, y).
... to find all of the elements which intersect a rectangle, use mselementsfromrect(top, left, w
idth, height).
... var nodelist = document.mselementsfromrect(x,y,w
idth,height) var nodelist = document.mselementsfrompoint(x,y) the returned nodelist is sorted by z-index so that you can tell the relative stacking order of the elements.
DragEvent - Web APIs
dragenter this event is fired when a dragged element or text selection enters a val
id drop target.
... dragleave this event is fired when a dragged element or text selection leaves a val
id drop target.
... dragover this event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a val
id drop target (every 50 ms when mouse is not moving else much faster between 5 ms (slow movement) and 1ms (fast movement) approximately.
... drop this event is fired when an element or text selection is dropped on a val
id drop target.
DynamicsCompressorNode() - Web APIs
the dynamicscompressornode() constructor creates a new dynamicscompressornode object which prov
ides a compression effect, which lowers the volume of the loudest parts of the signal, in order to help prevent clipping and distortion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetdynamicscompressornode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79fir...
... webview andro
id full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome andro
id full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox andro
id full support 53opera andro
id full support 4...
... samsung internet andro
id full support 6.0notes full support 6.0notes notes before samsung internet 7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
Element.animate() - Web APIs
options either an integer representing the animation's duration (in milliseconds), or an object containing one or more timing properties:
id optional a property unique to animate(): a domstring with which to reference the animation.
...for instance with transform, a translatex(-200px) would not overr
ide an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).
... document.getelementby
id("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.
...for example, cons
ider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.
Element: auxclick event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onauxclick preventing default actions for the vast majority of browsers that map m
iddle click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an auxclick event handler.
... when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the m
iddle mouse button.
... additionally, you may need to avo
id opening a system context menu after a right click.
... html <button><h1>click me!</h1></button> css html { height: 100%; overflow: h
idden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; w
idth: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left...
Element.insertAdjacentElement() - Web APIs
'afterbegin': just ins
ide the targetelement, before its first child.
... 'beforeend': just ins
ide the targetelement, after its last child.
... typeerror the element specified is not a val
id element.
...pdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements ins
ide a container.
Element: mousedown event - Web APIs
the mousedown event is fired at an element when a pointing device button is pressed while the pointer is ins
ide the element.
... note: this differs from the click event in that click is fired after a full click action occurs; that is, the mouse button is pressed and released while the pointer remains ins
ide the same element.
... html <h1>drawing with mouse events</h1> <canvas
id="mypics" w
idth="560" height="360"></canvas> css canvas { border: 1px sol
id black; w
idth: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementby
id('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the...
...== true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linew
idth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result specifications specification status ui eventsthe definition of 'mousedown' in that specification.
Element.releasePointerCapture() - Web APIs
syntax targetelement.releasepointercapture(pointer
id); parameters pointer
id the pointer
id of a pointerevent object.
... exceptions exception explanation inval
idpointer
id pointer
id does not match any of the active pointers.
...this lets you sl
ide the element horizontally, even when you pointer moves outs
ide of its boundaries.
... html <div
id="sl
ider">sl
ide me</div> css div { w
idth: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsl
iding(e) { sl
ider.onpointermove = sl
ide; sl
ider.setpointercapture(e.pointer
id); } function stopsl
iding(e) { sl
ider.onpointermove = null; sl
ider.releasepointercapture(e.pointer
id); } function sl
ide(e) { sl
ider.style.transform = `translate(${e.clientx - 70}px)`; } const sl
ider = document.getelementby
id('sl
ider'); sl
ider.onpointerdown = beginsl
iding; sl
ider.onpointerup = stopsl
iding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.requestFullscreen() - Web APIs
syntax var promise = element.requestfullscreen(options); parameters options optional a fullscreenoptions object prov
iding options that control the behavior of the transition to full-screen mode.
...the default value is "auto", which indicates that the browser should dec
ide what to do.
... examples this function toggles the first <v
ideo> element found in the document into and out of full-screen mode.
... function togglefullscreen() { let elem = document.queryselector("v
ideo"); if (!document.fullscreenelement) { elem.requestfullscreen().catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } if the document isn't already in full-screen mode—detected by looking to see if document.fullscreenelement has a value—we call the v
ideo's requestfullscreen() method.
Element.scroll() - Web APIs
the scroll() method of the element interface scrolls the element to a particular set of coordinates ins
ide a given element.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetscrollchrome full support 45edge full support 79firefox full support 36ie no support noopera full support ...
... 32safari full support 10webview andro
id full support 45chrome andro
id full support 45firefox andro
id full support 36opera andro
id full support 32safari ios no support nosamsung internet andro
id full support 5.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support...
... noopera full support 32safari no support nowebview andro
id full support 45chrome andro
id full support 45firefox andro
id full support yesopera andro
id full support 32safari ios no support nosamsung internet andro
id full support 5.0legend full support full support no support ...
Element.scrollTo() - Web APIs
the scrollto() method of the element interface scrolls to a particular set of coordinates ins
ide a given element.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetscrolltochrome full support 45edge full support 79firefox full support 36ie no support noopera full support ...
... 32safari full support 10webview andro
id full support 45chrome andro
id full support 45firefox andro
id full support 36opera andro
id full support 32safari ios no support nosamsung internet andro
id full support 5.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no suppo...
...rt noopera full support 32safari no support nowebview andro
id full support 45chrome andro
id full support 45firefox andro
id full support yesopera andro
id full support 32safari ios no support nosamsung internet andro
id full support 5.0legend full support full support no support ...
Element.setPointerCapture() - Web APIs
syntax targetelement.setpointercapture(pointer
id); parameters pointer
id the pointer
id of a pointerevent object.
... exceptions exception explanation inval
idpointer
id pointer
id does not match any of the active pointers.
...this lets you sl
ide the element horizontally, even when you pointer moves outs
ide of its boundaries.
... html <div
id="sl
ider">sl
ide me</div> css div { w
idth: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsl
iding(e) { sl
ider.onpointermove = sl
ide; sl
ider.setpointercapture(e.pointer
id); } function stopsl
iding(e) { sl
ider.onpointermove = null; sl
ider.releasepointercapture(e.pointer
id); } function sl
ide(e) { sl
ider.style.transform = `translate(${e.clientx - 70}px)`; } const sl
ider = document.getelementby
id('sl
ider'); sl
ider.onpointerdown = beginsl
iding; sl
ider.onpointerup = stopsl
iding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.
Element.slot - Web APIs
a slot is a placeholder ins
ide a web component that users can fill with their own markup (see using templates and slots for more information).
... when <my-paragraph> is used in the document, the slot is populated by a slotable element by including it ins
ide the element with a slot attribute with the value my-text.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetslotchrome full support 53edge full support ≤79firefox full support 63ie ?
... opera full support yessafari full support 10webview andro
id full support 53chrome andro
id full support 53firefox andro
id full support 63opera andro
id full support yessafari ios full support yessamsung internet andro
id full support 6.0legend full support full support compatibility unknown ...
ElementCSSInlineStyle.style - Web APIs
setting styles styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is cons
idered read-only, as the style attribute returns a cssstyledeclaration object which is also read-only.
...for adding specific styles to an element without altering other style values, it is preferred to use the indiv
idual properties of style (as in elt.style.color = '...') as using elt.style.csstext = '...' or elt.setattribute('style', '...') sets the complete inline style for the element by overr
iding the existing inline styles.
... examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px sol
id black"; // or elt.setattribute("style", "color:red; border: 1px sol
id blue;"); // set specific style while leaving other inline style values untouched elt.style.color = "blue"; getting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not...
... the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcomputedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <div style="color:red"
id="myelement">..</div> </body> </html> var element = document.getelementby
id("myelement"); var out = ""; var elementstyle = element.style; var computedstyle = window.getcomputedstyle(element, null); for (prop in elementstyle) { if (elementstyle.hasownproperty(prop)) { out += " " + prop + " = '" + elementstyle[prop] + "' > '" + computedstyle[prop] + "'\n"; } } console.log(out) the ou...
Encrypted Media Extensions API - Web APIs
the encrypted media extensions api prov
ides interfaces for controlling the playback of content which is subject to a digital restrictions management scheme.
... mediakeystatusmap is a read-only map of media key statuses by key
ids.
... mediakeysystemaccess prov
ides access to a key system for decryption and/or a content protection prov
ider.
... mediakeysystemconfiguration prov
ides configuration information about the media key system.
Event.initEvent() - Web APIs
bubbles is a boolean dec
iding whether the event should bubble up through the event chain or not.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetinitevent deprecatedchrome full support yesedge full support 12firefox full support 17 full support 17 no support ...
...— 17notes notes before firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.ie full support yesopera full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support 17 full support 17 no support ?
... — 17notes notes before firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.opera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full supportdeprecated.
EventTarget - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#...
...f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
... see also web
idl bindings.
... vo
id seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example simple implementation of eventtarget var eventtarget = function() { this.listeners = {}; }; eventtarget.prototype.listeners = null; eventtarget.prototype.addeventlistener = function(type, callback) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; eventtarget.prototype.removeeventlistener = function(type, callback) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = function(event) { if (!(eve...
ExtendableEvent - Web APIs
if waituntil() is called outs
ide of the extendableevent handler, the browser should throw an inval
idstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
...it maps a shorthand
identifier for a cache to a specific, versioned cache name.
Fetch basic concepts - Web APIs
the fetch api prov
ides an interface for fetching resources (including across the network).
... it will seem familiar to anyone who has used xmlhttprequest, but it prov
ides a more powerful and flexible feature set.
...however, the operation will work if guard is request and the header name isn't a forb
idden header name .
... guard is response and the header name isn't a forb
idden response header name .
Fetch API - Web APIs
the fetch api prov
ides an interface for fetching resources (including across the network).
... it will seem familiar to anyone who has used xmlhttprequest, but the new api prov
ides a more powerful and flexible feature set.
... concepts and usage fetch prov
ides a generic definition of request and response objects (and other things involved with network requests).
... fetch mixin body prov
ides methods relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.
File - Web APIs
the file interface prov
ides information about files and allows javascript in a web page to access their content.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/blob" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" str...
...oke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 1970 at m
idnight).
FileSystemDirectoryReader - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfilesystemdirectoryreader deprecatednon-standardchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: directoryreaderedge full support ...
... full support 50ie no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview andro
id full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: directoryreaderchrome andro
id full support 18alternate name full support 18alternate name alternate name use...
...s the non-standard name: directoryreaderfirefox andro
id full support 50opera andro
id no support nosafari ios full support 11.3samsung internet andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitreadentries deprecatednon-standardchrome full support 8edge ?
... safari full support 11.1webview andro
id full support ≤37chrome andro
id full support 18firefox andro
id full support yesopera andro
id no support nosafari ios full support 11.3samsung internet andro
id ?
FileSystemEntry.getParent() - Web APIs
the parent of the root directory is cons
idered to be the root directory, itself, so be sure to watch for that.
... errors fileerror.inval
id_state_err the operation failed because the file system's state doesn't permit it.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetgetparent experimentalchrome full support 8edge full support 79firefox no support noie no support noopera no supp...
...ort nosafari full support 11.1webview andro
id full support ≤37chrome andro
id full support 18firefox andro
id no support noopera andro
id no support nosafari ios full support 11.3samsung internet andro
id full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.remove() - Web APIs
errors fileerror.inval
id_modification_err the specified entry was the file system's root directory, or the specified entry is a directory which isn't empty.
... fileerror.inval
id_state_err the file system's cached state is inconsistent with its state on disk, so the file could not be deleted for safety reasons.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetremove experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support nowebview andro
id full support ≤37chrome andro
id full support 18firefox andro
id no support noopera andro
id no support nosafari ios no support nosamsung internet andro
id full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.toURL() - Web APIs
the filesystementry interface's method tourl() creates and returns a string containing a url which can be used to
identify the file system entry.
...if this parameter is omitted, the user agent uses its standard algorithms to
identify the file.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internettourl experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support nowebview andro
id full support ≤37chrome andro
id full support 18firefox andro
id no support noopera andro
id no support nosafari ios no support nosamsung internet andro
id full support yeslegend full support full support no support no supportexperimental.
FileSystemFileEntry.createWriter() - Web APIs
errorcallback optional if prov
ided, this must be a method which is caled when an error occurs while trying to create the filewriter.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter()...
... method existed, it immediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview andro
id full support ≤37chrome andro
id full support 18firefox andro
id no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.opera andro
id no support nosafari ios no support ...
... nosamsung internet andro
id full support yeslegend full support full support no support no supportnon-standard.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfontfacesetloadevent() constructor experimentalchrome full support 57edge full support ≤79firefox ?
... webview andro
id no support nochrome andro
id full support 57firefox andro
id ?
... opera andro
id full support 43safari ios ?
... samsung internet andro
id full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
Frame Timing API - Web APIs
the performanceframetiming interface prov
ides frame timing data about the browser's event loop.
...this data can be used to help
identify areas that take too long to prov
ide a good user experience.
... this data, particularly the duration timestamp, can be used to help
identify performance problems.
...if this value is greater than the time needed to prov
ide a good user experience, further analysis might be warranted.
Gamepad - Web APIs
the gamepad interface of the gamepad api defines an indiv
idual gamepad or other controller, allowing access to information such as button presses, axis positions, and
id.
... gamepad.
id read only a domstring containing
identifying information about the controller.
... experimental extensions to gamepad the following interfaces are defined in the gamepad extensions specification, and prov
ide access to experimental features like haptic feedback and webvr controller pose information.
...%d buttons, %d axes.", e.gamepad.index, e.gamepad.
id, e.gamepad.buttons.length, e.gamepad.axes.length); }); specifications specification status comment gamepadthe definition of 'gamepad' in that specification.
Geolocation.watchPosition() - Web APIs
options optional an optional positionoptions object that prov
ides configuration options for the location watch.
... return value an integer
id that
identifies the registered handler.
... the
id can be passed to the geolocation.clearwatch() to unregister the handler.
... examples var
id, target, options; function success(pos) { var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) { console.log('congratulations, you reached the target'); navigator.geolocation.clearwatch(
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.watchposition(success, error, options); specifications specification status comment geolocation apithe definition of 'watchposition()' in that specification.
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="w
idth=device-w
idth"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol
id black; } #target { border: 1px sol
id 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.datatransf...
...er.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_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementby
id(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) { co...
... var el=document.getelementby
id("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.getelementby
id("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> <d...
...iv> <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 status comment html living standardthe definition of 'ondragend' in that specification.
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="w
idth=device-w
idth"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol
id black; } #target { border: 1px sol
id 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.datatransf...
...er.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_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementby
id(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) { co...
... var el=document.getelementby
id("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.getelementby
id("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> <d...
...iv> <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 status comment html living standardthe definition of 'ondragenter' in that specification.
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="w
idth=device-w
idth"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol
id black; } #target { border: 1px sol
id 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.datatransf...
...er.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_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementby
id(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) { co...
... var el=document.getelementby
id("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.getelementby
id("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> <d...
...iv> <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 status comment html living standardthe definition of 'ondragexit' in that specification.
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="w
idth=device-w
idth"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px sol
id black; } #target { border: 1px sol
id 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_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementby
id(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...
... var el=document.getelementby
id("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.getelementby
id("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>ondrag...
...exit</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> specifications specification status comment html living standardthe definition of 'ondragleave' in that specification.
HTMLAnchorElement.referrerPolicy - Web APIs
examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementby
id("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header.
... cand
idate recommendation added the referrerpolicy property.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support 38safari full support 11.1web...
...view andro
id full support 51chrome andro
id full support 51firefox andro
id full support 50opera andro
id full support 41safari ios no support nosamsung internet andro
id full support 7.2legend full support full support no support no support ...
HTMLAreaElement.referrerPolicy - Web APIs
examples <img usemap="#maparound" w
idth="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.getelementby
id("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header.
... cand
idate recommendation added the referrerpolicy property.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support 38safari full support 11.1web...
...view andro
id full support 51chrome andro
id full support 51firefox andro
id full support 50opera andro
id full support 41safari ios no support nosamsung internet andro
id full support 7.2legend full support full support no support no support ...
HTMLBRElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><l...
...ine x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="...
...m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlbrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="1...
...11,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mono...
...space" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="#d4d...
...de4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlbaseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement.toBlob() - Web APIs
the code snippet below, for example, takes the image in the <canvas> element whose
id is "canvas", obtains a copy of it as a png image, then appends a new <img> element to the document, whose source image is the one created using the canvas.
... var canvas = document.getelementby
id('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.appendchild(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.getelementby
id('canvas'); var d = canvas.w
idth; 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.appendchild(a); a.style.display = 'block'; a.dow...
... var canvas = document.getelementby
id('canvas'); var d = canvas.w
idth; 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 r = new filereader(); r.onloadend = function () { // r.result contains the arraybuffer.
HTMLCanvasElement.toDataURL() - Web APIs
if the height or w
idth of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned.
... examples given this <canvas> element: <canvas
id="canvas" w
idth="5" height="5"></canvas> you can get a data-url of the canvas with the following lines: var canvas = document.getelementby
id('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.toda...
...le.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nw
idth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimg
id = 0; nimg
id < nimgslen; nimg
id++) { ocolorimg = aimages[nimg
id]; nw
idth = ocolorimg.offsetw
idth; nheight = ocolorimg.offsetheight; ocanvas.w
idth = nw
idth; ocanvas.height = nheight; octx.drawimage(ocolorimg, 0, 0); oimgdata = octx.getimagedata(0, 0, nw
idth, nheight); apix = oimgdata.data; npixlen = ap...
...length; for (npixel = 0; npixel < npixlen; npixel += 4) { apix[npixel + 2] = apix[npixel + 1] = apix[npixel] = (apix[npixel] + apix[npixel + 1] + apix[npixel + 2]) / 3; } octx.putimagedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = showcolorimg; ocolorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nw
idth, nheight); ocolorimg.style.display = "none"; ocolorimg.parentnode.insertbefore(ograyimg, ocolorimg); } } specifications specification status comment html living standardthe definition of 'htmlcanvaselement.todataurl' in that specification.
HTMLDetailsElement: toggle event - Web APIs
html <as
ide
id="log"> <b>open chapters:</b> <div data-
id="ch1" h
idden>i</div> <div data-
id="ch2" h
idden>ii</div> <div data-
id="ch3" h
idden>iii</div> </as
ide> <section
id="summaries"> <b>chapter summaries:</b> <details
id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
... </details> <details
id="ch2"> <summary>chapter ii</summary> philosophy in fortune's name replies to boethius' reproaches, and proves that the gifts of fortune are hers to give and to take away.
... </details> <details
id="ch3"> <summary>chapter iii</summary> boethius falls back upon his present sense of misery.
... </details> </section> css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-
id=${e.target.
id}]`); item.toggleattribute('h
idden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status comment html living standardthe definition of 'toggle event' in that specification.
HTMLDialogElement.show() - Web APIs
still allowing interaction with content outs
ide of the dialog.
... return value vo
id.
... <!-- simple pop-up dialog box, containing a form --> <dialog
id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select
id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>sp
ider monkey</option> </select></p> </section> <menu> <button
id="cancel" type="reset">cancel</button> <button type="submit">c...
...onfirm</button> </menu> </form> </dialog> <menu> <button
id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementby
id('updatedetails'); var cancelbutton = document.getelementby
id('cancel'); var dialog = document.getelementby
id('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(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(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeve...
HTMLFormControlsCollection - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/htmlcollection" target="_top"><rect x="1" y="1" w
idth="140" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="71" y="30" fo...
...nt-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcol...
... htmlformcontrolscollection.nameditem() returns the radionodelist or the element in the collection whose name or
id matches the specified name, or null if no nodes match.
... note that this version of nameditem() h
ide the one inherited from htmlcollection.
HTMLFormElement.elements - Web APIs
you can access a particular form control in the returned collection by using either an index or the element's name or
id.
... example quick syntax example in this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or
id.
... <form
id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form> var inputs = document.getelementby
id("my-form").elements; var inputbyindex = inputs[0]; var inputbyname = inputs["username"]; accessing form controls this example gets the form's element list, then iterates over the list, looking for <input> elements of type "text" so that some form of processing can be performed on them.
... var inputs = document.getelementby
id("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].nodename === "input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.getelementby
id("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLFormElement.submit() - Web APIs
this method is similar, but not
identical to, activating a form's submit <button>.
... constraint val
idation is not triggered.
... the htmlformelement.requestsubmit() method is
identical to activating a form's submit <button> and does not have these differences.
... if a form control (such as a submit button) has a name or
id of submit, this method will mask the form's submit method.
HTMLFrameSetElement - Web APIs
the htmlframesetelement interface prov
ides special properties (beyond those of the regular htmlelement interface they also inherit) for manipulating <frameset> elements.
... htmlframesetelement.cols is a domstring structured as a comma-seperated list specifing the w
idth of each column ins
ide a frameset.
... htmlframesetelement.rows is a domstring structured as a comma-seperated list specifing the height of each column ins
ide a frameset.
... windoweventhandlers.onpageh
ide is an eventhandler representing the code to be called when the pageh
ide event is raised.
HTMLHeadElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</te...
...xt></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consol...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlheadelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadingElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline po...
...ints="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...no,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" strok...
...e="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" w
idth="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mon...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill...
...="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlhtmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement.csp - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcsp experimentalchrome full support 61edge full support ≤79firefox ?
... webview andro
id full support 61chrome andro
id full support 61firefox andro
id ?
... opera andro
id full support 45safari ios ?
... samsung internet andro
id full support 8.0legend full support full support compatibility unknown compatibility unknownexperimental.
HTMLIFrameElement.referrerPolicy - Web APIs
carefully cons
ider the impact of this setting.
... cand
idate recommendation added the referrerpolicy attribute.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support...
... 38safari full support 11.1webview andro
id full support 51chrome andro
id full support 51firefox andro
id full support 50opera andro
id full support 41safari ios no support nosamsung internet andro
id full support 5.0legend full support full support no support no support ...
Image() - Web APIs
syntax var htmlimageelement = new image(w
idth, height); parameters w
idth the w
idth of the image (i.e., the value for the w
idth attribute).
...the size specified in the constructor is reflected through the properties htmlimageelement.w
idth and htmlimageelement.height of the resulting instance.
... the intrinsic w
idth and height of the image in css pixels are reflected through the properties htmlimageelement.naturalw
idth and htmlimageelement.naturalheight.
... examples var myimage = new image(100, 200); myimage.src = 'picture.jpg'; document.body.appendchild(myimage); this would be the equivalent of defining the following html tag ins
ide the <body>: <img w
idth="100" height="200" src="picture.jpg"> specifications specification status comment html living standardthe definition of 'image()' in that specification.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; w
idth: 37.5em; border: 1px sol
id #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; w
idth: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcrossoriginchrome full support 13edge full support 12firefox full support yesie full support 9opera full support yessafari full support ...
... yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support yesopera andro
id ?
... safari ios full support yessamsung internet andro
id full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.decoding - Web APIs
the browser dec
ides what is best for the user.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetdecodingchrome full support 65edge full support ≤79firefox full support 63ie no support noopera full support ...
... yessafari full support 11.1webview andro
id full support 65chrome andro
id full support 65firefox andro
id full support 63opera andro
id ?
... safari ios full support 11.3samsung internet andro
id full support 9.0legend full support full support no support no support compatibility unknown compatibility unknown ...
HTMLImageElement.lowSrc - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetlowsrcchrome full support 1edge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id ?
... opera andro
id ?
... samsung internet andro
id full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.referrerPolicy - Web APIs
examples var img = new image(); img.src = 'img/logo.png'; img.referrerpolicy = 'origin'; var div = document.getelementby
id('divaround'); div.appendchild(img); // fetch the image using the origin as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... cand
idate recommendation added the referrerpolicy property.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support 38safari full support 11.1web...
...view andro
id full support 51chrome andro
id full support 51firefox andro
id full support 50opera andro
id full support 41safari ios no support nosamsung internet andro
id full support 5.0legend full support full support no support no support ...
HTMLInputElement.webkitdirectory - Web APIs
for example, cons
ider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg...
... html content <input type="file"
id="filepicker" name="filelist" webkitdirectory multiple /> <ul
id="listing"></ul> javascript content document.getelementby
id("filepicker").addeventlistener("change", function(event) { let output = document.getelementby
id("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativep...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetwebkitdirectory non-standardchrome full support 13edge full support 13firefox full support 50ie no support noopera ...
... no support nosafari full support 11.1webview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support 50opera andro
id no support nosafari ios full support 11.3samsung internet andro
id full support yeslegend full support full support no support no supportnon-standard.
HTMLLegendElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25...
... 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace...
..." fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmllegendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
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", "v
ideo", "audio", "track", "font", "fetch".
... cand
idate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetas experimentalchrome full support 50edge full support 17firefox full support 56ie full support yesopera full support 37safari full support ye...
...swebview andro
id full support 50chrome andro
id full support 50firefox andro
id full support 56opera andro
id full support 37safari ios full support yessamsung internet andro
id full support 5.0legend full support full supportexperimental.
HTMLMediaElement.autoplay - Web APIs
note: sites which automatically play audio (or v
ideos with an audio track) can be an unpleasant experience for users, so it should be avo
ided when possible.
... for a much 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 gu
ide for media and web audio apis.
... note: some browsers offer users the ability to overr
ide autoplay in order to prevent disruptive audio or v
ideo from playing without permission or in the background.
... <v
ideo
id="v
ideo" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_
id=165"> </v
ideo> *** disable autoplay (recommended) *** false is the default value document.queryselector('#v
ideo').autoplay = false; specifications specification status comment html living standardthe definition of 'htmlmediaelement.autoplay' in that specification.
HTMLMediaElement.captureStream() - Web APIs
return value a mediastream object which can be used as a source for audio and/or v
ideo data by other media processing code, or as a source for webrtc.
... example in this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the
id "playback" into a mediastream.
... the stream can then be used for other purposes—like a source for streaming over webrtc, to allow sharing prerecorded v
ideos with another person during a v
ideo call.
... document.queryselector('.playandrecord').addeventlistener('click', function() { var playbackelement = document.getelementby
id("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLMediaElement.controlsList - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcontrolslistchrome full support 58edge full support ≤79firefox ?
... webview andro
id full support 58chrome andro
id full support 58firefox andro
id ?
... opera andro
id full support 43safari ios ?
... samsung internet andro
id full support 7.0legend full support full support compatibility unknown compatibility unknown ...
HTMLMediaElement.load() - Web APIs
usage notes calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the <audio> or <v
ideo> element and its src attribute or child <source> element(s).
... this is described in more detail in supporting multiple formats in v
ideo and audio content.
... example this example finds a <v
ideo> element in the document and resets it by calling load().
... var mediaelem = document.queryselector("v
ideo"); mediaelem.load(); specifications specification status comment html living standardthe definition of 'htmlmediaelement.load()' in that specification.
HTMLMetaElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111...
...,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monosp...
...ace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="#d4dde...
...4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlmetaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOrForeignElement.dataset - Web APIs
the dataset read-only property of the htmlorforeignelement interface prov
ides read/write access to all the custom data attributes (data-*) set on the element.
...instead, all writes must be to the indiv
idual properties within the dataset, which in turn represent the data attributes.
... in addition to the information below, you'll find a how-to gu
ide for using html data attributes in our article using data attributes.
... examples <div
id="user" data-
id="1234567890" data-user="johndoe" data-date-of-birth>john doe</div> const el = document.queryselector('#user'); // el.
id === 'user' // el.dataset.
id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; // r...
HTMLPictureElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" st...
...roke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor...
...="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/ap...
...i/htmlpictureelement" target="_top"><rect x="311" y="65" w
idth="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLScriptElement.referrerPolicy - Web APIs
carefully cons
ider the impact of this setting.
... cand
idate recommendation added the referrerpolicy attribute.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetreferrerpolicychrome full support 70edge full support ≤79firefox full support 65ie no support noopera full supp...
...ort yessafari no support nowebview andro
id full support 70chrome andro
id full support 70firefox andro
id full support 65opera andro
id full support yessafari ios no support nosamsung internet andro
id full support 10.0legend full support full support no support no support ...
HTMLSelectElement.selectedOptions - Web APIs
an option is cons
idered selected if it has an htmloptionelement.selected attribute.
... html the html that creates the selection box and the <option> elements representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select
id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order"
id="order"> order now </button> <p
id="output"> </p> the <select> element is set to allow multiple items ...
... javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementby
id("order"); let itemlist = document.getelementby
id("foods"); let outputbox = document.getelementby
id("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (c...
...ollection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you d
idn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.
HTMLShadowElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
idd...
...le">element</text></a><polyline points="341,25 351,20 351,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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSpanElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="11...
...1,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monos...
...pace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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="#d4dd...
...e4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4...
..." stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href...
...="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmlstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget<...
.../text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="con...
...solas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmltablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
..."121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmltemplateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTitleElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 ...
... 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#...
...4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">htmltitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HashChangeEvent - Web APIs
the hashchangeevent interface represents events that fire when the fragment
identifier of the url has changed.
... the fragment
identifier is the part of the url that follows (and includes) the # symbol.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" ta...
...rget="_top"><rect x="116" y="1" w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
ImageCapture() constructor - Web APIs
syntax const imagecapture = new imagecapture(v
ideotrack) parameters v
ideotrack a mediastreamtrack from which the still images will be taken.
... this can be any source, such as an incoming stream of a v
ideo conference, a playing movie, or the stream from a webcam.
... return value a new imagecapture object which can be used to capture still frames from the specified v
ideo track.
... navigator.mediadevices.getusermedia({v
ideo: true}) .then(mediastream => { document.queryselector('v
ideo').srcobject = mediastream const track = mediastream.getv
ideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
InstallEvent - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idt...
...h="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="150" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/installevent" target="_top"><rect x="306" y="1" w
idth="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
...the code maps a shorthand
identifier for a cache to a specific, versioned cache name.
IntersectionObserver.IntersectionObserver() - Web APIs
you can prov
ide any combination of the following options: root an element or document object which is an ancestor of the intended target, whose bounding rectangle will be cons
idered the viewport.
... any part of the target not visible in the visible area of the root is not cons
idered visible.
... exceptions syntaxerror the specified rootmargin is inval
id.
... rangeerror one or more of the values in threshold is outs
ide the range 0.0 to 1.0.
KeyboardEvent.location - Web APIs
possible values are: constant value description dom_key_location_standard 0 the key has only one version, or can't be distinguished between the left and right versions of the key, and was not pressed on the numeric keypad or a key that is cons
idered to be part of the keypad.
... note: gecko always returns dom_key_location_mobile on andro
id (prior to 18) and maemo.
... note: gecko never fires trusted key events with dom_key_location_joystick except on andro
id.
... starting 18, native key events on andro
id may have this value.
MediaDevices.enumerateDevices() - Web APIs
it simply outputs a list of the device
ids, with their labels if available.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + "
id = " + device.device
id); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: v
ideoinput:
id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput:
id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput:
id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more mediastreams are active or persistent permissions are granted: v
ideoinput: facetime hd camera (built-in)
id=cso9...
...c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone)
id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone
id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevices: enumeratedevices' in that specification.
... cand
idate recommendation initial definition.
MediaKeyStatusMap.entries() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetentries experimentalchrome full support 42edge full support 16firefox ?
... webview andro
id full support 43chrome andro
id full support 42firefox andro
id ?
... opera andro
id full support 29safari ios ?
... samsung internet andro
id full support 4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.forEach() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetforeach experimentalchrome full support 42edge full support 13firefox ?
... webview andro
id full support 43chrome andro
id full support 42firefox andro
id ?
... opera andro
id full support 29safari ios ?
... samsung internet andro
id full support 4.0legend full support full support compatibility unknown compatibility unknownexperimental.
MediaKeyStatusMap.keys() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetkeys experimentalchrome full support 42edge full support 16firefox ?
... webview andro
id full support 43chrome andro
id full support 42firefox andro
id ?
... opera andro
id full support 29safari ios ?
... samsung internet andro
id full support 4.0legend full support full support compatibility unknown compatibility unknownexperimental.
OfflineAudioContext - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><tex...
...t x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,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" w
idth="120" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
... at this point we create another audio context, create an audiobuffersourcenode ins
ide it, and set its buffer to be equal to the promise audiobuffer.
OffscreenCanvas.getContext() - Web APIs
the offscreencanvas.getcontext() method returns a drawing context for an offscreen canvas, or null if the context
identifier is not supported.
... syntax offscreen.getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context
identifier defining the drawing context associated to the canvas.
... "bitmaprenderer" creates a imagebitmaprenderingcontext which only prov
ides functionality to replace the content of the canvas with a given imagebitmap.
... note: the
identifiers "experimental-webgl" or "experimental-webgl2" are also used in implementations of webgl.
PaintWorklet.registerPaint - Web APIs
return value undefined exceptions typeerror thrown when one of the arguments is inval
id or missing.
... inval
idmodificationerror thrown when the a worklet already exists with the specified name.
... /* 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.w
idth/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); the first step in using a paintworket is defining the paint worklet using the registe...
...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 val
id.
PannerNode.coneOuterGain - Web APIs
the coneoutergain property of the pannernode interface is a double value, describing the amount of volume reduction outs
ide the cone, defined by the coneouterangle attribute.
... the coneoutergain property's default value is 0, meaning that no sound can be heard outs
ide the cone.
... exceptions inval
idstateerror the property has been given a value outs
ide the accepted range (0–1).
...e panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outs
ide of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can ...
PannerNode.maxDistance - Web APIs
exceptions rangeerror the property has been given a value that is outs
ide the accepted range.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
PannerNode.setOrientation() - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns vo
id.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
PannerNode.setPosition() - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setposition(0,0,0); returns vo
id.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
PannerNode.setVelocity() - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns vo
id.
...you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
PaymentDetailsUpdate.error - Web APIs
the paymentdetailsupdate dictionary's error property is a human-readable domstring which prov
ides an error message to be displayed if the specified information doesn't offer any val
id shipping options.
... syntax errorstring = paymentdetailsupdate.error; paymentdetailsupdate.error = errorstring; value a domstring specifying the string to display to the user if the information specified in the paymentdetailsupdate doesn't prov
ide any val
id shipping options.
... the paymentdetailsupdate object specifies no val
id shipping options in its shippingoptions list.
... cand
idate recommendation initial definition.
PaymentDetailsUpdate.shippingAddressErrors - Web APIs
the paymentdetailsupdate dictionary's shippingaddresserrors property, if present, contains an addresserrors object whose contents prov
ide error messages for one or more of the values in the paymentaddress specified as paymentrequest.shippingaddress.
...for each property in paymentaddress, a property by the same name is found in shippingaddresserrors if and only if a val
idation error occurred for that property.
... in that case, the property in shippingaddresserrors is a string describing the val
idation error,
ideally including suggestions about fixing the error.
... cand
idate recommendation initial definition.
PaymentRequest.onshippingaddresschange - Web APIs
cand
idate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetonshippingaddresschangechrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.pa...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview andro
id no support nochrome andro
id full support 53firefox andro
id 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 andro
id no support nosafari ios full support 11.3samsung internet andro
id 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.
PaymentRequestUpdateEvent.updateWith() - Web APIs
modifiers optional an array of paymentdetailsmodifier objects, each describing a modifier for particular payment method
identifiers.
... shippingaddresserrors optional an addresserrors object which includes an error message for each property of the shipping address that could not be val
idated.
... total optional a paymentitem prov
iding an updated total for the payment.
... cand
idate recommendation initial definition.
PaymentRequest.payerName - Web APIs
cand
idate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetpayernamechrome 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...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview andro
id no support nochrome andro
id full support 58firefox andro
id 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 andro
id no support nosafari ios full support yessamsung internet andro
id 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.
PerformanceEntry - Web APIs
see property page for val
id values.
...see property page for val
id values.
..." + properties[i] + " is not supported"); } } } specifications specification status comment resource timing level 3 editor's draft resource timing level 2 working draft resource timing level 1 cand
idate recommendation adds the performanceresourcetiming interface and the resource value for entrytype.
... cand
idate recommendation added tojson() serializer method.
PerformancePaintTiming - Web APIs
the performancepainttiming interface of the paint timing prov
ides timing information about "paint" (also called "render") operations during web page construction.
...use this information to help
identify areas that take too long to prov
ide a good user experience.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/performanceentry" target="_top"><rect x="1" y="1" w
idth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/w...
...eb/api/performancepainttiming" target="_top"><rect x="201" y="1" w
idth="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
PerformanceResourceTiming.nextHopProtocol - Web APIs
the nexthopprotocol read-only property is a string representing the network protocol used to fetch the resource, as
identified by the alpn protocol
id (rfc7301).
... when a proxy is used, if a tunnel connection is established, this property returns the alpn protocol
id of the tunneled protocol.
... otherwise, this property returns the alpn protocol
id of the first hop to the proxy.
... syntax resource.nexthopprotocol; return value a string representing the network protocol used to fetch the resource, as
identified by the alpn protocol
id (rfc7301).
PhotoCapabilities.fillLightMode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfilllightmode experimentalchrome full support 59edge full support ≤79firefox ?
... webview andro
id full support 59chrome andro
id full support 59firefox andro
id ?
... opera andro
id full support 43safari ios ?
... samsung internet andro
id full support 7.0legend full support full support compatibility unknown compatibility unknownexperimental.
PhotoCapabilities.imageHeight - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetimageheight experimentalchrome full support 59edge full support ≤79firefox ?
... webview andro
id full support 59chrome andro
id full support 59firefox andro
id ?
... opera andro
id full support 43safari ios ?
... samsung internet andro
id full support 7.0legend full support full support compatibility unknown compatibility unknownexperimental.
PhotoCapabilities.redEyeReduction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetredeyereduction experimentalchrome full support 59edge full support ≤79firefox ?
... webview andro
id full support 59chrome andro
id full support 59firefox andro
id ?
... opera andro
id full support 43safari ios ?
... samsung internet andro
id full support 7.0legend full support full support compatibility unknown compatibility unknownexperimental.
ProcessingInstruction - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 10%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4...
...dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,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" w
idth="130" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">processinginstruction</t...
...ext></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name
identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processinginstruction' in that specification.
ProgressEvent.initProgressEvent() - Web APIs
do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcomputable, loaded, total); parameters typearg is a domstring
identifying the specific type of animation event that occurred.
... error the operation failed and d
idn't complete.
... abort the operation was cancelled and d
idn't complete.
... cancelablearg is a boolean flag indicating if the event associated action can be avo
ided (true) or not (false).
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <v
ideo>, <style> or <link>).
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" targ...
...et="_top"><rect x="116" y="1" w
idth="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
... var progressbar = document.getelementby
id("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'p...
PublicKeyCredential.getClientExtensionResults() - Web APIs
getclientextensionresults() is a method of the publickeycredential interface that returns an arraybuffer which contains a map between the extensions
identifiers and their results after having being processed by the client.
...this object contains a map between the extensions'
identifiers and their results from the processing.
...as of march 2019, only app
id (used during creation with publickeycredentialrequestoptions.extensions) is supported by chrome and edge.
... examples var publickey = { // here are the extensions (as "inputs") extensions: { "loc": true, // this extension has been defined to include location information in attestation "uvi": true // user verification index: how the user was verified }, challenge: new uint8array(16) /* from the server */, rp: { name: "example corp",
id : "login.example.com" }, user: {
id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var mybuffer = newcredentialinfo.getclientextensionresults(); // mybuffer w...
PublicKeyCredential.response - Web APIs
in order to val
idate the creation of credentials, a relying party's server needs both: this response the extensions of the client (given by publickeycredential.getclientextensionresults()) to val
idate the demand.
... note: when val
idating the fetching 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 which should be sent to the relying party's server in order to val
idate the demand for creation or fetching.
... 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 val
idate // and create credentials }).catch(func...
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
this is prov
ided by the relying party's server if it wants to prevent creation of new credentials for an existing user.
...
id a buffersource matching an existing public key credential
identifier (publickeycredential.raw
id).
... this
identifier is generated during the creation of the publickeycredential instance.
... examples var publickey = { excludecredentials: [ { type: "public-key", // the
id for john.doe@example.com
id : new uint8array(26) /* this actually is given by the server */ }, { type: "public-key", // the
id for john-doe@example.com
id : new uint8array(26) /* another
id */ } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp",
id : "login.example.com" }, user: { i...
PublicKeyCredentialCreationOptions.user - Web APIs
id a buffersource uniquely
identifying a given user.
... this an opaque
identifier which can be used by the authenticator to link the user account with its corresponding credentials.
... name a domstring giving a human-readable name for the user's
identifier (e.g.
... examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp",
id : "login.example.com" }, user: { // to be changed for each user
id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server ...
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
note: publickeycredentialcreationoptions.excludecredentials may be used during the creation of the credentials in order to avo
id creating new credentials for an existing user with existing public key credential.
...
id a buffersource matching an existing public key credential
identifier (publickeycredential.raw
id).
... this
identifier is generated during the creation of the publickeycredential instance.
... examples var options = { allowcredentials: [ { transports: ["usb"], type: "public-key",
id: new uint8array(26) // actually prov
ided by the server }, { transports: ["internal"], type: "public-key",
id: new uint8array(26) // actually prov
ided by the server } ], challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response ...
Web Push API Notifications best practices - Web APIs
this article prov
ides a useful summary of best practices to keep in mind when developing web sites and applications that use push notifications for user engagement.
... the dark s
ide their novelty prov
ides a new and unexploited opportunity for enterprising sites to reach potential customers.
...in mobile, it shows up in the notification tray, just like app push notifications, even when the browser is not running.” — an unnamed marketing site positive uses of push but there’s a bright and useful s
ide to push notifications, too.
...you can build trust by having a well-designed website that prov
ides good content that shows respect for the user, and a clear value to accepting push notifications.
RTCDataChannel - Web APIs
the rtcdatachannel interface represents a network channel which can be used for b
idirectional peer-to-peer transfers of arbitrary data.
...the default is "blob".bufferedamount read only the read-only rtcdatachannel property bufferedamount returns the number of bytes of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of bytes of buffered outgoing data that is cons
idered "low." the default value is 0.
id read only the read-only rtcdatachannel property
id returns an
id number (between 0 and 65,534) which uniquely
identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel.
...l property readystate returns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an
id number (between 0 and 65,535) which uniquely
identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
... cand
idate recommendation initial specification.
RTCIceParameters.usernameFragment - Web APIs
the rtciceparameters dictionary's usernamefragment property specifies the username fragment ("ufrag") that uniquely
identifies the corresponding ice session for the duration of the current ice session.
... syntax ufrag = rtciceparameters.usernamefragment; value a domstring containing the username fragment that, in tandem with the password, uniquely
identify the ice session being used by the transport.
... see rtcicecand
idate.usernamefragment to learn more about username fragments and their role in a connection.
... cand
idate recommendation initial specification.
Using the Resource Timing API - Web APIs
the resource timing api prov
ides a way to retrieve and analyze detailed network timing data regarding the loading of an application's resource(s).
...the interface also includes other properties that prov
ide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
...this timing data prov
ides a detailed profile of the resource loading phases and this data can be used to help
identify performance bottlenecks.
...this requires the server prov
iding the resource to send the timing-allow-origin http response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.
Resource Timing API - Web APIs
the interface also includes other properties that prov
ide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
... this document prov
ides an overview of the resource timing interfaces.
...however, if the browser is unable to prov
ide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.
...this requires the server prov
iding the resource to send the timing-allow-origin http response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.
SVGAngle - Web APIs
exceptions on setting: a domexception with code syntax_err is raised if the assigned string cannot be parsed as a val
id <angle>.
... exceptions: a domexception with code not_supported_err is raised if unittype is svg_angletype_unknown or not a val
id unit type constant (one of the other svg_angletype_* constants defined on this interface).
... converttospecifiedunits preserve the same underlying stored value, but reset the stored unit
identifier to the given unittype.
... cand
idate recommendation adds the dataset property.
SVGAnimateElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="190" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" w
idth="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer...
SVGAnimateMotionElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
...1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddl...
...e">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="190" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" w
idth="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimatemotionelement</text></a></svg></div> a:hover text ...
SVGAnimateTransformElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline=...
..."m
iddle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="190" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" w
idth="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimatetransformelement</text></a></svg></div> a...
SVGFEDropShadowElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
..."121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle"...
...>element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</...
...text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGLengthList - Web APIs
note: starting in gecko 5.0,the svglengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods vo
id clear() svglength initialize(in svglength newitem) svglength getitem(in unsigned long index) svglength insertitembefore(in svglength newitem, in unsigned long index) svglength replaceitem(in svglength newitem, in unsigned long index) svglength removeitem(in unsigned long index) svglength appenditem(in svglength newitem) properties readonly unsi...
... methods name & arguments return description clear() vo
id clears all existing current items from the list, with the result being an empty list.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetsvglengthlistchrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview andro
id no support nochrome andro
id full support yesfirefox andro
id full support yesopera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full support no support no support...
SVGMPathElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
...x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
... w
idth="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgmpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGNumberList - Web APIs
interface overview also implement none methods vo
id clear() svgnumber initialize(in svgnumber newitem) svgnumber getitem(in unsigned long index) svgnumber insertitembefore(in svgnumber newitem, in unsigned long index) svgnumber replaceitem(in svgnumber newitem, in unsigned long index) svgnumber removeitem(in unsigned long index) svgnumber appenditem(in svgnumber newitem) properties read...
... methods name & arguments return description clear() vo
id clears all existing current items from the list, with the result being an empty list.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetsvgnumberlistchrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support yesopera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full support compatibility unknown ...
SVGRect - Web APIs
rectangles consist of an x and y coordinate pair
identifying a minimum x value, a minimum y value, and a w
idth and height, which are constrained to be non-negative.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgrect</text></a></svg></div> a:hover text { f...
... svgrect.w
idth this represents the w
idth of the rectangle.a value that is negative results to an error.
... cand
idate recommendation changed svgrect as a legacy alias of domrect.
SVGSetElement - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 23.333333333333332%; vertical-align: m
iddle; overflow: h
idden;"><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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="...
...151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">element</text></a...
...><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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"...
... w
idth="190" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" w
idth="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
Screen.availLeft - Web APIs
returns the first available pixel available from the left s
ide of the screen.
... syntax let availleft = window.screen.availleft; example let setx = window.screen.w
idth - window.screen.availleft; let sety = window.screen.height - window.screen.availtop; window.moveto(setx, sety); notes in most cases, this property returns 0.
... if you work with two screens this property, evaluated on the right screen, returns the w
idth of the left one in pixels (thereby indicating the x coordinate of the left edge of the screen on the right).
...if the secondary screen is to the left of the primary screen, it has a negative x coordinate to compensate: [1] [2] - on left screen availleft returns 0, on the right screen it returns the w
idth of the left one [2] [1] - on left screen availleft returns -w
idth of that screen, on the right screen, it returns 0 ...
Screen.lockOrientation() - Web APIs
a screen is cons
idered in its primary portrait mode if the device is held in its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held turned by 90° clockwise.
...a screen is cons
idered in its secondary portrait mode if the device is held 180° from its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held is turned by 90° anticlockwise.
...a screen is cons
idered in its primary landscape mode if the device is held in its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° clockwise.
...a screen is cons
idered in its secondary landscape mode if the device held is 180° from its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° anticlockwise.
Selection.setBaseAndExtent() - Web APIs
return value vo
id.
... exceptions if anchoroffset is larger than the number of child nodes ins
ide anchornode, or if focusoffset is larger than the number of child nodes ins
ide focusnode, an indexsizeerror exception is thrown.
... <h1>setbaseandextent example</h1> <div> <p class="one"><span>fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>m
iddle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input
id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input
id="foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></...
...p> </div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementby
id('aoffset'); var foffset = document.getelementby
id('foffset'); var button = document.queryselector('button'); var output = document.queryselector('.output'); var selection; button.onclick = function() { try { selection = document.getselection(); selection.setbaseandextent(one, aoffset.value, two, foffset.value); var text = selection.tostring(); output.textcontent = text; } catch(e) { output.textcontent = e.message; } } play with the live example below, setting different offset values to see how this affects the selection.
ShadowRoot - Web APIs
you can retrieve a reference to an element's shadow root using its element.shadowroot property, prov
ided it was created using element.attachshadow() with the mode option set to open.
... shadowroot.innerhtml sets or returns a reference to the dom tree ins
ide the shadowroot.
... ins
ide the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updatestyle(), which actually applies the size and color to the element.
...from here we use standard dom traversal techniques to find the <style> element ins
ide the shadow dom and then update the css found ins
ide it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'w
idth: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l...
Slottable: assignedSlot - Web APIs
when <my-paragraph> is used in the document, the slot is populated by a slottable element by including it ins
ide the element with a slot attribute with the value my-text.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetassignedslot experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no suppo...
...to change preferences in firefox, visit about:config.ie no support noopera full support 40safari full support 10.1webview andro
id full support 53chrome andro
id full support 53firefox andro
id full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is ...
...to change preferences in firefox, visit about:config.opera andro
id full support 41safari ios full support 10.3samsung internet andro
id full support 6.0legend full support full support no support ...
SourceBuffer.changeType() - Web APIs
this makes it possible to change codecs or container type m
id-stream.
... one scenario in which this is helpful is to support adapting the media source to changing bandw
idth availability, by transitioning from one codec to another as resource constraints change.
... exceptions typeerror the specified string is empty, rather than indicating a val
id mime type.
... inval
idstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffer's updating property indicates that a previously queued appendbuffer() or remove() is still being processed.
StereoPannerNode.pan - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a sl
ider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the sl
ider is moved.
... moving the sl
ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...ning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the sl
ider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifi...
StereoPannerNode - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a sl
ider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the sl
ider is moved.
... moving the sl
ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...ning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the sl
ider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifi...
StorageManager.persist() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetpersistchrome full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentedge full support ...
... webview andro
id full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentchrome andro
id full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentfirefox andro
id full support ...
... 55opera andro
id full support yessafari ios ?
... samsung internet andro
id full support 6.0 full support 6.0 no support 5.0 — 6.0alternate name alternate name uses the non-standard name: requestpersistentlegend full support full support compatibility unknown compatibility unknownuses a non-standard name.uses a non-standard name.
Storage Access API - Web APIs
the storage access api prov
ides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin’s first-party storage).
... the api prov
ides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.
... the browser may dec
ide to involve the user in the decision of whether to grant an incoming storage access request.
... specifics regarding the lifetime of a storage grant and the circumstances under which the browser may dec
ide to inform the user are currently being worked through and will be announced once ready.
SubmitEvent.submitter - Web APIs
each of the submit elements'
id is used to
identify which payment processor the button corresponds to.
... let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.
id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
... please try again.", "ok"); } }); the handler
id is obtained by using the submit event's submitter property to get the submit button, from which we then get the
id.
... with that in hand, we can call a processorder() function to handle the order, passing along the form and the handler
id.
SubtleCrypto.exportKey() - Web APIs
exceptions the promise is rejected when one of the following exceptions is encountered: inval
idaccesserror raised when trying to export a non-extractable key.
... typeerror raised when trying to use an inval
id format.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // cons
ider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo exp...
...*/ window.crypto.subtle.generatekey( { name: "rsa-oaep", // cons
ider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["encrypt", "decrypt"] ).then((keypair) => { const exportbutton = document.queryselector(".spki"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.publickey); }); }); json web key import t...
SyncEvent - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 8.571428571428571%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="150" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="351" y="30" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
... syncevent.tag read only returns the developer-defined
identifier for this syncevent.
TextTrack - Web APIs
texttrack.
id read only a domstring which
identifies the track, if it has one.
... if it doesn't have an
id, then this value is an empty string ("").
... if the texttrack is associated with a <track> element, then the track's
id matches the element's
id.
...the value must adhere to the format specified in the tags for
identifying languages (bcp 47) document from the ietf, just like the html lang attribute.
TextTrackCue - Web APIs
texttrackcue.
id a domstring that
identifies the cue.
... texttrackcue.starttime a double that represents the v
ideo time that the cue will start being displayed, in seconds.
... texttrackcue.endtime a double that represents the v
ideo time that the cue will stop being displayed, in seconds.
... texttrackcue.pauseonexit a boolean for whether the v
ideo will pause when this cue stops being displayed.
TextTrackList - Web APIs
the indiv
idual tracks can be accessed using array syntax or functions such as foreach() for example.
... gettrackby
id() returns the texttrack found within the texttracklist whose
id matches the specified string.
... examples getting a v
ideo element's text track list to get a media element's texttracklist, use its texttracks property.
... var texttracks = document.queryselector("v
ideo").texttracks; monitoring track count changes in this example, we have an app that displays information about the number of channels available.
TimeEvent - Web APIs
the timeevent interface, a part of svg smil animation, prov
ides specific contextual information associated with time events.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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 which the event was generated.
Using Touch Events - Web APIs
a touch point's properties include a unique
identifier, the touch point's target element as well as the x and y coordinates of the touch point's position relative to the viewport, page, and screen.
... from interfaces to gestures an application may cons
ider different factors when defining the semantics of a gesture.
...the directionality of a swipe (for example left to right, right to left, etc.) is another factor to cons
ider.
... // touchmove handler function process_touchmove(ev) { // set call preventdefault() ev.preventdefault(); } best practices here are some best practices to cons
ider when using touch events: minimize the amount of work that is done in the touch handlers.
TrackDefault.TrackDefault() - Web APIs
syntax var trackdefault = new trackdefault(type, language, label, kinds, bytestreamtrack
id); parameters type a domstring specifying a media segment data type for the sourcebuffer to contain.
... can be audio, v
ideo, or text.
... bytestreamtrack
id optional a domstring specifying the
id of the specific track that the sourcebuffer should apply to.
... errors when this constructor is invoked, the following errors can occur: error explanation inval
idaccesserror the supplied language is not a val
id language code, e.g.
UIEvent.initUIEvent() - Web APIs
canbubble is a boolean dec
iding whether the event should bubble up through the event chain or not.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetinituievent deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie ?
... webview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support yesopera andro
id full support yessafari ios ?
... samsung internet andro
id full support yeslegend full support full support compatibility unknown compatibility unknownnon-standard.
UIEvent.layerY - Web APIs
this property takes scrolling of the page into account, and returns a value relative to the whole of the document, unless the event occurs ins
ide a positioned element, where the returned value is relative to the top left of the positioned element.
... example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_
id = evt.target.parentnode.
id; form.parent
id.value = parent_
id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: sol
id blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; w
idth: 40%; border: sol
id blue 1px; padding: 20px; } #d3 { position: abs...
...olute; top: 240px; left: 20%; w
idth: 50%; border: sol
id blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div
id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div
id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div
id="d3"> <form name="form_coords"
id="form1"> parent element
id: <input type="text" name="parent
id" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specificati...
URLUtilsReadOnly.hash - Web APIs
the urlutilsreadonly.hash read-only property returns a domstring containing a '#' followed by the fragment
identifier of the url.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internethash experimentalchrome no support noedge no support nofirefox full support 38 full support 38 no support ...
...this has been fixed to match the spec.ie no support noopera no support nosafari no support nowebview andro
id no support nochrome andro
id no support nofirefox andro
id full support 38 full support 38 no support 4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
... this has been fixed to match the spec.opera andro
id no support nosafari ios no support nosamsung internet andro
id no support nolegend full support full support no support no supportexperimental.
USB.requestDevice() - Web APIs
each filter object can have the following properties: vendor
id product
id classcode subclasscode protocolcode serialnumber return value a promise that resolves with an instance of usbdevice.
...notice that two product
ids are specified.
...for example, if only a usb device with product
id 0xa800 is found, then only one device will be listed by the user agent.
... const filters = [ {vendor
id: 0x1209, product
id: 0xa800}, {vendor
id: 0x1209, product
id: 0xa850} ]; navigator.usb.requestdevice({filters: filters}) .then(usbdevice => { console.log("product name: " + usbdevice.productname); }) .catch(e => { console.log("there is no device.
WaveShaperNode.WaveShaperNode() - Web APIs
val
id values are 'none', '2x', or '4x'.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetwaveshapernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox ...
... webview andro
id full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome andro
id full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox andro
id full support 53opera andro
id full support 42safari i...
... samsung internet andro
id full support 6.0notes full support 6.0notes notes before samsung internet 7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
WebGLRenderingContext.bindBuffer() - Web APIs
syntax vo
id gl.bindbuffer(target, buffer); parameters target a glenum specifying the binding point (target).
...an attempt to bind the buffer to another target will throw an inval
id_operation error and the current buffer binding will remain the same.
...an attempt to do so will generate an inval
id_operation error, and the current binding will remain untouched.
... examples binding a buffer to a target var canvas = document.getelementby
id('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.bufferSubData() - Web APIs
syntax // webgl1: vo
id gl.buffersubdata(target, offset, arraybuffer srcdata); vo
id gl.buffersubdata(target, offset, arraybufferview srcdata); // webgl2: vo
id gl.buffersubdata(target, dstbyteoffset, arraybufferview srcdata, srcoffset, length); parameters target a glenum specifying the binding point (target).
... exceptions a gl.inval
id_value error is thrown if the data would be written past the end of the buffer or if data is null.
... a gl.inval
id_enum error is thrown if target is not one of the allowed enums.
... examples using buffersubdata var canvas = document.getelementby
id('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); gl.buffersubdata(gl.array_buffer, 512, data); specifications specification status comment webgl 1.0the definition of 'buffersubdata' in that specification.
WebGLRenderingContext.drawArrays() - Web APIs
syntax vo
id gl.drawarrays(mode, first, count); parameters mode a glenum specifying the type primitive to render.
... exceptions if mode is not one of the accepted values, a gl.inval
id_enum error is thrown.
... if first or count are negative, a gl.inval
id_value error is thrown.
... if gl.current_program is null, a gl.inval
id_operation error is thrown.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
syntax vo
id gl.framebufferrenderbuffer(target, attachment, renderbuffertarget, renderbuffer); parameters target a glenum specifying the binding point (target) for the framebuffer.
... exceptions a gl.inval
id_enum error is thrown if target is not gl.framebuffer, gl.draw_framebuffer, or gl.read_framebuffer.
... a gl.inval
id_enum error is thrown if renderbuffertarget is not gl.renderbuffer.
... a gl.inval
id_enum error is thrown if attachment is not one of the allowed enums.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
syntax vo
id gl.framebuffertexture2d(target, attachment, textarget, texture, level); parameters target a glenum specifying the binding point (target).
... exceptions a gl.inval
id_enum error is thrown if target is not gl.framebuffer.
... a gl.inval
id_value error is thrown if level is not 0.
... a gl.inval
id_operation error is thrown if texture isn't 0 or the name of an existing texture object.
Canvas size and WebGL - Web APIs
this is done by assigning the w
idth and height properties of the canvas to the values of the clientw
idth and clientheight properties, respectively.
...the internal w
idth and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser window.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; w
idth : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.w
idth = firstcanvas.clientw
idth; firstcanvas.height = firstcanvas.clientheight; [firs...
..." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferw
idth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Clearing by clicking - Web APIs
clearing the rendering context with random colors this example prov
ides a simple illustration of how to combine webgl and user interaction.
... note how we embed the webgl function calls ins
ide the event handler function.
... <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-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; w
idth : 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.
... if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferw
idth, gl.drawingbufferheight); } // get a random color value using a helper function.
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with sol
id color and applying scissor test.</p> <button
id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; w
idth : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button...
... position[1] -= velocity; // when the sqaure hits the bottom of the drawing buffer, // we overr
ide it with new square of different color and // velocity.
... position = [ math.random()*(gl.drawingbufferw
idth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.w
idth = canvas.clientw
idth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselecto...
...r("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferw
idth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
WebGL types - Web APIs
type web
idl type description glenum unsigned long used for enums.
...w
idth and height of the drawing buffer).
... type web
idl type description glint64 long long signed 64-bit integer number.
... type web
idl type description gluint64ext long long unsigned 64-bit integer number.
Improving compatibility using WebRTC adapter.js - Web APIs
the webrtc organization prov
ides on github the webrtc adapter to work around compatibility issues in different browsers' webrtc implementations.
... note: since there is ongoing flu
idity in functionality and naming of api terms in webrtc and supporting browsers, use of this adapter is generally recommended.
... the adapter is prov
ided under a bsd-style license.
... keep in mind that even a good shim like this one doesn't mean you don't need to test your code on different browsers (and
ideally different versions of each browser).
WheelEvent - Web APIs
use this interface and avo
id the non-standard ones.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" st...
...roke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a ...
...xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" w
idth="100" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" w
idth="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">wheelevent</text></a></svg></div> ...
Window.customElements - Web APIs
d to define and register a new custom element, e.g.: let customelementregistry = window.customelements; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementby
id('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetcustomelementschrome full support 54edge full support 79firefox full support 63 full support 63 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 41safari full support 10.1webview andro
id full support 54chrome andro
id full support 54firefox andro
id full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is ...
...to change preferences in firefox, visit about:config.opera andro
id full support 41safari ios full support 10.3samsung internet andro
id full support 6.0legend full support full support no support ...
Window.print() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetprintchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.edge full support ...
... 12firefox full support 1ie full support 5opera full support 6notes full support 6notes notes starting with opera 33, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1.1webview andro
id full support 1notes full support 1notes notes starting with webview 46, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.chrome andro
id full...
... support 18notes full support 18notes notes starting with chrome 46, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.firefox andro
id no support nonotes no support nonotes notes see bug 1247609.opera andro
id full support 10.1notes full support 10.1notes notes starting with opera 33, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.safari ios full support 1samsung internet andro
id ful...
...l support 1.0notes full support 1.0notes notes starting with samsung internet 5.0, this method is blocked ins
ide an <iframe> unless its sandbox attribute has the value allow-modals.legend full support full support no support no supportsee implementation notes.see implementation notes.
Window.requestFileSystem() - Web APIs
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 dec
ided that they will not implement it.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetrequestfilesystem experimentalnon-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18pr...
...efixed full support ≤18prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera no support nosafari no support nowebview andro
id full support 37prefixed full support 37prefixed prefixed implemented with the vendor prefix: webkitchrome andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitfi...
...refox andro
id no support noopera andro
id no support nosafari ios no support nosamsung internet andro
id full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitlegend full support full support no support no supportexperimental.
Window.routeEvent() - Web APIs
try to avo
id using it.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetrouteevent deprecatednon-standardchrome no support noedge no support nofirefox no support noie ?
... webview andro
id no support nochrome andro
id no support nofirefox andro
id no support noopera andro
id ?
... samsung internet andro
id no support nolegend no support no support compatibility unknown compatibility unknownnon-standard.
WindowOrWorkerGlobalScope.clearInterval() - Web APIs
syntax scope.clearinterval(interval
id) parameters interval
id the
identifier of the repeated action you want to cancel.
... this
id was returned by the corresponding call to setinterval().
... it's worth noting that the pool of
ids used by setinterval() and settimeout() are shared, which means you can technically use clearinterval() and cleartimeout() interchangeably.
... however, for clarity, you should avo
id doing so.
WindowOrWorkerGlobalScope.fetch() - Web APIs
note: the fetch() method's parameters are
identical to those of the request() constructor.
...note that some names are forb
idden.
...to automatically send cookies for the current domain, this option must be prov
ided.
...this information should instead be prov
ided using an authorization header.
XRPermissionStatus.granted - Web APIs
the webxr device api's xrpermissionstatus interface's granted property is an array of strings, each
identifying one of the webxr features for which permission has been granted as of the time at which the permission api's navigator.permissions.query() method was called.
... syntax grantedfeatures = xrpermissionstatus.granted; value an array of domstring objects, each
identifying a single webxr feature which the app or site has been granted permission to use.
... xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outs
ide a predetermined boundary, given by the boundsgeometry in the returned object.
...if the estimated floor level is non-zero, the browser is expected to round it such a way as to avo
id fingerprinting (likely to the nearest centimeter).
XRPose - Web APIs
xrpose is a webxr api interface representing a position and orientation in the 3d space, relative to the xrspace within which it res
ides.
...this is obtained using xrframe.getviewerpose() instead of getpose(), specifying a reference space which has been adjusted to position and orient the node to prov
ide the desired viewing position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs.
... properties xrpose.transform read only a xrrig
idtransform which prov
ides the position and orientation of the pose relative to the base xrspace.
... xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and s
ide-to-s
ide motion of the viewer).
XRSession.environmentBlendMode - Web APIs
the xrsession interface's read-only environmentblendmode property
identifies if—and to what degree—the computer-generated imagery is overla
id atop the real world.
... syntax blendmode = xrsession.environmentblendmode; value a domstring whose value is one of the strings found in the enumerated type xrenvironmentblendmode, defining if—and if so, how—virtual, rendered content is overla
id atop the image of the real world.
...alpha blending can also be used by non-wearable devices that prov
ide ar modes, such as phones or tablets using cameras to capture the real world for use in ar apps.
... in this mode, the xrsession's renderstate.baselayer property prov
ides relative weights of the artificial layer during the compositing process.
XRSession.requestAnimationFrame() - Web APIs
note: despite the obvious similarities between these methods and the global requestanimationframe() function prov
ided by the window interface, you must not treat these as interchangeable.
... syntax request
id = xrsession.requestanimationframe(animationframecallback); parameters animationframecallback a function which is called before the next repaint in order to allow you to update and render the xr scene based on elapsed time, animation, user input changes, and so forth.
... return value an integer value which serves as a unique, non-zero
id or handle you may pass to cancelanimationframe() if you need to remove the pending animation frame request.
...vigator.xr // request a new xrsession xr.requestsession("inline").then((xrsession) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace) gl.bindframebuffer(xrwebgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.w
idth, xrviewport.height) // webgl draw calls will now be rendered into the appropriate viewport.
XRViewerPose - Web APIs
a typical headset prov
ides a viewer pose with two views whose eye property is either left or right, indicating which eye that view represents.
...for example, every player in a mmorpg might have an instance of xrviewerpose to prov
ide a way to calculate what they can see; if the game prov
ides a mechanism that tells the player if another player sees them, or that they see another player, this information becomes crucial.
...if a val
id pose is returned, the frame is rendered by clearing the backbuffer and then rendering each of the views in the pose; these are most likely the views for the left and right eyes.
...ose = frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.w
idth, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.
XRWebGLLayer() - Web APIs
the webxr device api xrwebgllayer() constructor creates and returns a new xrwebgllayer object, prov
iding the linkage between the webxr device and the webgl graphics layer used to render the 3d scene.
... context a webglrenderingcontext or webgl2renderingcontext
identifying the webgl drawing context to use for rendering the scene for the specified webxr session.
... layerinit optional an object conforming to the xrwebgllayerinit dictionary, prov
iding configuration options for the new xrwebgllayer.
... exceptions inval
idstateerror the new xrwebgllayer could not be created due to one of a number of possible state errors: the xrsession specified by session has already been stopped.
XRWebGLLayer.framebuffer - Web APIs
calling functions such as framebuffertexture2d(), framebufferrenderbuffer(), deleteframebuffer(), or getframebufferattachmentparameter() on an opaque framebuffer results in the webgl error inval
id_operation (0x0502).
... opaque framebuffers are cons
idered incomplete and are not available for rendering other than while executing the requestanimationframe() callback.
... attempting to clear, draw to, or read from the framebuffer results in a webgl inval
id_framebuffer_operation error (0x0506).
... calling checkframebufferstatus() on the webgl context from outs
ide the animation frame callback causes the webgl framebuffer_unsupported error (0x8cdd) to be reported.
Using the status role - Accessibility
status information content must be prov
ided within a status object, and it should be ensured that this object does not receive focus.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers may prov
ide a special key to announce the current status, and this should present the contents of any status live region.
... these should be announced when the user is
idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted.
...the information prov
ided above is one of those opinions and therefore not normative.
Using ARIA: Roles, states, and properties - Accessibility
aria defines semantics that can be applied to elements, with these div
ided into roles (defining a type of user interface element) and states and properties that are supported by a role.
... roles w
idget roles button checkbox gr
idcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) sl
ider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
... combobox gr
id (including row, gr
idcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegr
id document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties w
idget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessa...
...ge aria-expanded aria-haspopup aria-h
idden aria-inval
id aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific properties x-ms-aria-flowfrom ...
ARIA: article role - Accessibility
</div> this example shows two articles s
ide by s
ide on one page that could be structured similarly and are related.
... articles are not cons
idered a navigational landmark, but many assistive technologies 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 outs
ide the nesting hierarchy.
... ins
ide an application or other w
idget that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content.
ARIA: Comment role - Accessibility
<p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment"
id="thread-1" data-author="chris"> <h3>chris sa
id</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the
id of ...
... multiple comments since aria-details can now accept multiple
ids, we can associate multiple comments with the same annotation, like so: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, before fading away sharply.</p> <div role="comment"
id="thread-1" data-author="chris"> <h3>chris sa
id</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> <div role="comment"
id="thread-2" data-author="chris"> <h3>marcus sa
id</h3> <p class="comment-text">the guitar solo could do with a touch more chorus, and a slightly lower volume.</p> <p><time datetime="2019-03-29t15:35">march...
... 29 2019, 15:35</time></p> </div> nested comments nested comments are also possible with aria annotations — simply nest the comments ins
ide one another, like so: <div role="comment"
id="thread-1" data-author="chris"> <h3>chris sa
id</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> <div role="comment" data-author="marcus"> <h3>marcus replied</h3> <p class="comment-text">i don't know about that.
... i think the cowbell could distract from the solo.</p> <p><time datetime="2019-03-30t21:02">march 30 2019, 21:02</time></p> </div> </div> accessibility concerns landmark roles are intended to be used sparingly, to
identify larger overall sections of the document.
Accessibility: What users can do to browse more safely - Accessibility
those in the public sector who must accomodate those with special sensitivities, should cons
ider setting as
ide at least one work station and becoming familiar with its personalization and accessibility settings.
...one work station can be set up to acommodate both a low-vision indiv
idual (needs high-contrast) and to accomodate an indiv
idual with photosensitive susceptibilities, by simply, adjusting personalization and accessiblity settings.
... use reader mode on browsers enable content blockers; gets r
id of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go.
... gif scrubber gif scrubber is a chrome extension that allows you to control gifs like a v
ideo player.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration dec
ided by the cascading algorithm.
...it represents the entirety of what a val
id declaration can have as its value.
... formal syntax <declaration-value> example html <p
id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p
id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <div
id="container"> <p
id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </div> css :root { --first-color: #488cff; --second-color: #ffff8c; } #firstparagraph { background-color: var(--first-color); color: var(--second-color); } #secondparagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph { backgrou...
... cand
idate recommendation initial definition.
-webkit-line-clamp - CSS: Cascading Style Sheets
in most cases you will also want to set overflow to h
idden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.
... when applied to anchor elements, the truncating can happen in the m
iddle of the text, not necessarily at the end.
...the css overflow module level 3 specification also defines a line-clamp property, which is meant to replace this property and avo
id its issues.
...</p> css p { w
idth: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: h
idden; } result specifications specification status comment css overflow module level 3the definition of '-webkit-line-clamp' in that specification.
::cue - CSS: Cascading Style Sheets
the only exception is that background and its longhand properties apply to each cue indiv
idually, to avo
id creating boxes and obscuring unexpectedly large areas of the media.
...electors include this element may only use the following css properties: background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-w
idth ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space examples styling webvtt cues as white-on-black the following css sets the cue style so that the text is white and the background is a translucent black box.
... ::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); } specifications specification status comment webvtt: the web v
ideo text tracks formatthe definition of '::cue' in that specification.
... cand
idate recommendation initial definition.
::first-line (:first-line) - CSS: Cascading Style Sheets
note that the length of the first line depends on many factors, including the w
idth of the element, the w
idth of the document, and the font size of the text.
... allowable properties only a small subset of css properties can be used with the ::first-line pseudo-element: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-overr
ide, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shad...
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are inval
id in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
... cand
idate recommendation allows the use of text-shadow with ::first-letter.
:defined - CSS: Cascading Style Sheets
/* selects any defined element */ :defined { font-style: italic; } /* selects any instance of a specific custom element */ simple-custom:defined { display: block; } syntax :defined examples h
iding elements until they are defined the following snippets are taken from our defined-pseudo-class demo (see it live also).
...tandard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then prov
ide the following two rules to h
ide any instances of our custom element that are not defined, and display instances that are defined as block level elements: simple-custom:not(:defined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to h
ide instances of the element unt...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internet:definedchrome full support 54edge full support 79firefox full support 63ie no support noopera full support ...
... 41safari full support 10webview andro
id full support 54chrome andro
id full support 54firefox andro
id full support 63opera andro
id full support 41safari ios full support 10samsung internet andro
id full support 6.0legend full support full support no support no support ...
:nth-child() - CSS: Cascading Style Sheets
'*'<subclass-selector> = <
id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <
ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
... <
ident-token><ns-prefix> = [ <
ident-token> | '*' ]?
... | <
id-selector> = <hash-token><class-selector> = '.' <
ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <
ident-token> ] <attr-modifier>?
...the <code><em></code> is completely skipped over and ignored.</p> <div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px sol
id green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
'*'<subclass-selector> = <
id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <
ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>?
... <
ident-token><ns-prefix> = [ <
ident-token> | '*' ]?
... | <
id-selector> = <hash-token><class-selector> = '.' <
ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <
ident-token> ] <attr-modifier>?
... table example html <table> <tbody> <tr> <td>first line</td> </tr> <tr> <td>second line</td> </tr> <tr> <td>third line</td> </tr> <tr> <td>fourth line</td> </tr> <tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px sol
id blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are.
:optional - CSS: Cascading Style Sheets
syntax :optional examples see :inval
id for an example.
...this will ensure that people navigating with the a
id of assistive technology such as a screen reader will be able to understand which inputs need val
id content to ensure a successful form submission.
... mdn understanding wcag, gu
ideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status comment html living standardthe definition of ':optional' in that specification.
... recommendation defines the semantics of html and constraint val
idation.
:placeholder-shown - CSS: Cascading Style Sheets
/* selects any element with an active placeholder */ :placeholder-shown { border: 2px sol
id silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown.
... html <input placeholder="type something here!"> css input { border: 1px sol
id black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <input
id="input1" placeholder="name, rank, and serial number"> <br><br> <input
id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and
id code fields with a custom style.
... html <form
id="test"> <p> <label for="name">enter student name:</label> <input
id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input
id="branch" placeholder="student branch"/> </p> <p> <label for="s
id">enter student
id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit
id"
id="s
id" class="student
id" placeholder="8 digit
id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.student
id:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
:read-only - CSS: Cascading Style Sheets
the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to prov
ide some nicer styling to the editable <textarea>.
... recommendation defines the semantics regarding html and constraint val
idation.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internet:read-onlychrome full support 1edge full support 13firefox full support 78 full support 78 full support ...
... 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4webview andro
id full support ≤37chrome andro
id full support 18firefox andro
id full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera andro
id full support 10.1safari ios full support 3.2samsung internet androi...
fallback - CSS: Cascading Style Sheets
if a val
id fallback style is not specified, it defaults to decimal.
... a couple of scenarios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outs
ide the range.
... formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-
ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; } result specifications specification status comment css counter styles level 3the definition of 'fallback' in that ...
... cand
idate recommendation initial definition ...
range - CSS: Cascading Style Sheets
if a counter value is outs
ide the specified range, then the fallback style will be used to construct the representation of that marker.
...for each indiv
idual range, the first value is the lower bound and the second value is the upper bound.
... if the lower bound of any range is higher than the upper bound, the entire descriptor is inval
id and will be ignored.
... cand
idate recommendation initial definition ...
orientation - CSS: Cascading Style Sheets
opening the soft keyboard on many devices in portrait orientation will cause the viewport to become w
ider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
... keyword values portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the w
idth.
... landscape the viewport is in a landscape orientation, i.e., the w
idth is greater than the height.
... cand
idate recommendation no change.
@page - CSS: Cascading Style Sheets
you can only change the margins, orphans, w
idows, and page breaks of the document.
...| <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <
ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-m
iddle | @left-bottom | @right-top | @righ...
...t-m
iddle | @right-bottom examples @page pseudo-class examples please refer to the various pseudo-classes of @page for examples.
... working draft no change from css level 2 (revision 1), though more css at-rules can be used ins
ide a @page.
Using multiple backgrounds - CSS: Cascading Style Sheets
these are layered atop one another with the first background you prov
ide on top and the last background listed in the back.
... specifying multiple backgrounds is easy: .myclass { background: background1, background 2, ..., backgroundn; } you can do this with both the shorthand background property and the indiv
idual properties thereof except for background-color.
... example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { w
idth: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image d...
...oes not appear in codepen, click the 't
idy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'.
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
justify-self the justify-self property is used to align an item ins
ide its containing block on the inline axis.
... aligning in these layout methods today as we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item ins
ide a container a flex item in order to use the alignment properties as specified in flexbox.
...a margin of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center: .container { w
idth: 20em; margin-left: auto; margin-right: auto; } in table layout, you have access to the vertical-align property to align the contents of a cell ins
ide that cell.
...in the example below, a container with a single item ins
ide has been turned into a flex container for the purpose of being able to use the alignment properties.
Box alignment in Flexbox - CSS: Cascading Style Sheets
the first item overr
ides the align-items values set on the group by setting align-self to center.
...set justify-content: flex-end and the extra space is placed before the items, justify-content: space-around and it is placed either s
ide of the item in that dimension, etc.
...by setting the left and right margin to auto, both s
ides of our block try to take up all of the available space and so push the box into the center.
... 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 gu
ides alignment in flexbox external resources box alignment cheatsheet css gr
id, flexbox and box alignment thoughts on partial implementations of box alignment ...
Implementing image sprites in CSS - CSS: Cascading Style Sheets
rather than include each image as a separate image file, it is much more memory- and bandw
idth-friendly to send them as a single image; using background position as a way to distinguish between indiv
idual images in the same image file, so the number of http requests is reduced.
... note: when using http/2, it may in fact be more bandw
idth-friendly to use multiple small requests.
... implementation suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; w
idth: 20px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position.
... for example: #btn1 { background-position: -20px 0px; } #btn2 { background-position: -40px 0px; } this would move the element with the
id 'btn1' 20 pixels to the left and the element with the
id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
CSS Logical Properties and Values - CSS: Cascading Style Sheets
css logical properties and values is a module of css introducing logical properties and values that prov
ide the ability to control layout through logical, rather than physical, direction and dimension mappings.
... reference properties for sizing block-size inline-size max-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and padding border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-w
idth border-block-start border-block-start-color border-block-start-style border-block-start-w
idth border-block-style border-block-w
idth border-color (logical keyword) border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-w
idth border-inline-start border-inline-start-color border-inline-start-style border-inline-start...
...-w
idth border-inline-style border-inline-w
idth border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius border-style (logical keyword) border-w
idth (logical keyword) margin (logical keyword) margin-block margin-block-end margin-block-start margin-inline margin-inline-end margin-inline-start padding (logical keyword) padding-block padding-block-end padding-block-start padding-inline padding-inline-end padding-inline-start properties for floating and positioning clear (inline-end and inline-start keywords) float (inline-end and inline-start keywords) inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start other properties caption-s
ide (inline-end and inline-st...
...keywords) overflow-block overflow-inline overscroll-behavior-block overscroll-behavior-inline resize (block and inline keywords) text-align (end and start keywords) deprecated properties offset-block-end (now inset-block-end ) offset-block-start (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) gu
ides basic concepts of logical properties and values logical properties for sizing logical properties for margins, borders and padding logical properties for floating and positioning specifications specification status comment css logical properties and values level 1 editor's draft initial definition.
Using CSS transforms - CSS: Cascading Style Sheets
this gu
ide prov
ides an introduction to using transforms.
... /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { w
idth: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { w
idth: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; w
idth: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-a...
...omr { perspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { w
idth: 100px; height: 100px; margin: 24px; border: none; } .cube { w
idth: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; w
idth: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* ...
...96, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: gr
id; gr
id-template-columns: repeat(3, 1fr); } result once you have done this, you can work on the element in the 3d space.
Pagination - CSS: Cascading Style Sheets
to ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list ins
ide a <nav> element, and then use css to display the layout visually as a row.
... recipe download this example choices made this pattern is la
id out using flexbox — one flex container nested ins
ide another.
... the <nav> element is designated a flex container in order that we can center the list ins
ide using the justify-content property.
... we have also added some additional content that would be read by a screenreader but is h
idden visually, and set the aria-h
idden attribute on the paging arrows.
background-clip - CSS: Cascading Style Sheets
syntax /* keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outs
ide edge of the border (but underneath the border in z-ordering).
... padding-box the background extends to the outs
ide edge of the padding.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the ins
ide edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decorat...
... cand
idate recommendation initial definition.
block-size - CSS: Cascading Style Sheets
it corresponds to either the w
idth or the height property, depending on the value of writing-mode.
...syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the w
idth of the element; otherwise, it relates to the height of the element.
... initial valueautoapplies tosame as w
idth and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as w
idth and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same values as the w
idth and height properties.
... formal definition initial valueautoapplies tosame as w
idth and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as w
idth and heightanimation typea length, percentage or calc(); formal syntax <'w
idth'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(w
idth) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(w
idth) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radiu...
...percentages for the horizontal axis refer to the w
idth of the box, percentages for the vertical axis refer to the height of the box.
... negative values are inval
id.
... cand
idate recommendation initial definition ...
border-bottom-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* percentage values */ border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(w
idth) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(w
idth) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the bor...
...percentages for the horizontal axis refer to the w
idth of the box, percentages for the vertical axis refer to the height of the box.
... negative values are inval
id.
... cand
idate recommendation initial definition ...
border-bottom-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-style: none; border-bottom-style: h
idden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: sol
id; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: r
idge; border-bottom-style: inset; border-bottom-style: outset; /* global values */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: unset; the border-bottom-style property is specified as a sing...
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | h
idden | dotted | dashed | sol
id | double | groove | r
idge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">h
idden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">sol
id</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">r
idge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the...
... table */ table { border-w
idth: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: h
idden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: sol
id;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: r
idge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
... cand
idate recommendation no significant change.
border-image-repeat - CSS: Cascading Style Sheets
when one value is specified, it applies the same behavior on all four s
ides.
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { w
idth: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px sol
id; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div
id="bordered">you can try out various border repetition rules on me!</div> <select
id="repetition"> <option value="stretch">stretch</option> <option value=...
..."repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementby
id("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementby
id("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
... cand
idate recommendation initial definition ...
border-top-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-top-style: none; border-top-style: h
idden; border-top-style: dotted; border-top-style: dashed; border-top-style: sol
id; border-top-style: double; border-top-style: groove; border-top-style: r
idge; border-top-style: inset; border-top-style: outset; /* global values */ border-top-style: inherit; border-top-style: initial; border-top-style: unset; the border-top-style property is specified as a single keyword chosen from those availab...
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | h
idden | dotted | dashed | sol
id | double | groove | r
idge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">h
idden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">sol
id</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">r
idge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-w
idth: 2px; background-color: #52e385; }...
... tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: h
idden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: sol
id;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: r
idge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
... cand
idate recommendation no significant change.
box-decoration-break - CSS: Cascading Style Sheets
note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own w
idth if the break occurs in the block direction.
... valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: sol
id; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
... now, the same example but styled with box-decoration-break: clone results in: note here that each fragment has an
identical replicated border, box-shadow, and background.
... cand
idate recommendation initial definition.
box-direction - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetbox-direction deprecatednon-standardchrome full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12prefixed ...
... 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 3prefixed full support 3prefixed prefixed implemented with the vendor prefix: -webkit- no support 1.1 — 3prefixed prefixed implemented with the vendor prefix: -khtml-webview andro
id full support ≤37prefixed full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome andro
id full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix: -w...
...ebkit-firefox andro
id full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz- full support 49prefixed prefixed implemented with the vendor prefix: -webkit- full support 48prefixed disabled prefixed implemented with the vendor prefix: -webkit-disabled from version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera andro
id full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -webkit-samsung internet andro
id full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full support no s...
box-flex-group - CSS: Cascading Style Sheets
when div
iding up the box's extra space, the browser first cons
iders all elements within the first flex group.
...once there are no more flex groups, and there is still space remaining, the extra space is div
ided within the containing box according to the box-pack property.
...elements do not shrink below their minimum w
idths.
...instead, distribution of space ins
ide the flex container is now handled using flex-basis, flex-grow, and flex-shrink.
box-lines - CSS: Cascading Style Sheets
the default value is single, which means that all elements will be placed in a single row or column, and any elements that don't fit will simply be cons
idered overflow.
...the box must attempt to fit its children on as few lines as possible by shrinking all elements down to their minimum w
idths or heights if necessary.
... if the children in a horizontal box still do not fit on a line after being reduced to their minimum w
idths, then children are moved one by one onto a new line, until the elements remaining on the previous line fit.
...each line computes flexes independently, so only elements on that line are cons
idered when evaluating box-flex and box-flex-groups.
box-pack - CSS: Cascading Style Sheets
center the box packs contents in the center, div
iding any extra space equally between the start and the end.
... justify the space is div
ided evenly in-between each child, with none of the extra space placed before the first child or after the last child.
... formal definition 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: sol
id; 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 w
ide enough to show the contents are centered horizontally */ w
idth: 300px; /* children should be oriented vertically */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: verti...
... /* align children to the horizontal center of this box */ -moz-box-align: center; /* mozilla */ -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 */ w
idth: 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.
counter-reset - CSS: Cascading Style Sheets
er" to -1 */ counter-reset: my-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* cancel any reset that could have been set in less specific rules */ counter-reset: none; /* global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset; the counter-reset property is specified as either one of the following: a <custom-
ident> naming the counter, followed optionally by an <integer>.
... values <custom-
ident> the name of the counter to reset.
...this can be used to overr
ide a counter-reset defined in a less specific rule.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <custom-
ident> <integer>?
counter-set - CSS: Cascading Style Sheets
et "my-counter" to -1 */ counter-set: my-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-set: counter1 1 counter2 4; /* cancel any counter that could have been set in less specific rules */ counter-set: none; /* global values */ counter-set: inherit; counter-set: initial; counter-set: unset; the counter-set property is specified as either one of the following: a <custom-
ident> naming the counter, followed optionally by an <integer>.
... values <custom-
ident> the name of the counter to set.
...this can be used to overr
ide a counter-set defined in a less specific rule.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <custom-
ident> <integer>?
font-size - CSS: Cascading Style Sheets
avo
id using them for font sizes if you wish to create an inclusive design.
... rems rem values were invented in order to s
idestep the compounding problem.
... the css below is nearly
identical to the previous example.
... cand
idate recommendation no change.
font-variant-alternates - CSS: Cascading Style Sheets
/* keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* functional notation values */ font-variant-alternates: stylistic(user-defined-
ident); font-variant-alternates: styleset(user-defined-
ident); font-variant-alternates: character-variant(user-defined-
ident); font-variant-alternates: swash(user-defined-
ident); font-variant-alternates: ornaments(user-defined-
ident); font-variant-alternates: annotation(user-defined-
ident); font-variant-alternates: swash(
ident1) annotation(
ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-...
... stylistic() this function enables stylistic alternates for indiv
idual characters.
...it is similar to styleset(), but doesn't create coherent glyphs for a set of characters; indiv
idual characters will have independent and not necessarily coherent styles.
...to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-
ident> examples html <p>firefox rocks!</p> <p class="variant">firefox rocks!</p> css @font-feature-values "leitura display swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: leitura display swashes; font-variant-alternates: swash(fancy); } result note: you need to install the opentype font leitura display swashes for this example to work.
font-variant-position - CSS: Cascading Style Sheets
cand
idate recommendation initial definition.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetfont-variant-positionchrome no support noedge no support nofirefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind t...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support nowebview andro
id no support nochrome andro
id no support nofirefox andro
id full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to...
...to change preferences in firefox, visit about:config.opera andro
id no support nosafari ios no support nosamsung internet andro
id no support nolegend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
height - CSS: Cascading Style Sheets
the min-height and max-height properties overr
ide height.
... mdn understanding wcag, gu
ideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
...ight on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting 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 { w
idth: 250px; margin-bottom: 5px; border: 2px sol
id blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; w
idth: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
hyphens - CSS: Cascading Style Sheets
values none words are not broken at line breaks, even if characters ins
ide the words suggest line break points.
... manual words are broken for line-wrapping only where characters ins
ide the word suggest line break opportunities.
...however, suggested line break opportunities (see suggesting line break opportunities below) will overr
ide automatic break point selection when present.
... html <dl> <dt><code>none</code>: no hyphen; overflow if needed</dt> <dd lang="en" class="none">an extreme­ly long english word</dd> <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> <dd lang="en" class="manual">an extreme­ly long english word</dd> <dt><code>auto</code>: hyphens where the algorithm dec
ides (if needed)</dt> <dd lang="en" class="auto">an extreme­ly long english word</dd> </dl> css dd { w
idth: 55px; border: 1px sol
id black; } dd.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } dd.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } dd.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } result ...
inline-size - CSS: Cascading Style Sheets
it corresponds to either the w
idth or the height property, depending on the value of writing-mode.
...25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the w
idth of the element.
... values the inline-size property takes the same values as the w
idth and height properties.
... formal definition initial valueautoapplies tosame as w
idth and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as w
idth and heightanimation typea length, percentage or calc(); formal syntax <'w
idth'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
syntax refer to the documentation for <length> and <percentage> for details of the indiv
idual syntaxes allowed by this type.
... html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ w
idth: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px sol
id red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression.
... therefore, all of the following values are acceptable for w
idth: w
idth: 200px; w
idth: 20%; w
idth: calc(100% - 200px); specifications specification status comment css values and units module level 4the definition of '<length-percentage>' in that specification.
... cand
idate recommendation defines <length-percentage>.
line-height - CSS: Cascading Style Sheets
in most cases, this is the preferred way to set line-height and avo
id unexpected results due to inheritance.
... html <div class="box green"> <h1>avo
id unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ...
... </div> <div class="box red"> <h1>avo
id unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ...
... </div> <!-- the first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px --> <!-- the second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> css .green { line-height: 1.1; border: sol
id limegreen; } .red { line-height: 1.1em; border: sol
id red; } h1 { font-size: 30px; } .box { w
idth: 18em; display: inline-block; vertical-align: top; font-size: 15px; } result specifications specification status comment css level 2 (revision 1)the definition of 'line-height' in that specification.
margin-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's w
idth */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage, relative to the w
idth of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the w
idth of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bo...
...ttom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-w
idth:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; w
idth:320px; border:1px sol
id black; } div { w
idth:320px; background-color:gold; } result specifications specification status comment css basic box modelthe definition of 'margin-bottom' in that specification.
mask-clip - CSS: Cascading Style Sheets
if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the w
idth and height values of the viewbox attribute.
... container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { w
idth: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px sol
id #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 val...
...ue="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 value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementby
id("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementby
id("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
... cand
idate recommendation initial definition ...
mask-composite - CSS: Cascading Style Sheets
subtract the source is placed, where it falls outs
ide of the destination.
... formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { w
idth: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div
id="masked"> </div> <select
id="compositemode"> <option value="add">add</option> <option value="s...
...ubtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementby
id("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementby
id("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
... cand
idate recommendation initial definition ...
mask-origin - CSS: Cascading Style Sheets
if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the w
idth and height values of the viewbox attribute.
...it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { w
idth: 100px; height: 100px; margin: 10px; border: 10px sol
id 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 value="view-box">view-box</option> </select> javascript var origin = document.getelementby
id("origin"); origin.addeventlistener("change", function (evt) { document.getelementby
id("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
... cand
idate recommendation initial definition ...
mask-position - CSS: Cascading Style Sheets
note that the position can be set outs
ide of the element's box.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px sol
id black; w
idth: 250px; height: 250px; } #masked { w
idth: 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="m...
...> <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.getelementby
id("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementby
id("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
... cand
idate recommendation initial definition ...
mask-type - CSS: Cascading Style Sheets
/* keyword values */ mask-type: luminance; mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overr
idden by the mask-mode property, which has the same effect but applies to the element where the mask is used.
... formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" w
idth="0" height="0"> <defs> <mask
id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" w
idth=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; w
idth: 100px; background-color: rgb(128, 128, 128); border: sol
id 1px black; mask: url("#m"); } result setting a lumina...
...nce mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" w
idth="0" height="0"> <defs> <mask
id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" w
idth=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; w
idth: 100px; background-color: rgb(128, 128, 128); border: sol
id 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
... cand
idate recommendation initial definition.
max-inline-size - CSS: Cascading Style Sheets
it corresponds to the max-w
idth or the max-height property depending on the value defined for writing-mode.
... if the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element, otherwise it relates to the maximal w
idth of the element.
...ine-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-w
idth and max-height properties.
... formal definition initial value0applies tosame as w
idth and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-w
idth and max-heightanimation typea length, percentage or calc(); formal syntax <'max-w
idth'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
it corresponds to either the min-w
idth or the min-height property, depending on the value of writing-mode.
... min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to the minimum w
idth of the element; otherwise, it relates to the minimum height of the element.
... values the min-block-size property takes the same values as the min-w
idth and min-height properties.
... formal definition initial value0applies tosame as w
idth and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-w
idth and min-heightanimation typea length, percentage or calc(); formal syntax <'min-w
idth'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
it corresponds to either the min-w
idth or the min-height property, depending on the value of writing-mode.
... */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it relates to the minimum w
idth of the element.
... values the min-inline-size property takes the same values as the min-w
idth and min-height properties.
... formal definition initial value0applies tosame as w
idth and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-w
idth and min-heightanimation typea length, percentage or calc(); formal syntax <'min-w
idth'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
padding-left - CSS: Cascading Style Sheets
the padding-left css property sets the w
idth of the padding area to the left of an element.
... note: the padding property can be used to set paddings on all four s
ides of an element with a single declaration.
... <percentage> the size of the padding as a percentage, relative to the w
idth of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the w
idth of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .s
idebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
the padding-right css property sets the w
idth of the padding area on the right of an element.
... note: the padding property can be used to set paddings on all four s
ides of an element with a single declaration.
... <percentage> the size of the padding as a percentage, relative to the w
idth of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the w
idth of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .s
idebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
perspective-origin - CSS: Cascading Style Sheets
syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are keywords, the following is also val
id */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point.
... it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the w
idth of the element.
...omr { perspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { w
idth: 100px; height: 100px; margin: 24px; border: none; } .cube { w
idth: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; w
idth: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* ...
...96, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: gr
id; gr
id-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
<position> - CSS: Cascading Style Sheets
note: the final position described by the <position> value does not need to be ins
ide the element's box.
... examples val
id positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px inval
id positions left right bottom top 10px 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification.
... cand
idate recommendation relists links to both definitions: if css backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
... cand
idate recommendation defines <position> explicitly and extends it to support offsets from any edge.
quotes - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetquoteschrome full support 11edge full support 12firefox full support 1.5ie full support 8opera full support ...
... 4safari full support 9webview andro
id full support 37chrome andro
id full support 18firefox andro
id full support 4opera andro
id full support 14safari ios full support 9samsung internet andro
id full support 1.0auto keywordchrome no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the...
...value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingsafari no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingwebview andro
id no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingchrome andro
id no support nonotes no support non...
...otes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingfirefox andro
id no support noopera andro
id no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingsafari ios no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingsamsung internet andro
id no sup...
scroll-margin-inline-end - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; w
idth: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px sol
id #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be h
idden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and ...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; w
idth: 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, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-end: 2rem; } this means that when scrolling past the m
iddle child elements, the scrolling will snap to 1rem outs
ide the inline end edge of the second <div>, and 2rems outs
ide the inline end edge of the third <div>.
... cand
idate recommendation initial definition ...
scroll-margin-inline-start - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; w
idth: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px sol
id #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be h
idden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and ...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; w
idth: 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, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-start: 2rem; } this means that when scrolling past the m
iddle child elements, the scrolling will snap to 1rem outs
ide the inline start edge of the second <div>, and 2rems outs
ide the inline start edge of the third <div>.
... cand
idate recommendation initial definition ...
scroll-margin-inline - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; w
idth: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px sol
id #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be h
idden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and ...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; w
idth: 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, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when scrolling past the m
iddle child elements, the scrolling will snap to 1rem outs
ide the inline end edge of the second <div>, and 2rems outs
ide the inline end edge of the third <div>.
... cand
idate recommendation initial definition ...
scroll-padding - CSS: Cascading Style Sheets
the scroll-padding shorthand property sets scroll padding on all s
ides of an element at once, much like the padding property does for padding on an element.
...this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or s
idebars), or simply to put more breathing room between a targeted element and the edges of the scrollport.
...left scroll-padding-right scroll-padding-top syntax /* keyword values */ scroll-padding: auto; /* <length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a val
id <length> or a <percentage>.
... cand
idate recommendation initial definition ...
scroll-snap-type - CSS: Cascading Style Sheets
proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled cons
idering the user agent's scroll parameters.
...l</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { w
idth: 100%; height: 128px; flex-flow: row nowrap; } .container.y { w
idth: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-typ...
...e: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; w
idth: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; w
idth: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
... cand
idate recommendation initial definition ...
scrollbar-color - CSS: Cascading Style Sheets
syntax /* keyword values */ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; /* <color> values */ scrollbar-color: rebeccapurple green; /* two val
id colors.
... dark show a dark scrollbar, which can be either a dark variant of scrollbar prov
ided by the platform, or a custom scrollbar with dark colors.
... light show a light scrollbar, which can be either a light variant of scrollbar prov
ided by the platform, or a custom scrollbar with light colors.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars css .scroller { w
idth: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
<string> - CSS: Cascading Style Sheets
importantly, certain characters which would otherwise be inval
id can be escaped with a backslash.
... these include double quotes when used ins
ide a double-quoted string, single quotes when used ins
ide a single-quoted string, and the backslash itself.
...ping */ "this is a string with \" an escaped double quote." "this string also has \22 an escaped double quote." 'this is a string with \' an escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have
identical output) */ "a really long \ awesome string" "a really long awesome string" specifications specification status comment css values and units module level 3the definition of '<string>' in that specification.
... cand
idate recommendation no significant change from css level 2 (revision 1).
text-decoration-color - CSS: Cascading Style Sheets
css does not prov
ide a direct mechanism for specifying a unique color for each line type.
... webaim: color contrast checker mdn understanding wcag, gu
ideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuecurrentcolorapplies toall elements.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples <p>this paragraph has <s>some erroneous text</s> ins
ide it that i want to call attention to.</p> p { text-decoration-line: underline; text-decoration-color: cyan; } s { text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; } specifications specification status comment css text decoration module level 3the definition of 'text-decoration-color' in that specification.
... cand
idate recommendation initial definition.
text-decoration-style - CSS: Cascading Style Sheets
syntax /* keyword values */ text-decoration-style: sol
id; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: unset; values sol
id draws a single line.
... formal definition initial valuesol
idapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax sol
id | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment css text decoration module level 3the definition of 'text-decora...
... cand
idate recommendation initial definition.
text-decoration - CSS: Cascading Style Sheets
text-decoration-style sets the style of the line used for the decoration, such as sol
id, wavy, or dashed.
... formal definition initial valueas each of the properties of the shorthand:text-decoration-color: currentcolortext-decoration-style: sol
idtext-decoration-line: noneapplies toall elements.
...ntax <'text-decoration-line'> | <'text-decoration-style'> | <'text-decoration-color'> | <'text-decoration-thickness'> examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: sol
id underline purple 4px; } .blink { text-decoration: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
... cand
idate recommendation transformed into a shorthand property.
text-emphasis-position - CSS: Cascading Style Sheets
formal definition initial valueover rightapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to h
ide emphasis marks when they conflict with ruby.
... in html, this can be done with the following style rule: ruby { text-emphasis: none; } preferring emphasis marks over ruby some other editors prefer to h
ide ruby when they conflict with emphasis marks.
... in html, this can be done with the following pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /* h
ide ruby ins
ide <em> elements */ } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
... cand
idate recommendation initial definition ...
text-indent - CSS: Cascading Style Sheets
syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block w
idth */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
... <percentage> indentation is a <percentage> of the containing block's w
idth.
... formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the w
idth of the containing blockcomputed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-percentage> && hanging?
... && each-line?where <length-percentage> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinc
idunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinc
idunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinc
idunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinc
idunt ut laoreet dolore magna aliquam erat...
<time-percentage> - CSS: Cascading Style Sheets
syntax refer to the documentation for <time> and <percentage> for details of the indiv
idual syntaxes allowed by this type.
... val
id percentages 50% +50% optional plus sign -50% negative percentages are not val
id for all properties that accept percentages inval
id percentages 50 % space not allowed between the space and the percentage sign val
id times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
... +0s zero with a leading + and a unit -0ms zero with a leading - and a unit inval
id times 0 although unitless zero is allowed for <length>s, it's inval
id for <time>s.
... cand
idate recommendation defines <time-percentage>.
<time> - CSS: Cascading Style Sheets
in other words, 0 is inval
id and does not represent 0s or 0ms.
... examples val
id times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
... +0s zero with a leading + and a unit -0ms zero with a leading - and a unit inval
id times 0 although unitless zero is allowed for <length>s, it's inval
id for <time>s.
... cand
idate recommendation normative definition of s and ms.
matrix3d() - CSS: Cascading Style Sheets
html <section
id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { w
idth: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30d...
...eg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; w
idth: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px...
...</div> css html { w
idth: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { w
idth: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ a...
...nimation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /*
identity matrix is used as basis here.
scale() - CSS: Cascading Style Sheets
when a coordinate value is outs
ide the [-1, 1] range, the element grows along that dimension; when ins
ide, it shrinks.
...if you need to include such animations on your website, you should prov
ide a control to allow users to turn off animations, preferrably site-w
ide.
... also, cons
ider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.
... find out more: mdn understanding wcag, gu
ideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { w
idth: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { w
idth: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) */ transform-origin: left; background-color: pink; } result specifications ...
transform - CSS: Cascading Style Sheets
if you need to include such animations on your website, you should prov
ide a control to allow users to turn off animations, preferrably site-w
ide.
... also, cons
ider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.
... find out more: mdn understanding wcag, gu
ideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <pe...
...ate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentage> examples translating and rotating an element html <div>transformed element</div> css div { border: sol
id red; transform: translate(30px, 20px) rotate(20deg); w
idth: 140px; height: 60px; } result more examples please see using css transforms and <transform-function> for more examples.
transition-property - CSS: Cascading Style Sheets
as such, you should avo
id including any properties in the list that don't currently animate, as someday they might, causing unexpected results.
... syntax /* keyword values */ transition-property: none; transition-property: all; /* <custom-
ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sl
iding-vertically; /* multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sl
iding; /* global values */ transition-property: inherit; transition-property: initial; transition-property: unset; values none no properties will transition.
... <custom-
ident> a string
identifying the property to which a transition effect should be applied when its value changes.
... formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-
ident> examples there are several examples of css transitions included in the main css transitions article.
word-break - CSS: Cascading Style Sheets
<code>word-break: normal</code></p> <p class="normal narrow">this is a long and honorificabilitudinitatibus califragilisticexpial
idocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>2.
... <code>word-break: break-all</code></p> <p class="breakall narrow">this is a long and honorificabilitudinitatibus califragilisticexpial
idocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>3.
... <code>word-break: keep-all</code></p> <p class="keepall narrow">this is a long and honorificabilitudinitatibus califragilisticexpial
idocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>4.
... <code>word-break: break-word</code></p> <p class="breakword narrow">this is a long and honorificabilitudinitatibus califragilisticexpial
idocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> css .narrow { padding: 10px; border: 1px sol
id; w
idth: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakall { word-break: break-all; } .keepall { word-break: keep-all; } .breakword { word-break: break-word; } specifications specification status comment css text module level 3the definition of 'word-break' in that specificati...
Demos of open web technologies
mozilla supports a w
ide variety of exciting open web technologies, and we encourage their use.
...graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics gu
ide (interactive) 3d objects demo (interactive) blobular (interactive) v
ideo embedded in svg (or use the local download) summer html image map creator (source code) v
ideo v
ideo 3d animation "mozilla constantly evolving" v
ideo 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner...
... darkly movie trailer (with built in controls) events firing and volume control dragable and sizable v
ideos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css sl
ides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio a...
...pi web audio fireworks oscope.js - javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api sl
ide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch typing ...
<acronym> - HTML: Hypertext Markup Language
example <p>the <acronym title="world w
ide web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element.
... a few browsers not only add a dotted underline, but also put it in small caps; to avo
id this styling, adding something like font-variant: none in the css takes care of this case.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetacronym deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie full support yesopera ...
... full support yessafari full support yeswebview andro
id full support yeschrome andro
id full support yesfirefox andro
id full support yesopera andro
id full support yessafari ios full support yessamsung internet andro
id full support yeslegend full support full supportnon-standard.
<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
attributes balance this attribute defines a number between -10,000 and +10,000 that determines how the volume will be div
ided between the speakers.
... src this attribute specifies the url of the sound file to be played, which must be one of the following types: .wav, .au, or .m
id.
... example <bgsound src="sound1.m
id"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with audio player plug-ins to play audio in the background in most browsers.
... you can write <bgsound> as a self-closing tag (<bgsound />); however, since this element is non-standard, doing so will still not val
idate.
<col> - HTML: Hypertext Markup Language
bottom, which will put the text as close to the bottom of the cell as it is possible; m
iddle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible.
... w
idth this attribute specifies a default w
idth for each column in the current column group.
... in addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the w
idth of each column in the group should be the minimum w
idth necessary to hold the column's contents.
... relative w
idths such as 0.5* also can be used.
<dt>: The Description Term element - HTML: Hypertext Markup Language
the html <dt> element specifies a term in a description or definition list, and as such must be used ins
ide a <dl> element.
... the subsequent <dd> (description details) element prov
ides the definition or other related text associated with the term specified using <dt>.
... permitted parents before a <dt> or a <dd> element, ins
ide a <dl> or (in whatwg html) a <div> that is ins
ide a <dl>.
... example for an example, see the example prov
ided for the <dl> element.
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
this content is prov
ided by an external application or other source of interactive content such as a browser plug-in.
... w
idth the displayed w
idth of the resource, in css pixels.
... examples <embed type="v
ideo/quicktime" src="movie.mov" w
idth="640" height="480" title="title of my v
ideo"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains.
...this context shift can be confusing and time-consuming, especially if the embed element contains interactive content like v
ideo or audio.
<ins> - HTML: Hypertext Markup Language
datetime this attribute indicates the time and date of the change and must be a val
id date with an optional time string.
...for the format of the string without a time, see format of a val
id date string.
... the format of the string if it includes both date and time is covered in format of a val
id local date and time string.
... ins::before, ins::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: h
idden; position: absolute; white-space: nowrap; w
idth: 1px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity.
<menu> - HTML: Hypertext Markup Language
used within nested menus, to prov
ide a label through which the submenu can be accessed.
... examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context"
id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { w
idth: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
...--> <button type="menu" menu="popup-menu"> dropdown </button> <menu type="context"
id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet.
...--> <menu type="toolbar"> <li> <button type="menu" menu="file-menu">file</button> <menu type="context"
id="file-menu"> <menuitem label="new..." onclick="newfile()"> <menuitem label="save..." onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context"
id="edit-menu"> <menuitem label="cut..." onclick="cutedit()"> <menuitem label="copy..." onclick="copyedit()"> <menuitem label="paste..." onclick="pasteedit()"> </menu> </li> </menu> result specifications specification status comment html living standardthe definition of '<menu>' in that specification.
<p>: The Paragraph element - HTML: Hypertext Markup Language
the end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <as
ide>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
...in finished works, combining both is cons
idered redundant and amateurish.</p> <p>in very old writing, paragraphs were separated with a special character: ¶, the <i>pilcrow</i>.
... nowadays, this is cons
idered claustrophobic and hard to read.</p> <p>how hard to read?
...screen-readers and other assistive technology prov
ide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
its contents are typically rendered using the browser's default monospaced font (such as courier or luc
ida console).
... usage notes you can use a css rule to overr
ide the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any css you specify.
... the css to overr
ide the default font face would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for output generated by your website or app's javascript code, you should instead use the <output> element.
...for example, cons
ider this text presenting a transcript of a linux (or macos) console session: html <pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "hello world"</kbd> md5 ("hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> note the use of <span> to allow customization of the appearance of specific por...
accesskey - HTML: Hypertext Markup Language
the accesskey global attribute prov
ides a hint for generating a keyboard shortcut for the current element.
...ie/edge uses the first one it supports without problems, prov
ided there are no conflicts with other commands.
... accesskey values that rely on numbers may be confusing to indiv
iduals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.
...if the system lacks a method of notifying the user about this feature, the user might acc
identally activate accesskeys.
contextmenu - HTML: Hypertext Markup Language
the contextmenu attribute is obsolete and will be removed from all browsers the contextmenu global attribute is the
id of a <menu> to use as the contextual menu for this element.
... example html <body contextmenu="share"> <menu type="context"
id="share"> <menu label="share"> <menuitem label="twitter" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu.
... </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()"><...
...i am learning contextmenu 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.getelementby
id("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementby
id("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 c...
dir - HTML: Hypertext Markup Language
it can have the following values: ltr, which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent dec
ide.
... it uses a basic algorithm as it parses the characters ins
ide the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
... this attribute can be overr
idden by the css properties direction and unicode-b
idi, if a css page is active and the element supports these properties.
...chrome and safari prov
ide a directionality option in the contextual menu of input fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift.
tabindex - HTML: Hypertext Markup Language
it's mostly useful to create accessible w
idgets with javascript.
... avo
id using tabindex values greater than 0.
...check out this f
iddle to understand the scrolling effects of tabindex.
... accessibility concerns avo
id using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
this attribute does not prov
ide the accelerator key behavior.
... you must prov
ide javascript event handlers, like onkeypress, onkeydown, or onkeyup, to listen for your declared accelerator keys and activate the element accordingly.
... to prov
ide a keyboard shortcut for an element that does not need javascript, use the accesskey attribute.
...this approach is more complicated, but does not overr
ide existing keyboard shortcuts prov
ided by the user’s browser or operating system.
CORS errors - HTTP
identifying the issue to understand the underlying issue with the cors configuration, you need to find out which request is at fault and why.
...part of the error text is a "reason" message that prov
ides added insight into what went wrong.
... reason: cors disabled reason: cors request d
id not succeed reason: cors header ‘origin’ cannot be added reason: cors request external redirect not allowed reason: cors request not http reason: cors header ‘access-control-allow-origin’ missing reason: cors header ‘access-control-allow-origin’ does not match ‘xyz’ reason: credential is not supported if the cors header ‘access-control-allow-origin’ is ‘*’ reason: d
id not find method in cors header ‘access-control-allow-methods’ reason: expected ‘true’ in cors header ‘access-control-allow-credentials’ reason: cors preflight channel d
id not succeed reaso...
...n: inval
id token ‘xyz’ in cors header ‘access-control-allow-methods’ reason: inval
id token ‘xyz’ in cors header ‘access-control-allow-headers’ reason: missing token ‘xyz’ in cors header ‘access-control-allow-headers’ from cors preflight channel reason: multiple cors header ‘access-control-allow-origin’ not allowed ...
Using Feature Policy - HTTP
writing a policy a policy is described using a set of indiv
idual policy directives.
... specifying your policy feature policy prov
ides two ways to specify policies to control features: the feature-policy http header.
... enforcing best practices for good user experiences it's difficult to build a website that uses all the latest best practices and prov
ides great performance and user experiences.
...these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avo
id breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
Accept-Language - HTTP
it is recommended that the server never overr
ides an explicit decision.
... header type request header forb
idden header name no cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=.
... syntax accept-language: <language> accept-language: * // multiple types, weighted with the quality value syntax: accept-language: fr-ch, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5 directives <language> a language tag (which is sometimes referred to as a "locale
identifier").
... examples accept-language: de accept-language: de-ch accept-language: en-us,en;q=0.5 specifications specification title rfc 7231, section 5.3.5: accept-language hypertext transfer protocol (http/1.1): semantics and context bcp 47 tags for the
identification of language ...
CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies val
id sources for loading media using the <audio> and <v
ideo> elements.
...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 val
id for the source.
...it is critical to prov
ide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial.
... examples violation cases given this csp header: content-security-policy: media-src https://example.com/ the following <audio>, <v
ideo> and <track> elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <v
ideo src="https://not-example.com/v
ideo"> <track kind="subtitles" src="https://not-example.com/subtitles"> </v
ideo> specifications specification status comment content security policy level 3the definition of 'media-src' in that specification.
CSP: object-src - HTTP
the http content-security-policy object-src directive specifies val
id sources for the <object>, <embed>, and <applet> elements.
... elements controlled by object-src are perhaps coinc
identally cons
idered legacy html elements and aren't receiving new standardized features (such as the security attributes sandbox or allow for <iframe>).
...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 val
id for the source.
...it is critical to prov
ide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial.
CSP: prefetch-src - HTTP
the http content-security-policy (csp) prefetch-src directive specifies val
id resources that may be prefetched or prerendered.
...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 val
id for the source.
...it is critical to prov
ide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial.
... example prefetch resources do not match header given a page with the following content security policy: content-security-policy: prefetch-src https://example.com/ fetches for the following code will return network errors, as the urls prov
ided do not match prefetch-src's source list: <link rel="prefetch" src="https://example.org/"></link> <link rel="prerender" src="https://example.org/"></link> specification specification status comment content security policy level 3the definition of 'prefetch-src' in that specification.
CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies val
id sources for stylesheets.
...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 val
id for the source.
...it is critical to prov
ide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial.
... unsafe inline styles note: disallowing inline styles and inline scripts is one of the biggest security wins csp prov
ides.
Forwarded - HTTP
header type request header forb
idden header name no syntax forwarded: by=<
identifier>;for=<
identifier>;host=<host>;proto=<http|https> directives <
identifier> an
identifier disclosing the information that is altered or lost when using a proxy.
... 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 (such as "_h
idden" or "_secret"), or "unknown" when the preceding entity is not known (and you still want to indicate that forwarding of the request was made).
... by=<
identifier> the interface where the request came in to the proxy server.
... for=<
identifier> the client that initiated the request and subsequent proxies in a chain of proxies.
Public-Key-Pins-Report-Only - HTTP
header type response header forb
idden header name no syntax public-key-pins-report-only: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
... report-uri="<uri>" pin val
idation failures are reported to the given url.
...this key pinning is also val
id for all subdomains, which is told by the includesubdomains declaration.
... finally, report-uri="https://www.example.org/hpkp-report" explains where to report pin val
idation failures.
Public-Key-Pins - HTTP
header type response header forb
idden header name no syntax public-key-pins: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
... report-uri="<uri>" optional if this optional parameter is specified, pin val
idation failures are reported to the given url.
...this key pinning is also val
id for all subdomains, which is told by the includesubdomains declaration.
... finally, report-uri="https://www.example.org/hpkp-report" explains where to report pin val
idation failures.
Strict-Transport-Security - HTTP
header type response header forb
idden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; preload directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https.
...this creates an opportunity for a man-in-the-m
iddle attack.
... strict transport security resolves this problem; as long as you've accessed your bank's web site once using https, and the bank's web site uses strict transport security, your browser will know to automatically use only https, which prevents hackers from performing this sort of man-in-the-m
iddle attack.
...by following the gu
idelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection.
Want-Digest - HTTP
the want-digest http header is primarily used in a http request, to ask the responder to prov
ide a digest of the requested resource using the digest response header.
... the header contains
identifiers for one or more digest algorithms that the sender wishes the responder to use to create the digest.
... header type general header forb
idden header name no syntax want-digest: <digest-algorithm> // multiple algorithms, weighted with the quality value syntax: want-digest: <digest-algorithm><q-value>,<digest-algorithm><q-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-256 and sha-512.
... examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender prov
ides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=x...
HTTP request methods - HTTP
a request method can be safe,
idempotent, or cacheable.
... head the head method asks for a response
identical to that of a get request, but without the response body.
... post the post method is used to submit an entity to the specified resource, often causing a change in state or s
ide effects on the server.
... connect the connect method establishes a tunnel to the server
identified by the target resource.
HTTP Public Key Pinning (HPKP) - HTTP
firefox and chrome disable pin val
idation for pinned hosts whose val
idated certificate chain terminates at a user-defined trust anchor (rather than a built-in trust anchor).
... report-uri optional if this optional parameter is specified, pin val
idation failures are reported to the given url.
...this key pinning is also val
id for all subdomains, which is told by the includesubdomains declaration.
... finally, report-uri="https://www.example.net/hpkp-report" explains where to report pin val
idation failures.
HTTP resources and specifications - HTTP
designed with extensibility in mind, it has seen numerous additions over the years; this lead to its specification being scattered through numerous specification documents (in the m
idst of experimental abandoned extensions).
...umbers informational rfc 6585 additional http status codes proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource
identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7578 returning values from forms: multipart/form-data proposed standard r...
... cross-origin resource sharing living standard rfc 7034 http header field x-frame-options informational rfc 6797 http strict transport security (hsts) proposed standard upgrade insecure requests upgrade insecure requests cand
idate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft document specifying legacy document modes* defines x-ua-compatible note rfc 5689 http extensions for web distributed authoring and versioning (webdav) these extensions of the web, as well as carddav ...
...c 2324 hyper text coffee pot control protocol (htcpcp/1.0) april 1st joke spec rfc 7168 the hyper text coffee pot control protocol for tea efflux appliances (htcpcp-tea) april 1st joke spec html living standard html defines extensions of http for server-sent events living standard tracking preference expression dnt header editor's draft / cand
idate recommendation reporting api report-to header draft draft spec expect-ct extension for http ietf draft ...
Character classes - JavaScript
ins
ide a character set, the dot loses its special meaning and matches a literal dot.
...do not start matching in the m
iddle of a word) // \d{4} indicates a digit, four times // \b indicates another boundary (i.e.
... do not end matching in the m
iddle of a word) console.table(randomdata.match(regexpfourdigits)); // ['8787', '3512', '8735'] looking for a word (from the latin alphabet) starting with a var aliceexcerpt = "i’m sure i’m not ada,’ she sa
id, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpwordstartingwitha = /\b[aa]\w+/g; // \b indicates a boundary (i.e.
... do not start matching in the m
iddle of a word) // [aa] indicates the letter a or a // \w+ indicates any character *from the latin alphabet*, multiple times console.table(aliceexcerpt.match(regexpwordstartingwitha)); // ['ada', 'and', 'at', 'all'] looking for a word (from unicode characters) instead of the latin alphabet, we can use a range of unicode characters to
identify a word (thus being able to deal with text in other languages like russian or arabic).
JavaScript technologies overview - JavaScript
the internationalization api prov
ides collation (string comparison), number formatting, and date-and-time formatting for javascript applications, letting the applications choose the language and tailor the functionality to their needs.
... dom apis web
idl the web
idl specification prov
ides the glue between the dom technologies and ecmascript.
...in general, it also forb
ids using elements and attributes that aren't defined in a standard.
... websockets allows low-level b
idirectional communication.
About the JavaScript reference - JavaScript
if you're learning javascript, or need help understanding some of its capabilities or features, check out the javascript gu
ide.
... the javascript language is intended to be used within some larger environment, be it a browser, server-s
ide scripts, or similar.
... where to find javascript information javascript documentation of core language features (pure ecmascript, for the most part) includes the following: the javascript gu
ide the javascript reference if you are new to javascript, start with the gu
ide.
... once you have a firm grasp of the fundamentals, you can use the reference to get more details on indiv
idual objects and language constructs.
Private class fields - JavaScript
class properties are public by default and can be examined or modified outs
ide the class.
... syntax class classwithprivatefield { #privatefield } class classwithprivatemethod { #privatemethod() { return 'hello world' } } class classwithprivatestaticfield { static #private_static_field } examples private static fields private fields are accessible on the class constructor from ins
ide the class declaration itself.
...staticmethod() { this.#private_static_field = 42 return this.#private_static_field } } class subclass extends baseclasswithprivatestaticfield { } let error = null try { subclass.basepublicstaticmethod() } catch(e) { error = e} console.assert(error instanceof typeerror) private instance fields private instance fields are declared with # names (pronounced "hash names"), which are
identifiers prefixed with #.
...like private static fields, they are only accessible from ins
ide the class declaration.
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 prov
ide 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.
...you will need a few more braces in this case: (function () { })(); labeled functions if you are using function labels, you will still need to prov
ide a function name after the function keyword.
...the following syntax without a name after the function keyword is val
id then.
Default parameters - JavaScript
in the following example, if no value is prov
ided for b when multiply is called, b's value would be undefined when evaluating a * b and multiply would return nan.
...called = 0 function something() { numberoftimescalled += 1 return numberoftimescalled } callsomething() // 1 callsomething() // 2 earlier parameters are available to later default parameters parameters defined earlier (to the left) are available to later default parameters: function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message] } greet('dav
id', 'hi') // ["dav
id", "hi", "hi dav
id"] greet('dav
id', 'hi', 'happy birthday!') // ["dav
id", "hi", "happy birthday!"] this functionality can be approximated like this, which demonstrates how many edge cases are handled: function go() { return ':p' } function withdefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return ...
...t: } return [a, b, c, d, e, f, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] scope effects if default parameters are defined for one or more parameter, then a second scope (environment record) is created, specifically for the
identifiers within the parameter list.
... it also means that variables declared ins
ide the function body using var will mask parameters of the same name, instead of the usual behavior of duplicate var declarations having no effect.
The arguments object - JavaScript
arguments is an array-like object accessible ins
ide functions that contains the values of the arguments passed to that function.
...you can refer to a function's arguments ins
ide that function by using its arguments object.
... using typeof with arguments the typeof operator returns 'object' when used with arguments console.log(typeof arguments); // 'object' the type of indiv
idual arguments can be determined by indexing arguments: console.log(typeof arguments[0]); // returns the type of the first argument properties arguments.callee reference to the currently executing function that the arguments belong to.
... forb
idden in strict mode.
Array.prototype.every() - JavaScript
the every() method tests whether all elements in the array pass the test implemented by the prov
ided function.
... description the every method executes the prov
ided callback function once for each element present in the array until it finds the one where callback returns a falsy value.
... if a thisarg parameter is prov
ided to every, it will be used as callback's this value.
... function isbigenough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isbigenough); // false [12, 54, 18, 130, 44].every(isbigenough); // true using arrow functions arrow functions prov
ide a shorter syntax for the same test.
Array.prototype.lastIndexOf() - JavaScript
// production steps of ecma-262, edition 5, 15.4.4.15 // reference: http://es5.github.io/#x15.4.4.15 if (!array.prototype.lastindexof) { array.prototype.lastindexof = function(searchelement /*, fromindex*/) { 'use strict'; if (this === vo
id 0 || this === null) { throw new typeerror(); } var n, k, t = object(this), len = t.length >>> 0; if (len === 0) { return -1; } n = len - 1; if (arguments.length > 1) { n = number(arguments[1]); if (n != n) { n = 0; } else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { n = (n > 0 || -1) * math.floor(math.abs(...
...math.min(n, len - 1) : len - math.abs(n); k >= 0; k--) { if (k in t && t[k] === searchelement) { return k; } } return -1; }; } again, note that this implementation aims for absolute compatibility with lastindexof in firefox and the sp
idermonkey javascript engine, including in several cases which are arguably edge cases.
... var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var
idx = array.lastindexof(element); while (
idx != -1) { indices.push(
idx);
idx = (
idx > 0 ?
... array.lastindexof(element,
idx - 1) : -1); } console.log(indices); // [4, 2, 0] note that we have to handle the case
idx == 0 separately here because the element will always be found regardless of the fromindex parameter if it is the first element of the array.
Date.prototype.toLocaleString() - JavaScript
performance when formatting large numbers of dates, it is better to create an intl.datetimeformat object and use the function prov
ided by its format property.
...�١٢ ٥:٠٠:٠٠ ص" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(date.tolocalestring('ja-jp-u-ca-japanese')); // → "24/12/20 12:00:00" // when requesting a language that may not be supported, such as // balinese, include a fallback language (in this case, indonesian) console.log(date.tolocalestring(['ban', '
id'])); // → "20/12/2012 11.00.00" using options the results prov
ided by tolocalestring() can be customized using the options argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long date let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(date.tolocalestring('de-de', options)); // → "donnerstag, 20.
... dezember 2012" // an application may want to use utc and make that visible options.timezone = 'utc'; options.timezonename = 'short'; console.log(date.tolocalestring('en-us', options)); // → "thursday, december 20, 2012, gmt" // sometimes even the us needs 24-hour time console.log(date.tolocalestring('en-us', { hour12: false })); // → "12/19/2012, 19:00:00" avo
id comparing formatted date values to static values most of the time, the formatting returned by tolocalestring() is consistent.
... most notably, the ie and edge browsers insert b
idirectional control characters around dates, so the output text will flow properly when concatenated with other text.
FinalizationRegistry - JavaScript
description finalizationregistry prov
ides a way to request that a cleanup callback get called at some point when an object registered with the registry has been reclaimed (garbage-collected).
... if theobject is reclaimed, your cleanup callback may be called at some point with the held value you prov
ided for it ("some value" in the above).
... avo
id where possible correct use of finalizationregistry takes careful thought, and it's best avo
ided if possible.
... it's also important to avo
id relying on any specific behaviors not guaranteed by the specification.
Intl.Locale() constructor - JavaScript
the intl.locale constructor is a standard built-in property of the intl object that represents a unicode locale
identifier.
... syntax new intl.locale(tag [, options]) parameters tag the unicode locale
identifier string.
...keys are unicode locale tags, values are val
id unicode tag values.
... 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, which can contain any of several extension types.
Intl.Locale.prototype.collation - JavaScript
while the
idea of placing strings in order might seem trivial, the
idea of order can vary from region to region and language to language.
... val
id collation types collation type description big5han pinyin ordering for latin, big5 charset ordering for cjk characters (used in chinese) compat a previous version of the ordering, for compatibility dict dictionary style ordering (such as in sinhala) the direct collation type has been deprected.
...these subtags add additional data about the locale, and are added to locale
identifiers by using the -u extension.
... thus, the collation type can be added to the inital locale
identifier string that is passed into the locale constructor.
Intl.Locale.prototype.language - JavaScript
the unicode specification treats the language
identifier of a locale as the language and the region together (to make a distiction between dialects and variations, e.g.
... examples setting the language in the locale
identifer string argument in order to be a val
id unicode locale
identifier, a string must start with the language subtag.
... the main argument to the locale constructor must be a val
id unicode locale
identifier, so whenever the constructor is used, it must be passed an
identifier with a language subtag.
... let langstr = new intl.locale("en-latn-us"); console.log(langstr.language); // prints "en" overr
iding language via the configuration object while the language subtag must be specified, the locale constructor takes a configuration object, which can overr
ide the language subtag.
Intl.Locale.prototype.maximize() - JavaScript
description sometimes, it is convenient to be able to
identify the most likely locale language
identifier subtags based on an incomplete langauage
id.
...for instance, given the language
id "en", the algorithm would return "en-latn-us", since english can only be written in the latin script, and is most likely to be used in the united states, as it is the largest english-speaking country in the world.
... this functionality is prov
ided to javascript programmers via the maximize() method.
... maximize() only affects the main subtags that comprise the language
identifier: language, script, and region subtags.
Intl.Locale.prototype.numberingSystem - JavaScript
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 fullw
ide full w
idth digits geor georgian numerals — algorithmic gong gunjala gondi digits gonm masaram gondi digits grek greek upper case numerals — algorithmic greklow greek lower case numerals — algorithmic gujr gujarati digits guru gurmukhi digits han
idays han-character day-of-month numbering for l...
...unar/other traditional calendars han
idec 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 puachue hmong digits java javanese digits jpan japanese numerals — algorithmic jpanfin japanese financial numerals — algorithmic jpanyear japanese first-year gannen numbering for japanese calendar kali kayah li digits khmr ...
...nu is cons
idered a locale string "extension subtag".
... these subtags add additional data about the locale, and are added to locale
identifiers by first adding the -u key.
Intl.Locale.prototype.numeric - JavaScript
for example, the string "a-21" will be cons
idered less than "a-123".
...kn is cons
idered a locale string "extension subtag".
... these subtags add additional data about the locale, and are added to locale
identifiers by using the -u extension key.
... thus, the numeric value can be added to the inital locale
identifier string that is passed into the locale constructor.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
only one of the following two groups of properties is included: minimumintegerdigits minimumfractiondigits maximumfractiondigits the values prov
ided for these properties in the options argument or filled in as defaults.
... these properties are present only if neither minimumsignificantdigits nor maximumsignificantdigits was prov
ided in the options argument.
... minimumsignificantdigits maximumsignificantdigits the values prov
ided for these properties in the options argument or filled in as defaults.
... these properties are present only if at least one of them was prov
ided in the options argument.
JSON.parse() - JavaScript
an optional reviver function can be prov
ided to perform a transformation on the resulting object before it is returned.
... exceptions throws a syntaxerror exception if the string to parse is not val
id json.
...lse|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns // a javascript value if the text is a val
id json text.
...specifically, the computed value and all its properties (beginning with the most nested properties and proceeding to the original value itself) are indiv
idually run through the reviver.
Number - JavaScript
overr
ides the object.prototype.tolocalestring() method.
...overr
ides the object.prototype.tostring() method.
...overr
ides the object.prototype.valueof() method.
...(more details on this are described in the ecmascript standard, chapter 6.1.6 the number type.) const biggestint = number.max_safe_integer // (253 - 1) => 9007199254740991 const smallestint = number.min_safe_integer // -(253 - 1) => -9007199254740991 when parsing data that has been serialized to json, integer values falling outs
ide of this range can be expected to become corrupted when json parser coerces them to number type.
Object.setPrototypeOf() - JavaScript
because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (
ideally).
... until engine developers address this issue, if you are concerned about performance, you should avo
id setting the [[prototype]] of an object.
...it is generally cons
idered the proper way to set the prototype of an object, vs.
... { this.issymbol = 'yes'; } var nprime = 17; console.log(typeof nprime); // 'number' var oprime = object.appendchain(nprime, new mysymbol()); console.log(oprime); // '17' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a chain to the function.prototype object and appending a new function to that chain function person(sname) { this.
identity = sname; } var george = object.appendchain(new person('george'), 'console.log("hello guys!!");'); console.log(george.
identity); // 'george' george(); // 'hello guys!!' polyfill using the older object.prototype.__proto__ property, we can easily define object.setprototypeof if it isn't available already: if (!object.setprototypeof) { // only works in...
Object.prototype.toLocaleString() - JavaScript
this method is meant to be overr
idden by derived objects for locale-specific purposes.
... this function is prov
ided to give objects a generic tolocalestring method, even though not all may use it.
... objects overr
iding tolocalestring array: array.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() typedarray: typedarray.prototype.tolocalestring() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() overr
ide on array objects, tolocalestring() can be used to print array values as a string, optionally with locale-specific
identifiers (such as currency symbols) appended to them: for example: const testarray = [4, 7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,7,00 €,10,00 €" date tolocalestring() overr
ide on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for e...
...xample: const testdate = new date(date.now()); // "date fri may 29 2020 18:04:24 gmt+0100 (british summer time)" let dedate = testdate.tolocalestring('de'); // "29.5.2020, 18:04:24" var frdate = testdate.tolocalestring('fr'); //"29/05/2020 à 18:04:24" number tolocalestring() overr
ide on number objects, tolocalestring() is used to print out number displays more suitable for specific locales, e.g.
Promise() constructor - JavaScript
it communicates via the s
ide-effect caused by resolutionfunc or rejectionfunc.
... the s
ide-effect is that the promiseobj becomes "resolved." typically, it works like this: the operation within executor is asynchronous and prov
ides a callback.
...note that if you call resolutionfunc or rejectionfunc and pass another promise object as an argument, you can say that it is "resolved", but still cannot be sa
id to be "settled".
... const myfirstpromise = new promise((resolve, reject) => { // do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to prov
ide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get", url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the d...
Logical OR (||) - JavaScript
even though the || operator can be used with operands that are not boolean values, it can still be cons
idered a boolean operator since its return value can always be converted to a boolean primitive.
... short circuit means that the expr part above is not evaluated, hence any s
ide effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place).
...urns true o4 = false || (3 == 4) // f || f returns false o5 = 'cat' || 'dog' // t || t returns "cat" o6 = false || 'cat' // f || t returns "cat" o7 = 'cat' || false // t || f returns "cat" o8 = '' || false // f || f returns false o9 = false || '' // f || f returns "" o10 = false || varobject // f || object returns varobject note: if you use this operator to prov
ide a default value to some variable, be aware that any falsy value will not be used.
... if you only need to filter out null or undefined, cons
ider using the nullish coalescing operator.
const - JavaScript
[, namen = valuen]]]; namen the constant's name, which can be any legal
identifier.
...it does not mean the value it holds is immutable—just that the variable
identifier cannot be reassigned.
... all the cons
iderations about the "temporal dead zone" apply to both let and const.
...my_fav = 20; // my_fav is 7 console.log('my favorite number is: ' + my_fav); // trying to redeclare a constant throws an error // uncaught syntaxerror:
identifier 'my_fav' has already been declared const my_fav = 20; // the name my_fav is reserved for constant above, so this will fail too var my_fav = 20; // this throws an error too let my_fav = 20; block scoping it's important to note the nature of block scoping.
label - JavaScript
it is prefixing a statement with an
identifier which you can refer to.
... syntax label : statement label any javascript
identifier that is not a reserved word.
... description you can use a label to
identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.
...it will throw a syntaxerror (let is a reserved
identifier).
throw - JavaScript
xception(message) { this.message = message; this.name = 'userexception'; } function getmonthname(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo] !== undefined) { return months[mo]; } else { throw new userexception('inval
idmonthno'); } } try { // statements to try var mymonth = 15; // 15 is out of bound to raise the exception var monthname = getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an input string for a u.s.
...if the zip code uses an inval
id format, the throw statement throws an exception by creating an object of type zipcodeformatexception.
... this.tostring = function() { return string(this.value) }; } else { throw new zipcodeformatexception(zip); } } function zipcodeformatexception(value) { this.value = value; this.message = 'does not conform to the expected format for a zip code'; this.tostring = function() { return this.value + this.message; }; } /* * this could be in a script that val
idates address data * for us addresses.
... */ const zipcode_inval
id = -1; const zipcode_unknown_error = -2; function verifyzipcode(z) { try { z = new zipcode(z); } catch (e) { if (e instanceof zipcodeformatexception) { return zipcode_inval
id; } else { return zipcode_unknown_error; } } return z; } a = verifyzipcode(95060); // returns 95060 b = verifyzipcode(9560); // returns -1 c = verifyzipcode('a'); // returns -1 d = verifyzipcode('95060'); // returns 95060 e = verifyzipcode('95060 1234'); // returns 95060 1234 rethrow an exception you can use throw to rethrow an exception after you catch it.
Transitioning to strict mode - JavaScript
this article aims at prov
iding gu
idance for developers.
...it is possible to change each file indiv
idually and even to transition code to strict mode down to the function granularity.
...the only legitimate use case would be to reuse a function as in: // example taken from vanillajs: http://vanilla-js.com/ var s = document.getelementby
id('thing').style; s.opacity = 1; (function() { if ((s.opacity-=.1) < 0) s.display = 'none'; else settimeout(arguments.callee, 40); })(); which can be rewritten as: 'use strict'; var s = document.getelementby
id('thing').style; s.opacity = 1; (function fadeout() { // name the function if((s.opacity-=.1) < 0) s.display = 'none'; else settimeout(fadeout, 40); // use the name o...
... strictness-neutral code a potential "downs
ide" of moving strict code to strict mode is that the semantics may be different in legacy browsers which do not implement strict mode.
JavaScript shells - JavaScript
it can use wxw
idgets for gui apps and was formerly called wxjavascript.
... es6console.com - an open-source javascript console to test ecmascript 2015 code ins
ide the browser.
... mozrepl - connect to firefox and other mozilla apps, explore and modify them from the ins
ide, while they're running.
... execute js - (no longer maintained) - firefox-extension which prov
ides an enhanced javascript-console, where you can comfortably enter and execute arbitrary javascript-code and modify functions.
related_applications - Web app manifests
type array mandatory no the related_applications field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native andro
id application obtainable through the google play store.
... such applications are intended to be alternatives to the manifest's website that prov
ides similar/equivalent functionality — like the native app equivalent.
... examples "related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?
id=com.example.app1", "
id": "com.example.app1" }, { "platform": "itunes", "url": "https://itunes.apple.com/app/example-app1/
id123456789" } ] related application values application objects may contain the following values: member description platform the platform on which the application can be found.
...
id the
id used to represent the application on the specified platform.
<mpadded> - MathML
attributes class,
id, style prov
ided for use with stylesheets.
... w
idth sets or increments the w
idth.
... pseudo-units it is possible to use the keywords "depth", "height", and "w
idth" as a pseudo-unit for the attributes depth, height, lspace, voffset, and w
idth.
... examples <math> <mpadded height="+150px" w
idth="100px" lspace="2height"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </mpadded> </math> specifications specification status comment mathml 3.0the definition of 'mpadded' in that specification.
MathML element reference - MathML
the term presentation markup is used to describe the layout structure of mathematical notation whereas content markup prov
ides the underlying mathematical meaning and is not supposed to be rendered by the mathml parser (see bug 276028).
... if you want to learn more about content markup you should cons
ider chapter 4 in the mathml 3 specification.
... mathml presentation elements a to z math <math> (top-level element) a <maction> (binded actions to sub-expressions) <maligngroup> (alignment group) <malignmark> (alignment points) e <menclose> (enclosed contents) <merror> (enclosed syntax error messages) f <mfenced> (parentheses) <mfrac> (fraction) g <mglyph> (displaying non-standard symbols) i <mi> (
identifier) l <mlabeledtr> (labeled row in a table or a matrix) <mlongdiv> (long division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mpadded> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (radical with specified index) <mrow> (grouped sub-expressions) s...
... <ms> (string literal) <mscarries> (annotations such as carries) <mscarry> (single carry, child element of <mscarries>) <msgroup> (grouped rows of <mstack> and <mlongdiv> elements) <msline> (horizontal lines ins
ide <mstack> elements) <mspace> (space) <msqrt> (square root without an index) <msrow> (rows in <mstack> elements) <mstack> (stacked alignment) <mstyle> (style change) <msub> (subscript) <msup> (superscript) <msubsup> (subscript-superscript pair) t <mtable> (table or matrix) <mtd> (cell in a table or a matrix) <mtext> (text) <mtr> (row in a table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotat...
Using dns-prefetch - Web Performance
best practices there are 3 main things to keep in mind: for one, dns-prefetch is only effective for dns lookups on cross-origin domains, so avo
id using it to point to your site or domain.
... second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, cons
ider pairing dns-prefetch with the preconnect hint.
...combining the two prov
ides an opportunity to further reduce the perceived latency of cross-origin requests.
...you just won’t receive the benefits it prov
ides.
How to make PWAs installable - Progressive web apps (PWAs)
requirements to make the web site installable, it needs the following things in place: a web manifest, with the correct fields filled in the web site to be served from a secure (https) domain an icon to represent the app on the device a service worker registered, to allow the app to work offline (this is required only by chrome for andro
id currently) currently, only the chromium-based browsers such as chrome, edge, and samsung internet require the service worker.
... it usually res
ides in the root folder of a web app.
... for more information on a2hs, be sure to read our add to home screen gu
ide.
... browser support is currently limited to firefox for andro
id 58+, mobile chrome and andro
id webview 31+, and opera for andro
id 32+, but this should improve in the near future.
SVG Styling Attributes - SVG: Scalable Vector Graphics
it functions
identically to the class attribute in html.
... value: any val
id id string; animatable: yes style it specifies style information for its element.
... it functions
identically to the style attribute in html.
... value: any val
id style string; animatable: no ...
direction - SVG: Scalable Vector Graphics
it also may affect the direction in which characters are positioned if the unicode-b
idi property's value is either embed or b
idi-overr
ide.
... in many cases, the b
idirectional unicode algorithm produces the desired result automatically, so this attribute doesn't need to be specified in those cases.
... html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="m
iddle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.
... cand
idate recommendation refers to the css writing modes specification of the direction property.
display - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" w
idth="100" height="100" fill="skyblue"></rect> <rect x="20" y="20" w
idth="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" w
idth="100" height="100" fill="skyblue"></rect> <rect x="140" y="20" w
idth="60" height="60" fill="yellow" display="none"></rect> </svg> usage notes default value inline value [ <di...
...splay-outs
ide> | <display-ins
ide> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outs
ide> = block | inline | run-in<display-ins
ide> = flow | flow-root | table | flex | gr
id | ruby<display-listitem> = <display-outs
ide>?
...&& list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-gr
id animatable yes for a description of the values, please refer to the css display property.
... cand
idate recommendation refers to the css 2 specification of the display property, but outlines the differences regarding svg.
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient
id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient
id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" ...
...r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coinc
ides with the presentational value of cx for the element whether the value for cx was inherited or not.
... animatable none example <svg viewbox="0 0 120 120" w
idth="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient
id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" w
idth="100" height="100" fill="url(#gradient)" stroke="black" stroke-w
idth="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-w
idth="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63...
... cand
idate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fx' in that specification.
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient
id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient
id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" ...
...r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coinc
ides with the presentational value of cy for the element whether the value for cy was inherited or not.
... animatable none example <svg viewbox="0 0 120 120" w
idth="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient
id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" w
idth="100" height="100" fill="url(#gradient)" stroke="black" stroke-w
idth="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-w
idth="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63...
... cand
idate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fy' in that specification.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient
id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient
id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="ske...
...wx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" w
idth="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" w
idth="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value
identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
... cand
idate recommendation no change scalable vector graphics (svg) 2the definition of 'gradienttransformation for <radialgradient>' in that specification.
... cand
idate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'gradienttransformation for <lineargradient>' in that specification.
gradientUnits - SVG: Scalable Vector Graphics
with this value and gradienttransform being the
identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box).
... with this value and gradienttransform being the
identity matrix, the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box).
... cand
idate recommendation no change scalable vector graphics (svg) 2the definition of 'gradientunits for <lineargradient>' in that specification.
... cand
idate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'gradientunits for <radialgradient>' in that specification.
height - SVG: Scalable Vector Graphics
pshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" w
idth="90" height="0"/> <rect y="0" x="100" w
idth="90" height="60"/> <rect y="0" x="200" w
idth="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
... cand
idate recommendation definition for <mask> scalable vector graphics (svg) 2the definition of 'height' in that specification.
... cand
idate recommendation definition as a geometry property scalable vector graphics (svg) 2the definition of 'height' in that specification.
... cand
idate recommendation definition for <pattern> scalable vector graphics (svg) 1.1 (second edition)the definition of 'height' in that specification.
markerUnits - SVG: Scalable Vector Graphics
the markerunits attribute defines the coordinate system for the markerw
idth and markerunits attributes and the contents of the <marker>.
... usage notes value userspaceonuse | strokew
idth default value strokew
idth animatable yes userspaceonuse this value specifies that the markerw
idth and markerunits attributes and the contents of the <marker> element represent values in the current user coordinate system in place for the graphic object referencing the marker (i.e., the user coordinate system for the element referencing the <marker> element via a marker, marker-start, marker-m
id, or marker-end property).
... strokew
idth this value specifies that the markerw
idth and markerunits attributes and the contents of the <marker> element represent values in a coordinate system which has a single unit equal the size in user units of the current stroke w
idth (see the stroke-w
idth attribute) in place for the graphic object referencing the marker.
... cand
idate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'markerunits' in that specification.
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask
id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" w
idth="60%" height="60%"> <rect fill="black" x="0" y="0" w
idth="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask
id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" w
idth="60%" height="60%"> <rect fill="black" x="0" y="0" w
idth="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect
id="r1" x="0" ...
...y="0" w
idth="45" height="45" /> <rect
id="r2" x="0" y="55" w
idth="45" height="45" /> <rect
id="r3" x="55" y="55" w
idth="45" height="45" /> <rect
id="r4" x="55" y="0" w
idth="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, w
idth and height) of the element.
...a bounding box could be cons
idered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'maskunits' in that specification.
opacity - SVG: Scalable Vector Graphics
the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overla
id.
... as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <v
ideo> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient
id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" w
idth="100%" height="100%" fill="url(#gradient)" /...
...any values outs
ide the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.
... cand
idate recommendation references the specification in css color 3 and notes that there are some related attributes.
overflow - SVG: Scalable Vector Graphics
if the overflow property has the value h
idden or scroll, a clip of the exact size of the svg viewport is applied.
... although the initial value for overflow is auto, it is overwritten in the user agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be h
idden by default.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is w
ider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | h
idden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
... cand
idate recommendation simplifies the definition and outlines the values within the user agent stylesheet.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern
id="p1" x="12.5" y="12.5" w
idth="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern
id="p2" x=".125" y=".125" w
idth=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="...
...10" w
idth="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" w
idth="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, w
idth and height) of the element.
...a bounding box could be cons
idered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox.
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'patternunits' in that specification.
r - SVG: Scalable Vector Graphics
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0"
id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="50%"
id="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%"
id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> ...
...<rect x="20" y="120" w
idth="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" w
idth="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" w
idth="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
... cand
idate recommendation definition as a geometry property scalable vector graphics (svg) 2the definition of 'r' in that specification.
... cand
idate recommendation definition for svg2 paint servers <radialgradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'r' in that specification.
rendering-intent - SVG: Scalable Vector Graphics
sometimes pixel values that were originally within the target device gamut are changed in order to avo
id hue shifts and discontinuities and to preserve as much as possible the overall appearance of the scene.
...colors that are outs
ide the gamut are converted to colors that have the same saturation but fall just ins
ide the gamut.
... saturation this value leaves colors that fall ins
ide the gamut unchanged.
... this method usually converts out of gamut colors to colors that have the same lightness but fall just ins
ide the gamut.
result - SVG: Scalable Vector Graphics
if no value is prov
ided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive prov
ides no value for its in attribute.
... attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg 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" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage notes value <filter-primi...
...tive-reference> default value none animatable yes <filter-primitive-reference> this value is a <custom-
ident> and defines the name for the filter primitive.
... working draft clarifies that the value is a <custom-
ident>.
rx - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" w
idth="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" w
idth="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" w
idth="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
... the way the value of the rx attribute is interpreted depend on both the ry attribute and the w
idth of the rectangle: if a properly specified value is prov
ided for rx but not for ry (or the opposite), then the browser will cons
ider the missing value equal to the defined one.
... if rx is greater than half of the w
idth of the rectangle, then the browser will cons
ider the value for rx as half of the w
idth of the rectangle.
... cand
idate recommendation definition as a geometry property scalable vector graphics (svg) 1.1 (second edition)the definition of 'rx' in that specification.
ry - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" w
idth="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" w
idth="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" w
idth="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
... the way the value of the ry attribute is interpreted depend on both the rx attribute and the w
idth of the rectangle: if a properly specified value is prov
ided for ry but not for rx (or the opposite), then the browser will cons
ider the missing value equal to the defined one.
... if ry is greater than half of the w
idth of the rectangle, then the browser will cons
ider the value for ry as half of the w
idth of the rectangle.
... cand
idate recommendation definition as a geometry property scalable vector graphics (svg) 1.1 (second edition)the definition of 'ry' in that specification.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter
id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter
id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter
id="gaussianblur3" x="-30%" y="-30%" w
idth="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: ...
...translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are prov
ided, the first number represents a standard deviation value along the x-axis.
...if one number is prov
ided, then that value is used for both x and y.
... a negative value is forb
idden.
unicode - SVG: Scalable Vector Graphics
if a character is prov
ided, then this glyph corresponds to the given unicode character.
... if multiple characters are prov
ided, then this glyph corresponds to the given sequence of unicode characters.
... the unicode attribute contributes to the process for dec
iding which glyph(s) are used to represent which character(s).
... if the attribute is not prov
ided for a given <glyph>, then the only way to use this glyph is via an <altglyph> reference.
x1 - SVG: Scalable Vector Graphics
ttribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%"
id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" w
idth="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%"
id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" ...
...stop-color="red" /> </lineargradient> <rect x="11" y="1" w
idth="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'x1' in that specification.
... cand
idate recommendation definition for <line> scalable vector graphics (svg) 2the definition of 'x1' in that specification.
... cand
idate recommendation definition for <lineargradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x1' in that specification.
x2 - SVG: Scalable Vector Graphics
ibute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%"
id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" w
idth="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%"
id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" ...
...stop-color="red" /> </lineargradient> <rect x="11" y="1" w
idth="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'x2' in that specification.
... cand
idate recommendation definition for <line> scalable vector graphics (svg) 2the definition of 'x2' in that specification.
... cand
idate recommendation definition for <lineargradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x2' in that specification.
y1 - SVG: Scalable Vector Graphics
--> <lineargradient y1="0%"
id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" w
idth="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the shape it is applied to.
... --> <lineargradient y1="100%"
id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" w
idth="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y1' in that specification.
... cand
idate recommendation definition for <line> scalable vector graphics (svg) 2the definition of 'y1' in that specification.
... cand
idate recommendation definition for <lineargradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y1' in that specification.
y2 - SVG: Scalable Vector Graphics
--> <lineargradient y2="0%"
id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" w
idth="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to.
... --> <lineargradient y2="100%"
id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" w
idth="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y2' in that specification.
... cand
idate recommendation definition for <line> scalable vector graphics (svg) 2the definition of 'y2' in that specification.
... cand
idate recommendation definition for <lineargradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y2' in that specification.
<altGlyph> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes (non-additive) glyphref the glyph
identifier, the format of which is dependent on the format defined by the format attribute of the given font.
... if the reference is to a <glyph> element and that glyph is available, then that glyph is rendered instead of the character(s) that are ins
ide of the <altglyph> element.
... if the reference is to an <altglyphdef> element, then if an appropriate set of alternate glyphs is located from processing the <altglyphdef> element, then those alternate glyphs are rendered instead of the character(s) that are ins
ide of the <altglyph> element.
... value type: <iri> ; default value: none; animatable: no global attributes core attributes most notably:
id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element 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, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-w
idth, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:r...
<animate> - SVG: Scalable Vector Graphics
the svg <animate> element prov
ides a way to animate an attribute of an element over time.
... html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect w
idth="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably:
id styling attributes class, style event attributes global event attributes, document element event attributes usage notes th...
... cons
ider prov
iding a mechanism for pausing or disabling animation, as well as using the reduced motion media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, gu
ideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment svg animations level 2the definition of '<animate>' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
an
identity matrix looks like this: r g b a w r' | 1 0 0 0 0 | g' | 0 1 0 0 0 | b' | 0 0 1 0 0 | a' | 0 0 0 1 0 | in it, every new value is exactly 1 times its old value, with nothing else added.
... example svg <svg w
idth="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xm
idym
id meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g
id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" f...
...ill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!--
identity matrix --> <filter
id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">
identity matrix</text> <!-- combine rgb into green matrix --> <filter
id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#...
...colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter
id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter
id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter
id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0...
<mpath> - SVG: Scalable Vector Graphics
the <mpath> sub-element for the <animatemotion> element prov
ides the ability to reference an external <path> element as the definition of a motion path.
... example svg <svg w
idth="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" w
idth="498" height="298" fill="none" stroke="blue" stroke-w
idth="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, m
iddle and end.
... --> <path
id="path1" d="m100,250 c 100,50 400,50 400,250" fill="none" stroke="blue" stroke-w
idth="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 which will be moved about the motion path.
...--> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-w
idth="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
the keyword sourcealpha
identifies the input for this primitive, is in this case input 'in'.
... svg filter example <defs> <filter
id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g
id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired output.
...it is quite different to an xml
id and only can be referenced within the actual filter.
...<femerge> primitive contains the nodes <femergenode> taking as input the result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter
id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
Insecure passwords - Web security
serving login forms over http is especially dangerous because of the w
ide variety of attacks that can be used against them to extract a user’s password.
... the https protocol is designed to protect user data from eavesdropping (conf
identiality) and from modification (integrity) on the network.
...there are various vendors offering free and pa
id certificates.
...users use the same password across multiple sites (news websites, social networks, email prov
iders, banks).
How to turn off form autocompletion - Web security
however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government
identifier or credit card security code).
... note that the wcag 2.1 success criterion 1.3.5:
identify input purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically
identified.
... this means that the criterion can be passed (by adding the relevant autocomplete attributes to indiv
idual form fields) even when autocompletion for the form itself has been turned off.
...bling autocompletion to disable autocompletion in forms, you can set the autocomplete attribute to "off": autocomplete="off" you can do this either for an entire form, or for specific input elements in a form: <form method="post" action="/form" autocomplete="off"> […] </form> <form method="post" action="/form"> […] <div> <label for="cc">credit card:</label> <input type="text"
id="cc" name="cc" autocomplete="off"> </div> </form> setting autocomplete="off" on fields has two effects: it tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
XML introduction - XML: Extensible Markup Language
comments <!-- comment --> "correct" xml (val
id and well-formed) Сorrect design rules for an xml document to be correct, the following conditions must be fulfilled: document must be well-formed.
... example <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world <!--missing </warning> --> </message> now let's look at a corrected version of that same document: <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world </warning> </message> a document that contains an undefined tag is inval
id.
... for example, if we never defined the <warning> tag, the document above wouldn't be val
id.
... most browsers offer a debugger that can
identify poorly-formed xml documents.
Index - XPath
it uses a non-xml syntax to prov
ide a flexible way of addressing (pointing to) different parts of an xml document.
... 31 generate-
id xslt, xslt_reference the generate-
id function generates a unique
id for the first node in a given node-set and returns a string containing that
id.
... 32
id xslt, xslt_reference the
id function finds nodes matching the given
ids and returns a node-set containing the
identified nodes.
... 57 xpath snippets example, snippets, xml, xpath, xslt this article prov
ides some xpath code snippets.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
however when using an <?xml-stylesheet?> processing instruction (pi) there used to be no way to prov
ide parameters.
...no syntax checking is done on the attribute, however if it is not a val
id ncname it will never match any parameter in the stylesheet.
... if prefix is missing, empty, or equals an inval
id ncname, the pi is ignored.
...document() seems useful, but it seems tricky to maintain the invariant that generate-
id() should produce the same string for the same document.
datepicker.type - Archive of obsolete content
gr
id a datepicker that displays a calendar gr
id where one month is shown at a time.
... popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar gr
id.
... normal type gr
id type popup type ...
insertafter - Archive of obsolete content
« xul reference home insertafter type:
id when an element is in an overlay, the insertafter attribute specifies the
id of the element in the base window that the element should appear after.
... this attribute overr
ides the insertbefore attribute.
... this value may be a comma-separated list of
ids, which are scanned and the first one found in the window is used.
linkedpanel - Archive of obsolete content
« xul reference home linkedpanel type:
id the
id of the linked tabpanel element that will be displayed when the tab is selected.
...however, if this attribute is used, this behavior is overr
idden, and the tab will always be linked to a specific panel.
... this might be used to avo
id duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.
pack - Archive of obsolete content
if the box is larger than the total size of the children, the extra space is placed on the right or bottom s
ide.
... center extra space is split equally along each s
ide of the child elements, resulting the children being placed in the center of the box.
...if the box is larger than the total size of the children, the extra space is placed on the left or top s
ide.
template - Archive of obsolete content
« xul reference home template type:
id for template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists elsewhere in the xul code.
... this template attribute should be set to the
id of the template element.
...if this attribute is not specified, there should be a template element directly ins
ide the node.
textbox.type - Archive of obsolete content
there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, h
idespinbuttons, and textbox.value.
... password a textbox that h
ides what is typed, used for entering passwords.
...if you have <binding
id="input" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete" >, then the textbox will have autocomplete type, regardless of tree's 'type' attribute.
Getting File Information - Archive of obsolete content
file and stream gu
ide: [ 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 gu
ide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...two useful attributes filesize and lastmodifiedtime (nsifile.attributes) prov
ide a means of retrieving the size of a file and the time when the file was last changed.
... nsifile.ish
idden() - returns true if the file is h
idden.
insertItem - Archive of obsolete content
« xul reference home insertitem(
id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type: element add an item with the given
id to the toolbar.
... the
id should match an element in the toolbar's toolbarpalette.
... some special
ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar.
Node - Archive of obsolete content
summary this is a scriptable interface corresponding to the ns
idomnode xpcom interface.
... constants the ns
idomnode interface is the primary datatype for the entire document object model.
...ssing_instruction_node 7 short comment_node 8 short document_node 9 short document_type_node 10 short document_fragment_node 11 short notation_node 12 methods node appendchild ( node newchild ) node clonenode ( boolean deep ) boolean hasattributes ( ) boolean haschildnodes ( ) node insertbefore ( node newchild , node refchild ) boolean issupported ( string feature , string version ) vo
id normalize ( ) node removechild ( node oldchild ) node replacechild ( node newchild , node oldchild ) ...
MenuButtons - Archive of obsolete content
this is accomplished by div
iding the button into two parts, one with the label and image to carry out the default command and the second to show the menu.
...as with this example, the 'menu-button' type of button is usually used when the menu prov
ides more specific options pertaining to the operation.
... we might want to extend this example to insert a list of the unsaved documents to the save button menu so that each could be saved indiv
idually.
Attribute Substitution - Archive of obsolete content
that is '?name?age' is cons
idered to be a single variable with that name, not two variables together.
...<label value="?name" class="?gender^?nationality"/> the caret is cons
idered a separator between variables, however it will not appear in the output.
...one last thing to point out is that since the only characters that can separate a variable are a caret, a space or the end of the attribute, this means that any other character is val
id as a variable name.
Containment Properties - Archive of obsolete content
<vbox datasources="template-gu
ide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...effectively, the containment attribute allows you to specify additional predicates that prov
ide children.
...<vbox datasources="template-gu
ide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Introduction - Archive of obsolete content
typically, the value will be a uri that
identifies the location of the data.
...it is expected that there will be a template ins
ide the element.
...some rdf datasources are prov
ided with mozilla -- their url's start with 'rdf:'.
arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which prov
ides scroll arrows along its edges for scrolling through the contents of the box.
..."lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth clicktoscroll type: boolean clicktoscroll, if tru...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth disabled type: boolean gets and sets the value of the disabled attribute.
conditions - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element should appear directly ins
ide a rule element and is used to define conditions for the rule.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
deck - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties selectedindex type: integer...
...returns -1 if no items are selected do not h
ide panels; the deck element only understands visible panels.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), get...
grippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that may be used ins
ide a splitter which can be used to collapse a sibling element of the splitter.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controlle...
...rs, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequ...
keyset - Archive of obsolete content
attributes disabled examples <keyset> <key
id="sample-key" modifiers="shift" key="r"/> </keyset> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sor...
...tdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth disabled type: boolean indicates whether the element is disabled or not.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode...
listhead - Archive of obsolete content
it is usual to place listheader elements ins
ide the listhead, one for each column.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens()...
script - Archive of obsolete content
you should usually put scripts in a separate file pointed to by the src attribute, but you may also place the script inline ins
ide the opening and closing script tags.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
spacer - Archive of obsolete content
if you want a small gap, cons
ider using a separator instead.
... examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents, , boxobject...
..., builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattri...
statusbar - Archive of obsolete content
bar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: integer ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, geteleme...
...ualnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprov
ider ...
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a indiv
idual panel in a tabpanels element.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents...
..., , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributen...
tabs - Archive of obsolete content
a tabs element should be placed ins
ide a tabbox and should contain tab elements.
...this feature is used by the tabbrowser to prov
ide the facilities for adding and closing tabs.
... interfaces nsiaccessibleprov
ider, ns
idomxulselectcontrolelement ...
toolbarpalette - Archive of obsolete content
you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the
idbrowsertoolbarpalette.
... examples <toolbarpalette
id="browsertoolbarpalette"> <toolbarbutton
id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, ...
...template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getel...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, gete...
...selectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprov
ider ...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: integer ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, geteleme...
...attribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprov
ider ...
treecols - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, gete...
... interfaces nsiaccessibleprov
ider ...
triple - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a triple can be included ins
ide a rule's conditions element.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
it prov
ides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications.
...installing xulrunner mozilla prov
ides xulrunner for windows, mac os x, and linux, in english: download xulrunner for windows download xulrunner for mac os x download xulrunner for linux windows unpack the zip file to a new directory using a archive tool (7zip is recommended).
...rameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/appicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.1/xulrunner/xulrunner --install-app ~/desktop/myapplication.xpi the application will be installed to /usr/lib/vendor/applicationname known issues firewall software may
identify all xul applications as the same application.
AnalyserNode.getFloatFrequencyData() - Web APIs
syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float32array(analyser.frequencybincount); // float32array should be the same length as the frequencybincount vo
id analyser.getfloatfrequencydata(dataarray); // fill the float32array with data returned from getfloatfrequencydata() parameters array the float32array that the frequency domain data will be copied to.
...nalysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.w
idth = window.innerw
idth; canvas.height = window.innerheight; document.body.appendchild(canvas); const canvasctx = canvas.getcontext('2d'); canvasctx.clearrect(0, 0, canvas.w
idth, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0,...
... 0, 0)'; canvasctx.fillrect(0, 0, canvas.w
idth, canvas.height); //draw spectrum const barw
idth = (canvas.w
idth / bufferlength) * 2.5; let posx = 0; for (let i = 0; i < bufferlength; i++) { const barheight = (dataarray[i] + 140) * 2; canvasctx.fillstyle = 'rgb(' + math.floor(barheight + 100) + ', 50, 50)'; canvasctx.fillrect(posx, canvas.height - barheight / 2, barw
idth, barheight / 2); posx += barw
idth + 1; } }; draw(); </script> </body> specifications specification status comment web audio apithe definition of 'getfloatfrequencydata()' in that specification.
AnalyserNode.smoothingTimeConstant - Web APIs
note: if a value outs
ide the range 0–1 is set, an index_size_err exception is thrown.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, w
idth, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, w
idth, height); var barw
idth = (w
idth / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheig...
...ht+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barw
idth,barheight/2); x += barw
idth + 1; } }; draw(); specifications specification status comment web audio apithe definition of 'smoothingtimeconstant' in that specification.
Animation.finish() - Web APIs
exceptions inval
idstate the player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.
... examples the following example shows how to use the finish() method and catch an inval
idstate error.
... interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof inval
idstate) { console.log("finish() called on paused or finished animation."); } catch(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.
Animation.pause() - Web APIs
exceptions inval
idstateerror the animation's currenttime is unresolved (for example, if it's never been played or isn't currently playing) and the end time of the animation is positive infinity.
... throws an inval
idstateerror if the animation's currenttime is unresolved (perhaps it hasn't started playing yet) and the end time of the animation is positive infinity.
... example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avo
id that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementby
id('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that ...
AnimationEvent - Web APIs
the animationevent interface represents events prov
iding information related to animations.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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/event" target="_top"><rect x="1" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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" tar...
...get="_top"><rect x="116" y="1" w
idth="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetaudiobuffersourcenode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79fir...
... webview andro
id full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome andro
id full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox andro
id full support 53opera andro
id full support ...
... samsung internet andro
id full support 6.0notes full support 6.0notes notes before samsung internet 7.0, the default values were not supported.legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.
AudioBufferSourceNode.playbackRate - Web APIs
cons
ider a sound buffer containing audio sampled at 44.1 khz (44,100 samples per second).
...buttons are prov
ided to play and stop the audio playback, and a sl
ider control is used to change the playbackrate property value on the fly.
...ioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range sl
ider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; ...
AudioBufferSourceNode.start() - Web APIs
the computation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the m
idway point through a 10-second audio buffer is still 5.
...using this parameter is functionally
identical to calling start(when, offset) and then calling stop(when+duration).
... inval
idstateerror start() has already been called.
AudioContext.createMediaStreamSource() - Web APIs
example in this example, we grab a media (audio + v
ideo) stream from navigator.getusermedia, feed the media into a <v
ideo> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode.
... the range sl
ider below the <v
ideo> element controls the amount of gain given to the lowpass filter — increase the value of the sl
ider to make the audio sound more bass heavy!
... var pre = document.queryselector('pre'); var v
ideo = document.queryselector('v
ideo'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a v
ideo element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, v
ideo: true}) .then(function(stream) { v
ideo.srcobject = stream; v
ideo.onloadedmetadata = function(e) { v
ideo.play(); v
ideo.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it ...
AudioListener.dopplerFactor - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener.forwardX - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener.forwardY - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener.forwardZ - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener.positionX - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
AudioListener.positionY - Web APIs
you might be moving a character around ins
ide 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 such as a stereo.
... // set up listener and panner position information var w
idth = window.innerw
idth; var height = window.innerheight; var xpos = math.floor(w
idth/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; pa...
...enttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) + 50; rightbound = xpos - 50; xiterator = w
idth/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.innerhtml = 'listener data: x ' + xpos + ' y ' +...
CanvasRenderingContext2D.moveTo() - Web APIs
syntax vo
id ctx.moveto(x, y); parameters x the x-axis (horizontal) coordinate of the point.
... html <canvas
id="canvas"></canvas> javascript the first line begins at (50, 50) and ends at (200, 50).
... var canvas = document.getelementby
id('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.
CanvasRenderingContext2D.save() - Web APIs
the current values of the following attributes: strokestyle, fillstyle, globalalpha, linew
idth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
... syntax vo
id ctx.save(); examples saving the drawing state this example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
syntax vo
id ctx.scrollpathintoview(); vo
id ctx.scrollpathintoview(path); parameters path a path2d path to use.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas
id="canvas" w
idth="400" height="200" class="playable-canvas"> <input
id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input
id="edit" type="button" value="edit" /> <input
id="reset" type="button" value="reset" /> </div> <textarea
id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> va...
...r canvas = document.getelementby
id("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementby
id("code"); var reset = document.getelementby
id("reset"); var edit = document.getelementby
id("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.w
idth, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linew
idth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is a...
... html <canvas
id="canvas"></canvas> javascript the resulting alpha value of the fill shadow is .8 * .2, or .16.
... const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linew
idth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
for example, if textalign is "center", then the text's left edge will be at x - (textw
idth / 2).
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); canvas.w
idth = 350; const ctx = canvas.getcontext('2d'); const x = canvas.w
idth / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85...
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.w
idth, 120); result specifications specification status comment html living standardthe definition of 'canvasrend...
CanvasRenderingContext2D.transform() - Web APIs
note: see also the settransform() method, which resets the current transform to the
identity matrix and then invokes transform().
... syntax vo
id ctx.transform(a, b, c, d, e, f); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling.
... html <canvas
id="canvas"></canvas> javascript const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
syntax vo
id ctx.translate(x, y); the translate() method adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the gr
id.
... html <canvas
id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically.
... const canvas = document.getelementby
id('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the
identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Canvas tutorial - Web APIs
the examples prov
ided should give you some clear
ideas about what you can do with canvas, and will prov
ide code snippets that may get you started in building your own content.
...the default size of the canvas is 300 pixels × 150 pixels (w
idth × height).
... but custom sizes can be defined using the html height and w
idth property.
Using channel messaging - Web APIs
message channels on the other hand can prov
ide a secure channel that allows you to pass data between different browsing contexts.
... note: for more information and
ideas, the ports as the basis of an object-capability model on the web section of the spec is a useful read.
... var input = document.getelementby
id('message-input'); var output = document.getelementby
id('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick)...
CharacterData - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
...o,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,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" w
idth="130" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
Client.postMessage() - Web APIs
the ownership of these objects is given to the destination s
ide and they are no longer usable on the sending s
ide.
... if (!event.client
id) return; // get the client.
... const client = await clients.get(event.client
id); // exit early if we don't get the client.
Clients.get() - Web APIs
the get() method of the clients interface gets a service worker client matching a given
id and returns it in a promise.
... syntax self.clients.get(
id).then(function(client) { // do something with your returned client }); parameters
id a domstring representing the
id of the client you want to get.
... examples self.clients.get(
id).then(function(client) { self.clients.openwindow(client.url); }); specifications specification status comment service workersthe definition of 'get()' in that specification.
Clients - Web APIs
the clients interface prov
ides access to client objects.
... methods clients.get() returns a promise for a client matching a given
id.
... client.focus(); chatclient = client; break; } } // if we d
idn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status comment service workersthe definition of 'clients' in that specification.
Clipboard API - Web APIs
the clipboard api prov
ides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.
... interfaces clipboard secure context prov
ides an interface for reading and writing text and data to or from the system clipboard.
... the specification refers to this as the 'async clipboard api.' clipboardevent secure context represents events prov
iding information related to modification of the clipboard, that is cut, copy, and paste events.
Comment - Web APIs
<div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 11.666666666666666%; vertical-align: m
iddle; overflow: h
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" w
idth="110" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="56" y="30" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">node</text></a><polyline points="226,25 236,20 236,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" w
idth="130" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" w
idth="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
Element: keydown event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeydown the keydown and keyup events prov
ide a code indicating which key is pressed, while keypress indicates which character was entered.
...position, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key ins
ide the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p
id="log"></p> const input = document.queryselector('input'); const log = document.getelementby
id('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events prov
ide a code indicating which key is pressed, while keypress indicates which character was entered.
... of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key ins
ide the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p
id="log"></p> const input = document.queryselector('input'); const log = document.getelementby
id('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element.localName - Web APIs
example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementby
id('text'); var circle = document.getelementby
id('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" w
idth="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="50" cy="50" r=...
..."30" style="fill:#aaa"
id="circle"/> </svg:svg> <textarea
id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business
id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner
id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
Element.matches() - Web APIs
the matches() method checks to see if the element would be selected by the prov
ided selectorstring -- in other words -- checks if the element "is" the selector.
... exceptions syntax_err the specified selector string is inval
id.
... example <ul
id="birds"> <li>orange-winged parrot</li> <li class="endangered">philippine eagle</li> <li>great white pelican</li> </ul> <script type="text/javascript"> var birds = document.getelementsbytagname('li'); for (var i = 0; i < birds.length; i++) { if (birds[i].matches('.endangered')) { console.log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.
Element: mouseleave event - Web APIs
here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outs
ide of the most outer div represented here.
... html <div
id='mousetarget'> <ul
id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
... #mousetarget { box-sizing: border-box; w
idth:15rem; border:1px sol
id #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementby
id('mousetarget'); const unorderedlist = document.getelementby
id('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px sol
id #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create...
Element: mousemove event - Web APIs
the mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is ins
ide it.
... html <h1>drawing with mouse events</h1> <canvas
id="mypics" w
idth="560" height="360"></canvas> css canvas { border: 1px sol
id black; w
idth: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementby
id('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the...
...== true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linew
idth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result specifications specification status ui eventsthe definition of 'mousemove' in that specification.
Element: mouseup event - Web APIs
the mouseup event is fired at an element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located ins
ide it.
... html <h1>drawing with mouse events</h1> <canvas
id="mypics" w
idth="560" height="360"></canvas> css canvas { border: 1px sol
id black; w
idth: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementby
id('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the...
...== true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linew
idth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result specifications specification status ui eventsthe definition of 'mouseup' in that specification.
Element.setAttribute() - Web APIs
boolean attributes are cons
idered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard).
... exceptions inval
idcharactererror the specified attribute name contains one or more characters which are not val
id in attribute names.
...all that matters is that if the attribute is present at all, regardless of its actual value, its value is cons
idered to be true.
ErrorEvent - Web APIs
the errorevent interface represents events prov
iding information related to errors in scripts or in files.
... <div
id="interfacediagram" style="display: inline-block; position: relative; w
idth: 100%; padding-bottom: 20%; vertical-align: m
iddle; overflow: h
idden;"><svg 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" w
idth="75" height="50" fill="#fff" stroke="#d4dde4" stroke-w
idth="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">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/errorevent" target="_top"><rect x=...
..."116" y="1" w
idth="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-w
idth="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m
iddle" alignment-baseline="m
iddle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
Event.currentTarget - Web APIs
the currenttarget read-only property of the event interface
identifies the current target for the event, as the event traverses the dom.
... it always refers to the element to which the event handler has been attached, as opposed to event.target, which
identifies the element on which the event occurred and which may be its descendant.
... function h
ide(e){ e.currenttarget.style.visibility = 'h
idden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.getelementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click', h
ide, false); } // console: print <body> document.body.addeventlistener('click', h
ide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
Event.eventPhase - Web APIs
example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox"
id="chcapture" /> <label for="chcapture">use capturing</label> <div
id="d1">d1 <div
id="d2">d2 <div
id="d3">d3 <div
id="d4">d4</div> </div> </div> </div> <div
id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black sol
id; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = fa...
...lse, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementby
id('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementby
id('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.
id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.
id != "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true...
..."bubbling" : "error"; divinfo.innerhtml += e.currenttarget.
id + "; eventphase: " + level + "<br/>"; } function clear() { for (let i = 0; i < divs.length; i++) { if (divs[i].
id != "divinfo") { divs[i].style.backgroundcolor = (i & 1) ?
Event - Web APIs
(for example, a webpage with an advertising-module and statistics-module both monitoring v
ideo-watching.) when there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the event bubbling and capture settings of each handler trig...
... animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent
idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtc
identityerrorevent rtc
identityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomeve...
...
ideally, you should try to use event.preventdefault() and event.defaultprevented instead, but you can use returnvalue if you choose to do so.
EventSource - Web APIs
unlike websockets, server-sent events are un
idirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser).
...for example, eventsource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-s
ide storage mechanism like indexeddb or web storage.
... const sse = new eventsource('/api/v1/sse'); /* this will listen only for events * similar to the following: * * event: notice * data: useful data *
id: some
id * */ sse.addeventlistener("notice", function(e) { console.log(e.data) }) /* similarly, this will listen for events * with the field `event: update` */ sse.addeventlistener("update", function(e) { console.log(e.data) }) /* the event "message" is a special case, as it * will capture events without an event field * as well as events that have the speci...
FetchEvent() - Web APIs
options are as follows: client
id read only the client that the current service worker is controlling.
... replacesclient
id read only a domstring which
identifies the client which is being replaced by resultingclient
id.
... resultingclient
id read only a domstring containing the new client
id if the client changes as a result of the page load.
FetchEvent.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandro
id webviewchrome for andro
idfirefox for andro
idopera for andro
idsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support ≤79firefox ?
... ie no support noopera full support 46safari no support nowebview andro
id full support 59chrome andro
id full support 59firefox andro
id ?
... opera andro
id full support 43safari ios no support nosamsung internet andro
id full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownexperimental.
<circle> - SVG: Scalable Vector Graphics
global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<circle>' in that specification.
<cursor> - SVG: Scalable Vector Graphics
a recommended approach 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 which is the pointer position (i.e., the hot spot).
...if a different image format is used, this format should support the definition of a transparency mask (two options: prov
ide an explicit alpha channel or use a particular pixel color to indicate transparency).
... cand
idate recommendation replaced xlink:href by href attribute.
<ellipse> - SVG: Scalable Vector Graphics
global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate recommendation added auto value for rx and ry scalable vector graphics (svg) 1.1 (second edition)the definition of '<ellipse>' in that specification.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a w
ide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
...assuming the simplest case (where the input image's pixel gr
id aligns perfectly with the kernel's pixel gr
id) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>,...
... example svg <svg w
idth="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter
id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" w
idth="200" style="filter:url(#emboss);" /> </svg> result specif...
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg w
idth="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="m
iddle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="m
iddle" x="170" y="22">fepointlight</text> <filter
id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" ...
... lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="m
iddle" x="280" y="22">fedistantlight</text> <filter
id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="gree...
...n" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="m
iddle" x="390" y="22">fespotlight</text> <filter
id="lightme3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '...
<feDropShadow> - SVG: Scalable Vector Graphics
it can only be used ins
ide a <filter> element.
... html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter
id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter
id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter
id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r=...
... value type: <number>; default value: 2; animatable: yes global attributes core attributes most notably:
id styling attributes class, style filter primitive attributes height, in, result, x, y, w
idth presentation attributes most notably: flood-color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification status comment filter effects mod...
<g> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-w
idth="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably:
id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical ev...
...ent attributes presentation attributes most notably: clip-path, clip-rule, color, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, ari...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<g>' in that specification.
<line> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate 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.
<path> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<path>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<polygon>' in that specification.
<polyline> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably:
id, tabindex styling attributes class, style 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, 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-w
idth, 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-h
idden, aria-inval
id, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-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-rowi...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<polyline>' in that specification.
<set> - SVG: Scalable Vector Graphics
the svg <set> element prov
ides a simple means of just setting the value of an attribute for a specified duration.
... html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect
id="me" w
idth="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
... value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably:
id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification status comment svg animations level 2the definition of '<set>' in that specification.
<stop> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient
id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
... value type: <opacity>; default value: 1; animatable: yes global attributes core attributes most notably:
id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specifications specification status ...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<stop>' in that specification.
<style> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-w
idth: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string.
... 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.
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<style>' in that specification.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
the <title> element prov
ides an accessible, short-text description of any svg container element or graphics element.
... html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" w
idth="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 specificat...
... cand
idate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<title>' in that specification.
Simple Example - Archive of obsolete content
lanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be
identified by urls.
...first, we set the datasources and ref attributes as needed: <vbox datasources="template-gu
ide-ex2.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> this time, we need to use a new statement, the member condition as well as a triple.
XUL Changes for Firefox 1.5 - Archive of obsolete content
the pageshow and pageh
ide events are used when switching from a page in the cache, while the load and unload events are used only when the page is loaded or unloaded.
... <menulist> items in a <menulist> support the description attribute to allow for extra descriptive text to appear bes
ide an item's label.
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 gr
id 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 richlistbox richlistitem row rows rule scale sc...
...epicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack gr
id columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods ...
XUL Template Primer - Bindings - Archive of obsolete content
see xul:template gu
ide for up to date documentation.
... <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> </rdf:li> </rdf:seq> </nc:friends> </rdf:description> <rdf:description
id="home" nc:street="437 hoffman"/> <rdf:description
id="doghouse" nc:street="435 hoffman"/> </rdf:rdf> the rdf model that this file creates can be represented with the following graph.
action - Archive of obsolete content
examples example needed attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweven...
...ts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribute...
assign - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
bbox - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
binding - Archive of obsolete content
properties object, predicate, subject examples fixme: (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties object type: string the object of the e...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode()...
broadcaster - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
broadcasterset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
dropmarker - Archive of obsolete content
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, gete...
hbox - Archive of obsolete content
example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
listcol - Archive of obsolete content
tcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
listcols - Archive of obsolete content
tcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
listheader - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: intege...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, gete...
member - Archive of obsolete content
properties child, container examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties child type: ?
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode...
page - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
popupset - Archive of obsolete content
examples <popupset> <menupopup
id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxhe...
...ight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), com...
query - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
queryset - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
scrollbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the s
ide of the container to allow the user to scroll around in the container.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode...
scrollcorner - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
separator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
spinbuttons - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
stringbundle - Archive of obsolete content
stringbundles should be placed ins
ide a stringbundleset element.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties applocale obsolete since gecko 1.
stringbundleset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox
id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fo...
...thus, if this attribute is not used, the tabbox or an element ins
ide it must have the focus for the keyboard navigation to apply.
tabpanels - Archive of obsolete content
panels should never be h
idden; h
iding the tab suffices to make the panel inaccessible.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessible type: nsiaccess...
template - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem
id="sample-toolbutton-unified"> <toolbarbutton
id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton
id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datas...
...ources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idt...
toolbarseparator - Archive of obsolete content
letype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties accessibletype type: integer ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelemen...
toolbarset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , allowevent...
...s, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens...
treeseparator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
vbox - Archive of obsolete content
example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
where - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h
idden,
id, insertafter, insertbefore, left, maxheight, maxw
idth, menu, minheight, minw
idth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, w
idth properties inherited properties align, , alloweve...
...nts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, h
idden,
id, , , left, , maxheight, maxw
idth, menu, minheight, minw
idth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, w
idth methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattribu...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
l=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupporturl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdatesurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma sol
idcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:crea...
...don't forget to then test the installed application to be sure the installation d
id indeed work correctly, since if you acc
identally omitted resources from the script, they'll be missing from the installed package.
Custom app bundles for Mac OS X - Archive of obsolete content
d application settings) example.icns (this is the icon which will be used by your application bundle) chrome/ content/ example.xul (this directory contains your application's chrome) example.manifest defaults/ preferences/ app-prefs.js (this prov
ides some default values for preferences) application bundle contents in addition to the standard directory hierarchy that's required of all mac os x applications, as shown above in application bundle layout, there are some specific rules for what content goes where: the top-level directory is given a name that ends with .app whi...
... top-level directory info.plist pkginfo see also xulrunner - tips xulrunner - mac faq external links ins
ide application bundles property list key reference xrtemplate ...
Debugging a XULRunner Application - Archive of obsolete content
when adding a component to a xulrunner application, change the build
id in application.ini.
... note the "new in firefox 3" attribute "contentaccessible" on https://developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw3bgqjllv#query:x-jsd+page:1+m
id:xvlr7odilbyhn6v7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js...
calIFileType - Archive of obsolete content
summary the califiletype interface prov
ides information about a specific file type.
...defined in calendar/base/public/caliimportexport.
idl interface code [scriptable, uu
id(efef8333-e995-4f45-bdf7-bfcabbd9793e)] interface califiletype : nsisupports { readonly attribute astring defaultextension; readonly attribute astring extensionfilter; readonly attribute astring description; }; attributes defaultextension the default extension that should be associated with files of this type.
Format - Archive of obsolete content
summary: mozilla.dev.planning - july 17-23, 2006 announcements firefox 2/gecko 1.8.1 bug approvals starting on fr
iday july 21 at 10:00a pdt the release triage team will no longer be accepting bugs unless they meet one of the posted criteria.
... dropping bugs from blocking1.8.1+ dav
id baron suggested a list of bugs that could be dropped from the blocking list.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - september 29 - october 6, 2006 announcements sunbird and lightning 0.3rc1 available gordon announced the cand
idate (rc) builds for sunbird and lightning 0.3 are released.
... sun microsystems contributes to lightning to combine it with openoffice.org sun microsystems prov
ide users with an alternative open source choice by combining openoffice.org respectively staroffice and thunderbird/lightning.